第6章+装载数据的擎天柱+---+表格.ppt

第6章装载数据的擎天柱-表格,变形金刚大家可能都看过，其中有一个很著名的机器人叫做擎天柱，它不光本领高强，而且富有正义感和责任感，很有大哥风范。在HTML标签中也有这样一类标签，它无处不在，能装载各类的文本、数据，给我们提供海量的信息；虽然表面看起来方头方脑，可能不如上一章介绍的Div标签那样轻灵，但在构成网页的时候也能灵活变身，创建出圆润的效果；最重要的一点，应用它的网页在各种浏览器中呈现的外观格外稳定一致，令人放心。它就是表格家族。表格家族由多个标签组成，在编写网页的时候组合使用。下面本章进行详细介绍。,6.1表格的外观与结构,表格家族有如下几个成员：标签：这是表格的最外层标签，告知浏览器在和之间是表格。标签：表示了表格中的一行，在行的开始使用，行的末尾使用。标签：表示了表格一行中的具体一格，是表格的最小单位，又叫“单元格”。标签：表示表格的表头，一般处于表格的第一行，显示表格的名称，每一列单元格的名称等。标签：表示标签内部是表格的主体内容。标签：表示标签内部是表格的末尾部分。标签：表示标签内部是表格的开头部分。,6.2再访盒模型：单元格,前面已经讲过，表格的基本单位是单元格，用标签来表示。当我们看到图6-1中单元格的外观，就能感觉到，再也没有别的HTML标签能比单元格更像第4章讲过的盒模型了。因此，通过标签来进一步复习、巩固有关盒模型的知识是个非常好的机会。,6.2.1再访盒模型与俄罗斯套娃,第4章提到过盒模型由四个摞在一起的“小盒子”组成，它们分别是外边距、边框、内间距和内容。单元格是一个盒模型，它同样具有这样的结构。为了演示的方便，我们把代码中的表格简化成只有两行，并且将其在浏览器中的显示放大如图所示，图中还标出了盒模型的四个组成部分：,单元格的盒模型,6.2.2修改盒子的宽度,对于盒子来说，我们所关注的无非就是设置它们的宽度（相当于日常生活中的盒子厚度），下面分别介绍一下具体的设置过程。【设置内容盒子的宽度】内容盒子实际上就是将单元格中文字轮廓用线连接起来所构成的虚拟长方形，它没有专门的属性可以供修改高度、宽度等，不过既然是由轮廓线生成，只要修改字体的大小就可以将轮廓线向外扩张，从而间接改变内容盒子的大小。【设置内间距盒子的宽度】内间距就是内容和单元格边框的距离，设置合适的内边框能够使得单元格内的文字或者数据更加清晰易读，有利于信息的传播。有两种方法能够修改单元格内的内间距：,6.2.3单元格的重要属性,前文重点介绍了单元格中与盒模型概念相关的知识，本节将转而讲解单元格本身的属性，以及控制单元格内容显示效果的一些属性。【单元格具有的HTML标签基本属性】第五章介绍和的时候提到过，几乎所有的HTML标签都具有如下的几个属性，而且这些属性的设置方法是所有标签都一致的：className属性：该属性提供给JavaScript等脚本语言当前单元格所使用的样式名称，作为初学者，我们有个大概的印象就可以了，具体方法将在第16章讲解。dir属性：设置文字的排列方向，请参看第五章的介绍。lang属性：设置内容的语言属性，也请参看第五章的介绍。title属性：设置单元格的信息提示。当鼠标处于当前单元格内部时，以Tooltip的形式提供单元格内容的说明文字。,6.3表格的边框,我们的讲解从单元格内容出发，跨过内间距，接下来就遇到了第三层盒子-边框。在表格中，单元格的边框是在标签中设置，表格的外边框则是在标签中设置。两者具体代码的语法是一致的，因此，本节主要讲述单元格边框，读者完全可以以此类推，通过代码中的标签，学会表格边框的设置。在正式学习之前，先了解一下表格的两种边框模式，它们对单元格边框的正确显示起了很大的作用。,6.3.1表格边框的两种模式,HTML表格标签有两种边框模式，分别为：Collapse：此模式下如果可能，表格单元将共享边框。Collapse在英文中有折叠的意思，由于单元共享边框，两个单元相邻的两条边框实际显示为一条，好像被折叠起来一样，故此得名。Separate：此模式下表格单元有各自的独立边框。Separate在英文中是分开的意思，很好理解。目前IE7、Firefox2、Safari、Opera这四个主流浏览器的默认边框模式都为Separate，即相邻单元格有各自的边框，但我们可以通过在标签的样式规则中做如下的修改来实现两种模式的互相转化：Border-collapse:collapse;,6.3.2设置边框的颜色、类型、粗细,通过CSS样式设置表格边框的颜色、类型和粗细非常简单，其中边框的类型和第三章介绍过的图片边框类型一致，可参看表。设置表格边框样式的具体方法就是在规则中插入如下的一行代码：Border:粗细宽度边框类型颜色在border:后面，每个属性设置之间用空格隔开即可，属性的先后顺序没有什么关系。,各种各样的边框类型,6.3.3表格边框的其他属性,上节中提到的样式设置对于单元格来说其上、下、左、右四个方向的边框均是同样的颜色，粗细和类型，其实我们也可以指定这四个边框使用不同的样式规则，类似左边红色边框而右边蓝色边框这样的特殊效果。要对边框分别设置，需要利用如下的属性：border-bottom/border-bottom-color/border-bottom-style/border-bottom-width：设置下边框的颜色、类型和粗细。border-left/border-left-color/border-left-style/border-left-width：设置左边框的颜色、类型和粗细。border-right/border-right-color/border-right-style/border-right-width：设置右边框的颜色、类型和粗细。border-top/border-top-color/border-top-style/border-top-width：设置上边框的颜色、类型和粗细。,6.3.4边框样式规则的冲突问题,单元格应用的边框样式可能与之前定义的CSS样式规则并不一致，这时就需要一个规则来处理冲突，以决定浏览器最终如何显示边框：如果border-style的值设置为hidden，则边框被隐藏，从而任何涉及到当前边框的样式都会不起作用。如果相邻单元格边框的粗细不同，那么粗的边框将覆盖细的边框。如果相邻单元格边框的粗细相同，最终会根据边框的类型优先级显示。边框类型的优先级从大到小依次是：双线double实线solid点划线dashed虚线dotted屋脊线ridge凸出线outset沟槽线groove凹入线inset。也就是说，排在前列的边框类型将被显示。,6.4表格的外边距,设置表格外边距与之前讲过的设置单元格内间距很相像。但需要注意的一点是，单元格无法设置单独的外边距，所有单元格之间的距离只能通过标签的cellspacing属性来进行。的样式规则实现了一个表格在Div标签内四个方向上有不同的外边距。这些以margin开头的属性同样适用于所有的块元素标签。,6.5表格家族的其他标签,表格家族由多个标签组成，目前我们已经学习了、标签，本节将介绍剩下的标签、标签、标签以及相关的标签。,6.5.1行标签,代表表格中的一行，它可以包含多个标签。在实际应用中，对标签进行属性设置的情况绝大部分都是修改它的背景颜色。通过这样的方法，可以一次性地改变一行的背景，比在单元格中修改要效率高。具体的实现方法有利用HTML属性和设置CSS样式规则两种，写法分别为：和,6.5.2表头标签,在每一张表格的最顶端，一般都有一行说明各列的数据代表何种意义，我们把这样的说明行叫做表头。表头有专门的标签。表头同样由行组成，行也是由单元格构成，不过特别的是这些单元格除了使用标准的标签之外，也可以使用标签。标签结合了和标题标签之后产生的新标签，其内部的字体默认粗体，居中显示，比较醒目，适合做为说明文字。利用可以省去我们自己定义标签样式的麻烦。表末尾标签所起的作用类似，就不多讲述了。与这两个标签还有一个特点，无论它们的代码放置在内什么位置，最终在浏览器中的显示结果，总是标签内容在表格的最顶端，而标签内容在表格的最底端。,6.5.3表内容标签,标签表示其内部是表格的主体内容。本章之前所举出的例子在代码中都没有明确写出，实际上，这是完全可以的，并不影响网页效果。那么，引入这个标签有很什么好处呢？好处有两点：标签的主要用途在于对大的表格进行分区，使浏览器在用户请求网页的时候能够将大表格分部分显示，不至于长时间浏览器窗口没有出现内容而影响浏览者的情绪。标签配合和标签使用，可以使当前表格结构更加清楚，易于网页制作者或者其他相关人员阅读代码。,6.5.4表格题目标签,表格一般都有一个题目，可以使用标签指定题目。应用了该标签的文字将变为居中显示。,6.6实验：设计并实现颜色交替的表格,在浏览网站的时候，经常能够看到一种每一行背景颜色就交替一次的表格，类似斑马身上条纹的效果，我们姑且称之为“斑马”表格吧。这种表格使得每行之间有所区分，便于阅读，显得比较专业。,网站上的斑马条纹表格,6.6.1简单的需求分析,针对前述三个要求，我们一一进行分析：斑马表格的特点是奇数行的背景是一个颜色，偶数行的背景是另外一个颜色。据此，我们想到了两种方法可以满足要求：逐行设置每一行的背景颜色，保证相邻的两行背景不同色。建立两个样式，分别包含两种背景颜色的样式规则，逐行交替应用这两个样式。看起来，第二个方法要简单一些，我们就采用这个方法。对于第二个要求，可以考虑用第四章介绍过的伪类，其中有一个名为hover，可以实现类似的功能。对于第三个要求，通过将边框设置为none应该不难做到。看来我们很快就找到了解决办法，下面就是代码的实现过程了。,6.6.2代码实现,首先，利用类选择器建立两个样式规则，设置不同的背景色，可以用如下的代码：.Bgcolor1Background-color:#eeeeee;.Bgcolor2Background-color:#cccccc;,6.6.3进一步思考,虽然我们很轻松地通过几个样式规则就实现了斑马表格，但还有一个问题值得进一步思考。在代码6-8的表格里只有两行数据，那么如果有成千上万条数据呢？我们如果一行一行地去应用样式，也是很繁琐的工作，还有没有更快的方法？答案自然是有的，因为新技术的目的之一就是为了让人们工作、生活得更方便。对代码6-8中的样式做如下改动，另存为table-zebra-02.html。去掉BgColor1和BgColor2样式规则。新建一个样式规则，如下所示：tbodytrBACKGROUND-COLOR:expression(this.sectionRowInd