`的下一级。
```html
```
上面代码表示表格共有3行。
## ``,` | `
` | `和` | `都用来定义表格的单元格。其中,` | `是标题单元格,` | `是数据单元格。
```html
```
上面代码中,表格一共有三行。第一行是标题行,所以使用` | `;第二行和第三行是数据行,所以使用` | `。
**(1)`colspan`属性,`rowspan`属性**
单元格会有跨越多行或多列的情况,这要通过`colspan`属性和`rowspan`属性设置,前者表示单元格跨越的栏数,后者表示单元格跨越的行数。它们的值都是一个非负整数,默认为1。
```html
```
上面代码中,第一行的第一个单元格会跨两列。
**(2)`headers`属性**
如果表格很大,单元格很多,源码里面会看不清,哪个单元格对应哪个表头,这时就可以使用`headers`属性。
```html
```
上面代码中,标题栏的` | `设置了`id`属性,后面的` | `单元格的`headers`属性就对应这些`id`属性的值,因此就能看出来这些单元格对应哪个标题栏。
`headers`属性的值总是对应` | `标签的`id`属性的值。由于一个单元格可以对应多个标题栏(跨行的情况),所以`headers`属性可以是一个空格分隔的字符串,对应多个`id`属性的值。
**(3)`scope`属性**
`scope`属性只有` | `标签支持,一般不在` | `标签使用,表示该` | `单元格到底是栏的标题,还是列的标题。
```html
姓名 |
学号 |
性别 |
张三 |
001 |
男 |
李四 |
002 |
男 |
```
上面代码中,第一行的标题栏都是列标题,所以` | `的`scope`属性为`col`,第二行和第三行的第一列是行标题,所以` | `标签的`scope`属性为`row`。
`scope`属性可以取下面这些值。
- `row`:该行的所有单元格,都与该标题单元格相关。
- `col`:该列的所有单元格,都与该标题单元格相关。
- `rowgroup`:多行组成的一个行组的所有单元格,都与该标题单元格相关,可以与`rowspan`属性配合使用。
- `colgroup`:多列组成的一个列组的所有单元格,都与该标题单元格相关,可以与`colspan`属性配合使用。
- `auto`:默认值,表示由浏览器自行决定。
下面是一个`colgroup`属性和`rowgroup`属性的例子。
```html
海报名称 |
颜色 |
尺寸 |
Zodiac |
Full color |
A2 |
A3 |
A4 |
Black and white |
A1 |
A2 |
A3 |
Sepia |
A3 |
A4 |
A5 |
```
上面的例子中,列标题“尺寸”的`scope`属性为`colgroup`,表示这个标题单元格对应多列(本例为3列);行标题的`scope`属性为`rowgroup`,表示这个标题单元格对应多行(本例为3行)。
渲染结果就是下面的样子。
海报名称 |
颜色 |
尺寸 |
Zodiac |
Full color |
A2 |
A3 |
A4 |
Black and white |
A1 |
A2 |
A3 |
Sepia |
A3 |
A4 |
A5 |
|