本文介绍了HTML表格的基本结构，包括`<table>`、`<tr>`, `<th>`和`<td>`标签的使用，以及colspan和headers属性的实战应用。重点讲解了如何创建复杂表格，同时涵盖了表格标题、数据单元格的合并和表头关联。适合理解表格在网页布局中的关键作用和技术开发者提升数据呈现能力。
# 表格标签
表格(table)以行(row)和列(column)的形式展示数据。
## 1.`
`
~~~
... ...
~~~
`
`总是`~~~
~~~
## 2.``、`
`、````、`
`、``都是块级容器元素，且都是`~~~
... ...
... ...... ...~~~
这三个元素都是可选的。如果使用了``，那么`
`和``一定在``的后面。如果使用了``，那么``一定在``后面。大型表格内部可以使用多个`
`，表示连续的多个部分。## 3.`
``
`标签表示表格的一行(table row)。如果表格有``、``、``，那么``就放在这些容器元素之中，否则直接放在`~~~
~~~
上面代码表示表格共有3行。
## 4.`
`，```
`和``都用来定义表格的单元格。其中，``是标题单元格，``是数据单元格。~~~
| 学号 | 姓名 |
|---|---|
| 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`属性的值。
扫一扫
1542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
