HTML5中的表格可以讓我們更方便地展示數(shù)據(jù),下面是一個(gè)完整的HTML5表格代碼:
<table> <caption>這是一個(gè)表格</caption> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>18</td> <td>男</td> </tr> <tr> <td>小紅</td> <td>20</td> <td>女</td> </tr> </tbody> <tfoot> <tr> <td>平均年齡</td> <td>19</td> <td></td> </tr> </tfoot> </table>
在以上代碼中,我們可以看到:
- HTML5表格由<table>標(biāo)簽開始,</table>標(biāo)簽結(jié)束;
- <caption>標(biāo)簽用來(lái)給表格加一個(gè)標(biāo)題;
- <thead>標(biāo)簽用來(lái)放表頭,<tr>標(biāo)簽指代表頭行;
- <th>標(biāo)簽用來(lái)定義表頭單元格;
- <tbody>標(biāo)簽用來(lái)放表格主體,<tr>標(biāo)簽則指代主體行;
- <td>標(biāo)簽用來(lái)定義單元格;
- <tfoot>標(biāo)簽用來(lái)放表格腳,<tr>標(biāo)簽指代腳行。
使用HTML5表格時(shí),我們還可以通過(guò)CSS樣式來(lái)美化表格,從而更好地展示數(shù)據(jù)。