<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>25-表格的結構</title>
</head>
<body>
<!--感謝南哥
1.由於表格中存儲的數據比較複雜, 爲了方便管理和閱讀以及提升語義, 我們可以對錶格中存儲的數據進行分類
表格中存儲的數據可以分爲4類
1.1表格的標題
1.2.表格的表頭信息
1.3.表格的主體信息
1.4.表格的頁尾信息
2.表格的完整結構
<table>
<caption>表格的標題</caption>
<thead>
<tr>
<th>每一列的標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>數據</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>數據</td>
</tr>
</tfoot>
</table>
caption作用: 指定表格的標題
thead作用: 指定表格的表頭信息
tbody作用: 指定表格的主體信息
tfoot作用: 指定表格的附加信息
3.注意點:
3.1.如果我們沒有編寫tbody, 系統會系統給我們添加tbody
3.2.如果指定了thead和tfoot, 那麼在修改整個表格的高度時, thead和tfoot有自己默認的高度, 不會隨着表格的高度變化而變化
-->
<table border="1px" width="500px" height="500px">
<caption>學生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>40</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2</td>
<td>30</td>
</tr>
</tfoot>
</table>
</body>
</html>
H5 表格的結構圖
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章