表格
table tr td 元素是表格必需的三个元素。
table 元素定义表格，tr 元素定义表格行，td 元素定义表格中的单元格，th 元素定义表头。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44<body>
<table>
<tr>
<th></th>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>five</th>
</tr>
<tr>
<th>阿拉伯数字</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<th>罗马数字</th>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
<td>V</td>
</tr>
<tr>
<th>中文数字</th>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<th>中文数字</th>
<td>壹</td>
<td>贰</td>
<td>叁</td>
<td>肆</td>
<td>伍</td>
</tr>
</table>
</body>
表体行、表头行、表脚行
tbody 元素表示表格主体的全部行，thead 元素表示表头行，tfoot 元素表示表脚行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58<body>
<table>
<thead>
<tr>
<th></th>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>five</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>five</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>阿拉伯数字</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<th>罗马数字</th>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
<td>V</td>
</tr>
<tr>
<th>中文数字</th>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<th>中文数字</th>
<td>壹</td>
<td>贰</td>
<td>叁</td>
<td>肆</td>
<td>伍</td>
</tr>
</tbody>
</table>
</body>
表格标题
caption 元素定义一个与表格关联的标题。一个表格只能包含一个 caption 元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59<body>
<table>
<caption style="text-align:center;">数字的表达方式</caption>
<thead>
<tr>
<th></th>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>five</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>five</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>阿拉伯数字</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<th>罗马数字</th>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
<td>V</td>
</tr>
<tr>
<th>中文数字</th>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<th>中文数字</th>
<td>壹</td>
<td>贰</td>
<td>叁</td>
<td>肆</td>
<td>伍</td>
</tr>
</tbody>
</table>
</body>
表格边框
table 元素的 border 属性可以为表格设置边框。其值必须设置为 1 或者空字符串（””）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59<body>
<table border="">
<caption style="text-align:center;">数字的表达方式</caption>
<thead>
<tr>
<th></th>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>five</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>five</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>阿拉伯数字</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<th>罗马数字</th>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
<td>V</td>
</tr>
<tr>
<th>中文数字</th>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<th>中文数字</th>
<td>壹</td>
<td>贰</td>
<td>叁</td>
<td>肆</td>
<td>伍</td>
</tr>
</tbody>
</table>
</body>
跨行、跨列
td 元素与 th 元素的rowspan 属性设置一个单元格纵跨多行。其值为所跨行数。
td 元素与 th 元素的colspan 属性设置一个单元格横跨多列。其值为所跨列数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52<body>
<table border="">
<caption style="text-align:center;">数字的表达方式</caption>
<thead>
<tr>
<th></th>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>five</th>
</tr>
</thead>
<tfoot>
<th colspan="6">阿拉伯数字最初由古印度人发明。</th>
</tfoot>
<tbody>
<tr>
<th>阿拉伯数字</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<th>罗马数字</th>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
<td>V</td>
</tr>
<tr>
<th rowspan="2">中文数字</th>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<td>壹</td>
<td>贰</td>
<td>叁</td>
<td>肆</td>
<td>伍</td>
</tr>
</tbody>
</table>
</body>
列组
colgroup 元素与 col 元素可以为表格的列分组。其 span 属性规定横跨的列数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58<body>
<table border="">
<caption style="text-align:center;">数字的表达方式</caption>
<colgroup class="cg1" span="1">
<colgroup>
<col class="cg2_col1" span="2">
<col class="cg2_col2">
<col class="cg2_col3" span="2">
</colgroup>
<thead>
<tr>
<th></th>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>five</th>
</tr>
</thead>
<tfoot>
<th colspan="6">阿拉伯数字最初由古印度人发明。</th>
</tfoot>
<tbody>
<tr>
<th>阿拉伯数字</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<th>罗马数字</th>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
<td>V</td>
</tr>
<tr>
<th rowspan="2">中文数字</th>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<td>壹</td>
<td>贰</td>
<td>叁</td>
<td>肆</td>
<td>伍</td>
</tr>
</tbody>
</table>
</body>
表格布局
table-layout 属性指定表格布局。可取的值：
- auto：自动布局（默认）。根据每列中最宽的单元格设置整列宽度。
- fix：禁用自动布局。单元格宽度由每列的 width 值决定，如没有 width 值则会设置等距离列宽。
表格的其他属性
- border-collapse 属性设置单元格边框的样式。可取的值有：collapse（单边框）、separate（双边框，默认 ）。
1
table {border-collapse: collapse;}
- border-spacing 属性设置双边框时边框间距。其值为1~2个长度。
1
table {border-collapse: separate;border-spacing: 5px;}
- caption-side 属性设置表格标题位置。可取的值有：top（上，默认）、bottom（下）。
- empty-cells 属性设置空单元格是否显示边框。可取的值有：hide（不显示）、show（显示，默认）。
1
table {caption-side: bottom;empty-cells: hide;}