Html頁面表格結構化標記該如何使用
發表時間:2024-05-06 來源:明輝站整理相關軟件相關文章人氣:
[摘要]這次給大家帶來Html網頁表格結構化標記該如何使用,Html網頁表格結構化標記使用的注意事項有哪些,下面就是實戰案例,一起來看一下。Html表格的結構化所謂的結構化,就是把我們的表格劃分為三種:表頭、表體、表尾。從而當我們在修改表體部分的時候,不會影響到其它兩部分,從而解除了耦合,方便我們的應用。...
這次給大家帶來Html網頁表格結構化標記該如何使用,Html網頁表格結構化標記使用的
注意事項有哪些,下面就是實戰案例,一起來看一下。
Html表格的結構化
所謂的結構化,就是把我們的表格劃分為三種:表頭、表體、表尾。從而當我們在修改表體部分的時候,不會影響到其它兩部分,從而解除了耦合,方便我們的應用。
結構化格式
<table>
<thead>…</thead> --------表頭區
<tbody>…</tbody>---------表體區
<tfoot>…</tfoot>------------表尾區
</table>
總結:通過把表格劃分為三部分,方便了我們對表格的編輯操作。
Html表格的標題
每個表格都有自己的標題,正如上述第二幅圖片所示,那么又如何做到讓標題隨著內容來移動呢?
表格的標題
<table>
<caption>…</caption>
</table>
<caption>下的屬性值有:
屬性名稱
屬性值
說明
align
Top
標題在表格上方
Bottom
標題在表格下方
小結:通過設置表格的標題,能夠隨時讓標題跟著表格動。
Html直列化格式
什么是表格的直列化格式呢?我們平常在Excel中所見到的給整列加背景顏色,說的就是這么一回事。
<html>
<head>
<li>表格嵌套的使用一</li>
<table width="500" >
<tr>
<td align="center">學生成績表</td>
</tr>
<td>
<table border="1" width="100%">
<thead>
<tr>
<th>姓名</th>
<th>語文</th>
<th>數學</th>
<th>外語</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>張三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>張三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">成績匯總</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</table>
<br/>
<li>表格嵌套的使用二</li>
<table border="1" width="500" >
<caption align="bottom">學生成績</caption>
<thead>
<tr>
<th>姓名</th>
<th>語文</th>
<th>數學</th>
<th>外語</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>張三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>張三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">成績匯總</td>
</tr>
</tfoot>
</table>
<br/>
<li>表格嵌套的使用三</li>
<table border="1" width="500" >
<caption align="bottom">學生成績</caption>
<col ></col>
<col bgcolor=blue></col>
<thead>
<tr>
<th>姓名</th>
<th>語文</th>
<th>數學</th>
<th>外語</th>
</tr>
</thead>
<tbody>
<tr >
<td>張三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>張三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>張三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</head>
</html>
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
怎樣用h5的sse服務器發送EventSource事件
H5的本地存儲和本地數據庫詳細介紹
用H5和C3實現簡單的時鐘效果
以上就是Html網頁表格結構化標記該如何使用的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。