html中加个表格,【HTML 教程】表格标签

作者 | 阮一峰

表格(table)以行(row)和列(column)的形式展示数据。

1、

总是

2、、

、

、

、都是块级容器元素，且都是

这三个元素都是可选的。如果使用了，那么

和一定在的后面。如果使用了，那么一定在后面。

大型表格内部可以使用多个

，表示连续的多个部分。

3、

，是

上面代码表明表格有3列。

不仅是一个单独使用的标签，没有结束标志，而且还是一个空元素，没有子元素。它的主要作用，除了申明表格结构，还可以为表格附加样式。

1

2

3

上面代码中，

声明表格有三列，每一列有自己的 class，可以使用 CSS 针对每个 class 设定样式，会对整个表格生效。有一个span属性，值为正整数，默认为1。如果大于1，就表示该列的宽度包含连续的多列。

上面代码中，表格的表头定义了3列，实际数据有4列。表头的第2列会连续跨2列。

4、

标签表示表格的一行(table row)。如果表格有、、，那么就放在这些容器元素之中，否则直接放在

上面代码表示表格共有3行。

5、

，和都用来定义表格的单元格。其中，是标题单元格，是数据单元格。

学号	姓名
001	张三
002	李四

上面代码中，表格一共有三行。第一行是标题行，所以使用

；第二行和第三行是数据行，所以使用。

(1)colspan属性，rowspan属性

单元格会有跨越多行或多列的情况，这要通过colspan属性和rowspan属性设置，前者表示单元格跨越的栏数，后者表示单元格跨越的行数。它们的值都是一个非负整数，默认为1。

A		B
A	B	C

上面代码中，第一行的第一个单元格会跨两列。

(2)headers属性

如果表格很大，单元格很多，源码里面会看不清，哪个单元格对应哪个表头，这时就可以使用headers属性。

学号	姓名
001	张三
002	李四

上面代码中，标题栏的

设置了id属性，后面的单元格的headers属性就对应这些id属性的值，因此就能看出来这些单元格对应哪个标题栏。

headers属性的值总是对应

标签的id属性的值。由于一个单元格可以对应多个标题栏(跨行的情况)，所以headers属性可以是一个空格分隔的字符串，对应多个id属性的值。

(3)scope属性

scope属性只有

标签支持，一般不在标签使用，表示该单元格到底是栏的标题，还是列的标题。

姓名	学号	性别
张三	001	男
李四	002	男

上面代码中，第一行的标题栏都是列标题，所以

的scope属性为col，第二行和第三行的第一列是行标题，所以标签的scope属性为row。

scope属性可以取下面这些值。row：该行的所有单元格，都与该标题单元格相关。

col：该列的所有单元格，都与该标题单元格相关。

rowgroup：多行组成的一个行组的所有单元格，都与该标题单元格相关，可以与rowspan属性配合使用。

colgroup：多列组成的一个列组的所有单元格，都与该标题单元格相关，可以与colspan属性配合使用。

auto：默认值，表示由浏览器自行决定。

下面是一个colgroup属性和rowgroup属性的例子。

海报名称	颜色	尺寸
Zodiac	Full color	A2	A3	A4
	Black and white	A1	A2	A3
	Sepia	A3	A4	A5

上面的例子中，列标题“尺寸”的scope属性为colgroup，表示这个标题单元格对应多列(本例为3列)；行标题的scope属性为rowgroup，表示这个标题单元格对应多行(本例为2行)。本文完~