《HTML5+CSS3网页制作教程》课件_第6章.pptx

模块6创建表格;

6.1表格基本结构

;

;

tr/tr标签和td/td标签都要在表格的开始标签table和结束标签/table之间才有效。语法如下：

说明：tr，即“tablerow”(表格行)。

;

【例6-1】一个两行两列的表格。

;

上述代码在浏览器中的预览效果如图6-2所示，但是这个表格非常简单，不足以显示出表格的基本结构。

;

6.2表格中的其他标签

;

;

【例6-2】带标题的表格。

;

;

上述代码在浏览器中的预览效果如图6-3所示。

;

6.2.2?表头标签

表格的表头标签th是单元格标签td的一种变体，它的本质还是一种单元格。它一般位于第一行，用来表明这一行或列的内容类别。表头有一种默认样式：浏览器??以粗

体和居中的样式显示th/th标签中的内容。

th标签和td标签在本质上都是单元格，但是并不代表两者可以互换使用。这两者的根本区别在语义上。th，即“tableheader”(表头单元格)；而td，即“tabledata

cell”(单元格)。

;

;

【例6-3】带标题和表头的表格。

;

;

;

上述代码在浏览器中的预览效果如图6-4所示。

;

6.2.3?表格语义化标签

在前面，我们学习了如下标签：table标签(表格)、tr标签(行)、td标签(标准单元格)、caption标签(标题)和th标签(表头单元格)。

为了更深一层对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分：表头、表身、表脚。有了这三个标签，表格的HTML代码语义更加良好，结构更加清晰。;

;

;

完整表格结构应该包括表格标题(caption)、表头(thead)、表身(tbody)和表脚(tfoot)四部分。表格有了结构之后的一大好处是区别处理不同部分更简单了，尤其是在涉及CSS选择器的时候。

;

【例6-4】表格的语义化结构。

;

;

;

上述代码在浏览器中的预览效果如图6-5所示，且表脚往往都是用于统计数据的。

;

从图6-5中对于表格的显示效果来说，thead、tbody、tfoot这三个标签加与没加没有区别，但是加了之后会让代码更具有逻辑性。还有一点就是：我们不断地提及“语义化”这个词，这是因为HTML语义结构极其重要，特别是针对搜索引擎而言。thead、tbody、tfoot除了使得代码更有语义化，还有一个很重要的作用：方便分块控制表格的CSS样式。

;

6.3表格的常见属性

;

2.表格边框颜色

表格边框颜色在默认情况下是灰色的，可以使用bordercolor属性设置边框的颜色，其语法格式如下：

tableborder=边框宽度值bordercolor=颜色值

其中，边框宽度值大于0(否则无法显示边框的颜色)，颜色值为十六进制的颜色值或颜色的英文名称。

;

6.3.2?合并单元格

设计表格时，有时候需要将两个或更多的相邻单元格组合成一个单元格，类似Word表格中的“合并单元格”。在HTML中，这就需要用到“合并行”和“合并列”。合并行使用td标签的rowspan属性，而合并列则使用td标签的colspan属性。

1.合并行rowspan

rowspan属性的作用是指定单元格纵向跨越的行数，其语法格式如下：

tdrowspan=跨度的行数

;

【例6-5】一个简单的表格。

;

;

上述代码在浏览器中的预览效果如图6-6所示。

;

如果想让中间一列的一个单元格横跨三行，则应设置2号单元格的rowspan属性，格式为：tdrowspan=32/td。此外，扩展后的单元格应将所覆盖的单元格元素删除，此例中也就是删除5号和8号单元格，见例6-6。

;

【例6-6】合并行。

;

;

上述代码在浏览器中的预览效果如图6-7所示。

;

2.合并列colspan

在HTML中，表格的合并列是指将几个列进行合并，即横向合并单元格，通过colspan属性来完成，其语法格式如下：

tdcolspan=跨度的列数

如果我们要将例6-5中最后一行的一个单元格横跨所有三列，应该怎么设置呢？

显然我们应该设置7号单元格的colspan属性，格式为：tdcolspan=37/td，且删除8、9号单元格元素。;

6.4案例：制作简历

;

【练习目标】

(1)会使用三