17

格(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。

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

(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:默认值,表示由浏览器自行决定。

posted @ 2020-12-18 20:56  雷塔司  阅读(56)  评论(0)    收藏  举报