第7章-网页设计 表格(2)

1、第7章 表格教学目标 1. 了解表格的概念。 2. 掌握表格标记。 3. 掌握表格修饰、行修饰、单元格修饰的方法。 4. 学会表格嵌套的方法。教学内容7.1 表格标记7.2 表格修饰7.3 设置行的属性7.4 设置单元格属性7.5 单线表格制作7.6 表格的嵌套7.7 表格布局教学重点和难点重点：表格标记、表格修饰、行属性、单元格属 性、表格嵌套。难点：表格修饰、行属性、单元格属性、表格嵌 套 。导入：举例说出网页中使用表格例子举例说出网页中使用表格例子 ? 表格在网站应用中非常广泛，几乎所有的HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中

2、定位，使浏览页面的人一目了然，赏心悦目。所以说要制作好网页，就要学好表格，熟练掌握和运用表格的各种属性。 虽然DIV+CSS布局有很多优越性，比如布局灵活、便于维护、代码清晰、对SEO（Search Engine Optimization，搜索引擎优化）很有帮助、加快网页解析速度等，但表格用于在网页上显示二维表格式数据是最佳方式，也可以用于对文本和图像进行布局，它简洁明了，高效快捷的将文字信息、图像等显示在页面上，用表格布局的优点是思路简单，对表格的行和列都可以加入结合CSS实现表格的美化。7.1.1 表格表格标记标记 在HTML语法中，表格主要通过3个标签来构成：、。 基本基本语法：语法：7

3、.1 表格标记语法说明：语法说明：（1）：标记代表表格的开始，标记代表表格的结束。（2）：标记代表行的开始，标记代表行的结束。（3）：标记之间是单元格的内容，可以是文字，也可以是其他标记，如一个按钮等。（4）在一个表格中，的个数代表表格的行数，每对之间的个数代表该行单元格数 7.1 表格标记7.1 表格标记7.1.2 表格标题表格标题 表格标题一般放在表格的上面，是对表格内容的简单说明，用标签实现。 标签必须紧随标签之后。 基本基本语法：语法： 语法语法说明：说明： ：标记之间就是标题的内容 7.1 表格标记7.1 表格标记7.1.3 表格表格表头表头 表头是指表格的第一行或第一列等对表格内容

4、的说明，文字样式为居中、加粗显示，通过标签实现。 基本基本语法：语法： 语法说明：语法说明：（1）：表头标记，包含在标记中。（2）在表格中，只要把标记改成就可以实现表格的表头 。7.1 表格标记7.1.3 表格表头表格表头7.1 表格标记7.1.4 划分表格结构划分表格结构 为了清楚区分表格结构，将一个表格分三个部分在网页上显示出来，HTML语言规定了、3个标签分别对应于表格的表首、表主体和表尾。 基本语法：基本语法：7.1 表格标记7.1.4 划分表格结构划分表格结构7.1 表格标记思考：表尾为什么可以放在前？ 表格是网页布局中的重要元素，它有丰富的属性，可以对其进行相关设置。常用的属性如表

5、7-1所示。 7.2 表格修饰 根据Web标准，所有样式都应该用CSS来呈现，所以在以下讲解的示例中除不能使用CSS实现的属性外，均改成了CSS样式，但建议还是需要了解以上数据中各属性的意义。7.3.1 7.3.1 设置表格的边框属性设置表格的边框属性 默认情况下表格边框为0，可以通过给表格添加border、bordercolor、bordercolorlight和bordercolordark的属性及属性值，实现为表格设置边框线以及美化表格的目的。7.2 表格修饰1.设置表格的边框属性设置表格的边框属性 基本语法：基本语法：语法说明：语法说明：Border属性用于设置边框的宽度，单位为像素；

6、定义边框颜色的时候可以使用颜色的英文单词或6位十六进制颜色值。7.2 表格修饰7.2 表格修饰7.2 表格修饰2.2.设置表格的宽度和高度设置表格的宽度和高度 在表格设计中，width属性用于设置表格的宽度，height属性用于设置表格的高度。 基本语法：基本语法： 语法说明：语法说明：（1）width和height的属性值可以是像素或百分比。（2）对于非嵌套表格，百分比表示的是表格应该占据的浏览器窗口的百分比；对于嵌套表格，百分比表示的是相对嵌套表格所在的单元格宽度。（3）用百分比设置大小的表格会随着浏览器窗口或嵌套表格所在的单元格的大小变化而调整，而用像素设置大小的表格式绝对大小。（4）默

7、认情况下，表格的宽度和高度会根据内容自动调整。7.2 表格修饰7.2 表格修饰3. 设置表格的背景颜色设置表格的背景颜色 表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。 基本语法：基本语法： 语法说明：语法说明：bgcolor属性的值可以是6位十六进制数或该颜色的英文单词 。7.2 表格修饰7.2 表格修饰4.设置表格的背景图像设置表格的背景图像 除添加背景颜色外，表格还可以通过background属性设置背景图像。表格背景图像可以是GIF、JPEG或PNG三种图像格式。 基本语法：基本语法： 语法说明：语法说明：属性值为背景图片文件的相对

8、路径或完整路径 7.2 表格修饰思考：当同时设置了背景颜色和背景图片时为什么看不到背景颜色？7.2 表格修饰5. 设置边框样式设置边框样式 在前面我们使用border属性时，每个单元格之间以及表格本身会出现边框，我们可以利用frame属性控制应该显示哪些表格边框，利用rules属性控制应该显示哪些内部边框。 基本语法：基本语法： 语法说明：语法说明：frame的常见属性设置如表7-2所示。Rules的常见属性如表7-3所示 。7.2 表格修饰7.2 表格修饰 由于在Web标准中都用CSS的border属性来实现表格边框样式，所以以上属性大家也只做了解即可。而且表格的边框样式与其他所有标签的边框

