# 表格标签 表格（table）以行（row）和列（column）的形式展示数据。 ## 1.`<table>`，`<caption>` `<table>`是一个块级容器标签，所有表格内容都要放在这个标签里面。 ~~~ <table> ... ... </table> ~~~ `<caption>`总是`<table>`里面的第一个子元素，表示表格的标题。该元素是可选的。 ~~~ <table> <caption>示例表格</caption> </table> ~~~ ## 2.`<thead>`、`<tbody>`、`<tfoot>` `<thead>`、`<tbody>`、`<tfoot>`都是块级容器元素，且都是`<table>`的一级子元素，分别表示表头、表体和表尾。 ~~~ <table> <thead>... ...</thead> <tbody>... ...</tbody> <tfoot>... ...</tfoot> </table> ~~~ 这三个元素都是可选的。如果使用了`<thead>`，那么`<tbody>`和`<tfoot>`一定在`<thead>`的后面。如果使用了`<tbody>`，那么`<tfoot>`一定在`<tbody>`后面。 大型表格内部可以使用多个`<tbody>`，表示连续的多个部分。 ## 3.`<tr>` `<tr>`标签表示表格的一行（table row）。如果表格有`<thead>`、`<tbody>`、`<tfoot>`，那么`<tr>`就放在这些容器元素之中，否则直接放在`<table>`的下一级。 ~~~ <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table> ~~~ 上面代码表示表格共有3行。 ## 4.`<th>`，`<td>` `<th>`和`<td>`都用来定义表格的单元格。其中，`<th>`是标题单元格，`<td>`是数据单元格。 ~~~ <table> <tr> <th>学号</th><th>姓名</th> </tr> <tr> <td>001</td><td>张三</td> </tr> <tr> <td>002</td><td>李四</td> </tr> </table> ~~~ 上面代码中，表格一共有三行。第一行是标题行，所以使用`<th>`；第二行和第三行是数据行，所以使用`<td>`。 ### （1）`colspan`属性，`rowspan`属性 单元格会有跨越多行或多列的情况，这要通过`colspan`属性和`rowspan`属性设置，前者表示单元格跨越的栏数，后者表示单元格跨越的行数。它们的值都是一个非负整数，默认为1。 ~~~ <table> <tr> <td colspan="2">A</td><td>B</td> </tr> <tr> <td>A</td><td>B</td><td>C</td> </tr> </table> ~~~ 上面代码中，第一行的第一个单元格会跨两列。 ### （2）`headers`属性 如果表格很大，单元格很多，源码里面会看不清，哪个单元格对应哪个表头，这时就可以使用`headers`属性。 ~~~ <table> <tr> <th id="no">学号</th><th id="names">姓名</th> </tr> <tr> <td headers="no">001</td><td headers="names">张三</td> </tr> <tr> <td headers="no">002</td><td headers="names">李四</td> </tr> </table> ~~~ 上面代码中，标题栏的`<th>`设置了`id`属性，后面的`<td>`单元格的`headers`属性就对应这些`id`属性的值，因此就能看出来这些单元格对应哪个标题栏。 `headers`属性的值总是对应`<th>`标签的`id`属性的值。由于一个单元格可以对应多个标题栏（跨行的情况），所以`headers`属性可以是一个空格分隔的字符串，对应多个`id`属性的值。