表格

本文介绍HTML表格的创建、表格样式的设置，以及合并单元格的实现。

创建HTML表格

页面中创建表格相关的HTML元素包括：

table，定义表结构。
caption，定义表的标题。
tr，定义一行。
th，在行（tr元素）中定义一个列标题（列名）单元格。
td，在行（tr元素）中定义一个数据单元格。
colgroup，定义列组，其中使用col元素定义一组列，便于应用样式等操作。
col，在colgroup元素中定义列。
tbody，表格的主体部分。
thead，定义标题行组。在数据行上方，可以显示汇总数据行。
tfoot，定义脚注行组。在数据行下方，可以显示汇总数据行。

table元素定义表格区域，其中，<table>标记常用的属性包括：

border，设置表格和单元格的边框尺寸，可直接使用数值，单位为像素。
cellspacing，设置单元格之间的距离，直接使用数值，单位为像素。
cellpadding，设置单元格的内缩进距离，直接使用数值，单位为像素。

下面的代码，首先来看表格的默认显示样式：

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table border="1" cellspacing="0">
        <tr><th>姓名</th><th>性别</th><th>语文</th><th>数学</th><th>英语</th></tr>
        <tr><td>张三</td><td>女</td><td>79</td><td>78</td><td>91</td></tr>
        <tr><td>刘一兵</td><td>男</td><td>85</td><td>81</td><td>72</td></tr>
        <tr><td>李四</td><td>女</td><td>95</td><td>91</td><td>85</td></tr>
        <tr><td>王二</td><td>男</td><td>85</td><td>61</td><td>75</td></tr>
        <tr><td>刘鑫</td><td>男</td><td>65</td><td>59</td><td>66</td></tr>
    </table>
</body>
</html>

代码中，使用table元素定义表结构、tr元素定义行、th元素定义列标题单元格、td元素定义数据单元格，页面显示效果如下图所示。

表格默认样式

显示边框时可以在<table>标记中将border属性设置为1，效果如下图所示。

表格显示边框

如果单元格之间不需要间隔，可以将<table>标记中的cellspacing属性设置为0，显示效果如下图所示。

合并单元格边框

表格常用样式

使用CSS样式时，border-collapse属性可以设置单元格之间是否保留距离，其属性值包括：

separate，默认值，单元格之间有一定的距离。
collapse，合并单元格边框。与<table>标记中的cellspacing属性设置为0时的效果相同。

empty-cells属性设置空白单元格是否显示，默认为show（显示），不显示是使用hide属性值。下图中显示了单元格边框合并时的对比效果，如果单元格之间有距离，则效果会更加明显。

空白单元格显示与隐藏

此外，text-align属性可以设置单元格内容的水平对齐方式，如left（左对齐，默认值）、center（水平居中）、right（右对齐）。vertical-align属性可以设置单元格内容的垂直对齐方式，如top（顶部对齐）、middle（垂直居中，默认值）、bottom（底部对齐）。

示例表格中，前两列为人员信息，后三列为分数，需要分别设置样式时，可以结合colgropup和col元素完成，如下面的代码。

HTML

<table border="1" cellspacing="0">
    <colgroup style="background:lightsteelblue;">
        <col />
        <col />
    </colgroup>
    <colgroup style="background-color:#ddd;">
        <col />
        <col />
        <col />
    </colgroup>
    <tr><th>姓名</th><th>性别</th><th>语文</th><th>数学</th><th>英语</th></tr>
    <tr><td>张三</td><td>女</td><td>79</td><td>78</td><td>91</td></tr>
    <tr><td>刘一兵</td><td>男</td><td>85</td><td>81</td><td>72</td></tr>
    <tr><td>李四</td><td>女</td><td>95</td><td>91</td><td>85</td></tr>
    <tr><td>王二</td><td>男</td><td>85</td><td>61</td><td>75</td></tr>
    <tr><td>刘鑫</td><td>男</td><td>65</td><td>59</td><td>66</td></tr>
</table>

代码中，第一个colgroup元素定义了两个col元素，表示前两列；第二个colgroup元素定义了三个col元素，表示3到5列；然后，直接在<colgroup>标记中使用style属性设置了样式属性，如果需要重复使用样式，也可以通过style元素或样式表文件进行设置，此时可以通过各种CSS选择器分别设置colgroup元素的样式。页面显示效果如下图所示。

使用colgroup和col元素设置列的样式

下面的代码会综合演示表格的样式设置。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        table{
            empty-cells:hide;
            border-collapse:collapse;
        }
        table .info_cols {
            background-color:lightsteelblue;
        }
        table .score_cols{
            background-color:#ddd;
        }
        th {
            background:#bbb;
        }
        th, td {
            padding: 0.5em 1.5em;
            text-align: center;
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
<table>
    <colgroup class="info_cols">
        <col />
        <col />
    </colgroup>
    <colgroup class="score_cols">
        <col />
        <col />
        <col />
    </colgroup>
    <tr><th>姓名</th><th>性别</th><th>语文</th><th>数学</th><th>英语</th></tr>
    <tr><td>张三</td><td>女</td><td>79</td><td>78</td><td>91</td></tr>
    <tr><td>刘一兵</td><td>男</td><td>85</td><td>81</td><td>72</td></tr>
    <tr><td>李四</td><td>女</td><td>95</td><td>91</td><td>85</td></tr>
    <tr><td>王二</td><td>男</td><td>85</td><td>61</td><td>75</td></tr>
    <tr><td>刘鑫</td><td>男</td><td>65</td><td>59</td><td>66</td></tr>
</table>
</body>
</html>

请注意style元素中样式设置的顺序，其中，设置colgroup元素样式时，也会设置第一行th单元格的样式，而接下来单独设置了th的背景颜色（background-color），当多次设置元素的同一样式属性时，会应用最后一次设置的效果；最后一个样式使用逗号分隔同时定义了th和td元素的样式；页面显示效果如下图所示。

综合应用表格样式

合并单元格

合并单元格的功能可以通过<td>标记的属性设置完成，包括：

colspan属性，设置单元格占用的列。
rowspan属性，设置单元格占用的行。

下面的代码演示了这两个属性的应用。

HTML

<table border="1" cellspacing="0">
    <tr><td colspan="3" rowspan="1">a1</td><td>d1</td><td>e1</td></tr>
    <tr><td>a2</td><td>b2</td><td>c2</td><td>d2</td><td>e2</td></tr>
    <tr><td>a3</td><td>b3</td><td>c4</td><td>d3</td><td>e3</td></tr>
</table>

代码中定义第一行第一个单元格占用了3列1行，页面显示效果如下图所示。

合并单元格

需要更复杂的显示效果，如指标的主、子结构时，还可以单独设置单元格的边框，如下面的代码。

HTML

<table border="1" cellspacing="0">
<tr><td colspan="3" rowspan="1" style="text-align:center;border-bottom:none;">a1</td>
<td>d1</td><td>e1</td></tr>
<tr><td style="border-top:none;"></td>
<td>b2</td><td>c2</td><td>d2</td><td>e2</td></tr>
<tr><td>a3</td><td>b3</td><td>c4</td><td>d3</td><td>e3</td></tr>
</table>

本例，第一行第一个单元格的下边框设置为没有（none），第二行第一个单元格的上边框设置为没有（none）；显示效果如下图所示。

设置单元格边框

如图中所示，其中的b2和c2单元格内容从结构上显示为a1的子项。