9、样式在CSS中设置的设置方法相同，所以下面以单元格的边框样式作为示例。7.2 表格修饰思考：的bordercolorlight和bordercolordark属性在CSS中如何实现？7.2 表格修饰6.设置表格单元格间距设置表格单元格间距 通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑，外观对应CSS中table元素的border-spacing属性。 基本语法：基本语法： 语法说明：语法说明：单元格的间距以像素为单位，默认值为2 7.2 表格修饰7.2 表格修饰7.设置表格单元格边距（填充）设置表格单元格边距（填充） 单元格边距是指单元格中

10、的内容与单元格边框的距离，外观对应CSS中td元素的padding（填充）属性。 基本语法：基本语法： 语法说明：语法说明：单元格的边距以像素为单位。与其它元素的填充（padding）属性使用方法相同，所以这里不给出示例。 7.2 表格修饰8.设置表格的水平对齐属性设置表格的水平对齐属性 在水平方向上，可以设置表格的对齐方式为：居左、居中、 居右。如果没特别进行设置，则默认为居左排列。 基本语法：基本语法： 语法说明：语法说明：align的值可以分别为left、center、right，根据设定，表格出现在窗口的居左、居中和居右位置。 在CSS中要实现表格居中，与其它布局DIV的居中方法相同，

11、即使用“tablemargin: 0px auto;”。7.2 表格修饰7.3 设置行的属性 表格行标记表格行标记的属性用于设定表格中某一行的属性，的属性用于设定表格中某一行的属性，其常见属性设置如表其常见属性设置如表7-47-4所示所示 。7.3 设置行的属性1. 行内容水平对齐行内容水平对齐基本语法：基本语法：语法说明：语法说明：align的值可以分别为left、center、right，它的默认值是left。7.3 设置行的属性7.3 设置行的属性2. 行内容垂直对齐行内容垂直对齐基本语法：基本语法：语法说明：语法说明：valign的值可以分别为居上（top）、居中（middle）和居下

12、（bottom），它的默认值是居中。7.3 设置行的属性7.4 设置单元格属性 表格列标记表格列标记的属性用于设定表格中某一单元格的属的属性用于设定表格中某一单元格的属性，常见属性设置如表性，常见属性设置如表7-57-5所示。关于单元格的对齐属性和所示。关于单元格的对齐属性和背景设置等和表格及行的相应属性设置类似，此处不再讲背景设置等和表格及行的相应属性设置类似，此处不再讲述述 。7.4 设置单元格属性1. 设置单元格跨行设置单元格跨行 单元格的rowspan属性可实现单元格的跨行合并（纵向合并）。 基本语法：基本语法： 语法说明：语法说明：rowspan的值为单元格跨越的行数。如果创建跨越两

13、行的单元格（即rowspan=2），那么在下一行中就不用定义相应的单元格，如果创建跨越三行的单元格（即rowspan=3），那么在下两行中就不用定义相应的单元格，以此类推。 7.4 设置单元格属性7.4 设置单元格属性2.设置单元格跨列设置单元格跨列 colspan属性可以进行单元格的跨列合并（横向合并）。 基本语法：基本语法： 语法说明：语法说明：colspan的值为所跨单元格的列数。若在一行中创建跨越两列的单元格（即colspan=“2”），那么在该行中就应该少定义一个单元格，若在一行中创建跨越三列的单元格（即colspan=“3”），那么在该行中就少定义两个单元格，以此类推 。7.4 设

14、置单元格属性7.5 单线表格的制作 表格和单元格都加上边框线后，我们发现所有的边框都表格和单元格都加上边框线后，我们发现所有的边框都是双线，而在是双线，而在WordWord等其它软件中一般都是用单线，在等其它软件中一般都是用单线，在CSSCSS中中可以使用可以使用tabletable的的border-collapseborder-collapse属性实现属性实现。7.5 单线表格的制作 7.6 表格的嵌套 表格嵌套就是根据插入元素的需要，在一个表格的某个表格嵌套就是根据插入元素的需要，在一个表格的某个单元格里再插入一个若干行和列的表格。对嵌套表格，可以单元格里再插入一个若干行和列的表格。对嵌套

15、表格，可以像对任何其他表格一样进行格式设置，但是其宽度受它所在像对任何其他表格一样进行格式设置，但是其宽度受它所在单元格的宽度的限制。利用表格的嵌套，一方面可以编辑出单元格的宽度的限制。利用表格的嵌套，一方面可以编辑出复杂而精美的效果，另一方面可根据布局需要来实现精确的复杂而精美的效果，另一方面可根据布局需要来实现精确的编排。不过，需要注意的是，嵌套层次越多，网页的载入速编排。不过，需要注意的是，嵌套层次越多，网页的载入速度就会越慢度就会越慢 。7.6 表格的嵌套 7.7 表格布局 7.7 表格布局 小结 本章主要介绍了表格制作时用到的常用属性以及取值情况，需注意两点： 1） 在创建复杂的表格之前，最好对它进行规划，比如可以先用笔在纸上设计页面。 2） 使用表格排版网页时，要尽量细化表格，不要把整个网页放在一个大的表格里，因为表格内有一些载入较慢的元素（比如计数器）时，往往会延迟整个表格的显示。这是由IE的显示特性决定的，只有当表格内所有元素全部