# 表格標簽 表格（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`屬性的值。