6-2 表格框线的border属性

在HTML4.01时代，当不指定border的值时所呈现的表格是没有框线的，HTML程序设计师就利用这个特性进行网页排版。6-1节程序实例的表格不含框线，其实只要将border属性设为1，同时放在<table>元素内就可以为表格建立框线，使用方法如下：

另外，border也可以取任一数值，这个数值所指的是外框线的宽度。不过，HTML5语意上不用此方法设计外框线宽度，而是使用CSS3。

程序实例ch6_2.html：增加表格的框线，重新设计ch6_1.html。

执行结果

6-3 建立表头<thead>和<th>元素

HTML使用<thead>元素建立表头（也可称为表格的标题行），在表头内则使用<th>定义表头的单元格，这两个元素配合<table>使用格式如下：

在默认环境下，表头内的数据将以粗体显示，同时在单元格内居中对齐。

程序实例ch6_3.html：为表格建立表头，重新设计ch6_2.html。

执行结果

6-4 建立表格本体<tbody>元素

上一节的程序虽然已很清楚地表达了表格的设计逻辑，但是当我们在表格中增加了<thead>元素定义表头时，习惯也会使用<tbody>定义表格的本体，这样整个程序设计起来会更明确。此时整个表格设计的格式如下：

程序实例ch6_4.html：使用<tbody>定义表格的本体，使程序更清楚明确。

执行结果

6-5 建立表尾<tfoot>元素

在建立表格时，有时候需要使用表尾<tfoot>元素做一份整体表格的注记。将表尾应用在表格设计时，使用的格式如下：

程序实例ch6_5.html：以增加表尾方式建立表格。

执行结果

6-6 合并横向单元格colspan属性

在上一节的实例中，我们在表尾中只设计了一个单元格，其实这不是好的设计，整体不一致，同时感觉怪怪的。通常我们在设计这类表格时，可以使用colspan属性，直接将整行单元格合并，再将单元格原先内容写入此合并的单元格内。如果将colspan属性放在定义表格本体的单元格<td>元素时，此时使用如下格式：

    <tr><td colspan="n"> … </td></tr>

上述n代表合并单元格的个数。

程序实例ch6_6.html：以合并单元格方式重新设计ch6_5.html。

执行结果

上述第18行设定将3个单元格合并，然后在合并后的单元格输入“制表2017年5月30日”。

合并单元格的功能也可以应用在表格的表头，如果将colspan属性放在定义表格表头的单元格<th>元素时，此时使用如下格式：

    <tr><th colspan="n"> … </th></tr>

另外，在表头的单元格内放置colspan属性时，所输入的内容将自动居中对齐。

程序实例ch6_7.html：扩充ch6_6.html，以合并单元格的观念应用在表格表头，同时在此输入“联合国水资源中心”。

执行结果

上述第10行是设定将3个单元格合并，然后在合并后的单元格中输入“联合国水资源中心”。