# 表格標簽 表格（table）以行（row）和列（column）的形式展示數據。 ## `<table>`，`<caption>` `<table>`是一個塊級容器標簽，所有表格內容都要放在這個標簽里面。 ```html <table> ... ... </table> ``` `<caption>`總是`<table>`里面的第一個子元素，表示表格的標題。該元素是可選的。 ```html <table> <caption>示例表格</caption> </table> ``` ## `<thead>`、`<tbody>`、`<tfoot>` `<thead>`、`<tbody>`、`<tfoot>`都是塊級容器元素，且都是`<table>`的一級子元素，分別表示表頭、表體和表尾。 ```html <table> <thead>... ...</thead> <tbody>... ...</tbody> <tfoot>... ...</tfoot> </table> ``` 這三個元素都是可選的。如果使用了`<thead>`，那么`<tbody>`和`<tfoot>`一定在`<thead>`的后面。如果使用了`<tbody>`，那么`<tfoot>`一定在`<tbody>`后面。 大型表格內部可以使用多個`<tbody>`，表示連續的多個部分。 ## `<colgroup>`，`<col>` `<colgroup>`是`<table>`的一級子元素，用來包含一組列的定義。`<col>`是`<colgroup>`的子元素，用來定義表格的一列。 ```html <table> <colgroup> <col> <col> <col> </colgroup> </table> ``` 上面代碼表明表格有3列。 `<col>`不僅是一個單獨使用的標簽，沒有結束標志，而且還是一個空元素，沒有子元素。它的主要作用，除了申明表格結構，還可以為表格附加樣式。 ```html <table> <colgroup> <col class="c1"> <col class="c2"> <col class="c3"> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> ``` 上面代碼中，`<colgroup>`聲明表格有三列，每一列有自己的 class，可以使用 CSS 針對每個 class 設定樣式，會對整個表格生效。 `<col>`有一個`span`屬性，值為正整數，默認為`1`。如果大于1，就表示該列的寬度包含連續的多列。 ```html <table> <colgroup> <col> <col span="2"> <col> </colgroup> </table> ``` 上面代碼中，表格的表頭定義了3列，實際數據有4列。表頭的第2列會連續跨2列。 ## `<tr>` `<tr>`標簽表示表格的一行（table row）。如果表格有`<thead>`、`<tbody>`、`<tfoot>`，那么`<tr>`就放在這些容器元素之中，否則直接放在`<table>`的下一級。 ```html <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table> ``` 上面代碼表示表格共有3行。 ## `<th>`，`<td>` `<th>`和`<td>`都用來定義表格的單元格。其中，`<th>`是標題單元格，`<td>`是數據單元格。 ```html <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。 ```html <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`屬性。 ```html <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`屬性的值。 **（3）`scope`屬性** `scope`屬性只有`<th>`標簽支持，一般不在`<td>`標簽使用，表示該`<th>`單元格到底是欄的標題，還是列的標題。 ```html <table> <tr> <th scope="col">姓名</th> <th scope="col">學號</th> <th scope="col">性別</th> </tr> <tr> <th scope="row">張三</th> <td>001</td> <td>男</td> </tr> <tr> <th scope="row">李四</th> <td>002</td> <td>男</td> </tr> </table> ``` 上面代碼中，第一行的標題欄都是列標題，所以`<th>`的`scope`屬性為`col`，第二行和第三行的第一列是行標題，所以`<th>`標簽的`scope`屬性為`row`。 `scope`屬性可以取下面這些值。 - `row`：該行的所有單元格，都與該標題單元格相關。 - `col`：該列的所有單元格，都與該標題單元格相關。 - `rowgroup`：多行組成的一個行組的所有單元格，都與該標題單元格相關，可以與`rowspan`屬性配合使用。 - `colgroup`：多列組成的一個列組的所有單元格，都與該標題單元格相關，可以與`colspan`屬性配合使用。 - `auto`：默認值，表示由瀏覽器自行決定。 下面是一個`colgroup`屬性和`rowgroup`屬性的例子。 ```html <table> <thead> <tr> <th scope="col">海報名稱</th> <th scope="col">顏色</th> <th colspan="3" scope="colgroup">尺寸</th> </tr> </thead> <tbody> <tr> <th rowspan="3" scope="rowgroup">Zodiac</th> <th scope="row">Full color</th> <td>A2</td> <td>A3</td> <td>A4</td> </tr> <tr> <th scope="row">Black and white</th> <td>A1</td> <td>A2</td> <td>A3</td> </tr> <tr> <th scope="row">Sepia</th> <td>A3</td> <td>A4</td> <td>A5</td> </tr> </tbody> </table> ``` 上面的例子中，列標題“尺寸”的`scope`屬性為`colgroup`，表示這個標題單元格對應多列（本例為3列）；行標題的`scope`屬性為`rowgroup`，表示這個標題單元格對應多行（本例為2行）。