明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

Html頁面表格結(jié)構化標記該如何使用

發(fā)表時間：2023-09-21 來源：明輝站整理相關軟件相關文章人氣：

[摘要]這次給大家?guī)鞨tml網(wǎng)頁表格結(jié)構化標記該如何使用，Html網(wǎng)頁表格結(jié)構化標記使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。Html表格的結(jié)構化所謂的結(jié)構化，就是把我們的表格劃分為三種：表頭、表體、表尾。從而當我們在修改表體部分的時候，不會影響到其它兩部分，從而解除了耦合，方便我們的應用。...
這次給大家?guī)鞨tml網(wǎng)頁表格結(jié)構化標記該如何使用，Html網(wǎng)頁表格結(jié)構化標記使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

Html表格的結(jié)構化

所謂的結(jié)構化，就是把我們的表格劃分為三種：表頭、表體、表尾。從而當我們在修改表體部分的時候，不會影響到其它兩部分，從而解除了耦合，方便我們的應用。

結(jié)構化格式

<table>     
<thead>…</thead> --------表頭區(qū)     
<tbody>…</tbody>---------表體區(qū)     
<tfoot>…</tfoot>------------表尾區(qū)     
</table>

總結(jié)：通過把表格劃分為三部分，方便了我們對表格的編輯操作。

Html表格的標題

每個表格都有自己的標題，正如上述第二幅圖片所示，那么又如何做到讓標題隨著內(nèi)容來移動呢？

表格的標題

<table>     
<caption>…</caption>     
</table>

<caption>下的屬性值有：

屬性名稱

屬性值

說明

align

Top

標題在表格上方

Bottom

標題在表格下方

小結(jié)：通過設置表格的標題，能夠隨時讓標題跟著表格動。
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>數(shù)學</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>數(shù)學</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>數(shù)學</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>

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關注php中文網(wǎng)其它相關文章！

相關閱讀：

怎樣用h5的sse服務器發(fā)送EventSource事件

H5的本地存儲和本地數(shù)據(jù)庫詳細介紹

用H5和C3實現(xiàn)簡單的時鐘效果

以上就是Html網(wǎng)頁表格結(jié)構化標記該如何使用的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！


網(wǎng)站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。