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

模块6创建表格6.1表格基本结构6.2表格中的其他标签6.3表格的常见属性6.4案例：制作简历思考与练习题

6.1表格基本结构

表格的主要用途是以网格的形式显示二维数据。表格在前端开发中用得很多，因为使用表格可以更清晰地排列数据。例如菜鸟教程网中就大量使用了表格，如图6-1所示。

图6-1菜鸟教程网中的表格数据

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

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

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

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

图6-2页面运行效果

6.2表格中的其他标签

6.2.1 表格标题标签表格一般都有一个标题，表格的标题使用<caption>标签。默认情况下，表格的标题位于整个表格上方，且一个表格只能含有一个表格标题。

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

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

图6-3页面运行效果

6.2.2 表头标签

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

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

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

cell”(单元格)。

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

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

图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页面运行效果

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

6.3表格的常见属性

6.3.1 表格边框1.表格边框宽度table元素定义了border属性。border属性规定表格边框的粗细，其语法格式如下：<tableborder="">border属性的值必须设置为数字(单位：像素)或者空字符串("")。使用border属性就是告诉浏览器：这个表格是用来表示表格式数据而不是用来布置其他元素的。

2.表格边框颜色

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

<tableborder="边框宽度值"bordercolor="颜色值">

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

6.3.2 合并单元格

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

1.合并行rowspan

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

<tdrowspan="跨度的行数">

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

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

图6-6页面预览效果

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

【例6-6】合并行。

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

图6-7页面预览结果

2.合并列colspan

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

<tdcolspan="跨度的列数">

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

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

6.4案例：制作简历

【案例描述】个人简历是一种常见的表格，下面我们来做一个结合了表格常见属性的个人简历网页。【考核知识点】(1)元素：table、tr、td、caption。(2)属性：background、colspan、rowspan。

【练习目标】

(1)会使用三个核心元素table、tr和td生成基本的表格。

(2)会使用caption元素为表格添加标题。

(3)会使用table的background属性添加背景图片。

(4)会使用colspan、rowspan属性进行单元格合并。

【案例源代码】

【运行结果】

源代码在网页中的运行结果如图6-8所示。图6-8页面运行效果

【案例分析】

本网页设置了<caption></caption>标题，通过单元格合并将个人信息有序地展示了出来，设置了单元格间距以及单元格内容与单元格边框之间的距离，并为整个表格设置了背

景图像。

思考与练习题

一、选择题1.创建表格的标签是()。A.<h2></h2>

B.<a></a>C.<table></table>

D.<b></b>2.表格中创建一行需要用到的标签是()。A.<hr>

B.<ht></ht>C.<thead></thead>

D.<tr></tr>

3.在表格中创建一个单元格的标签是()。

A.<td>…</td>

B.<thead>…</thead>

C.<tbody>…</tbody>

D.<P>…</P>

4.在表格中设置表格标题的标签是()。

A.<h3>…</h3>

B.<thead>…</thead>

C.<tbody>…</tbody>

D.<caption>…</caption>

二、填空题

1.要给表格添加表格线，可以在<table>标签中设置

属性，但是该属性只改变表格的

边框。

2.表格的背景颜色和背景图片分别需要在对应的标签中设置

和

属性。

3.如果表格需要合并横向单元