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

Html頁面表格結(jié)構(gòu)化標(biāo)記該如何使用

發(fā)表時間：2024-05-06 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

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

Html表格的結(jié)構(gòu)化

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

結(jié)構(gòu)化格式

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

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

Html表格的標(biāo)題

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

表格的標(biāo)題

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

<caption>下的屬性值有：

屬性名稱

屬性值

說明

align

Top

標(biāo)題在表格上方

Bottom

標(biāo)題在表格下方

小結(jié)：通過設(shè)置表格的標(biāo)題，能夠隨時讓標(biāo)題跟著表格動。
Html直列化格式

什么是表格的直列化格式呢？我們平常在Excel中所見到的給整列加背景顏色，說的就是這么一回事。

<html>     
<head>     
     
<li>表格嵌套的使用一</li>     
     
<table  width="500" >     
<tr>     
<td align="center">學(xué)生成績表</td>     
</tr>     
<td>     
<table border="1" width="100%">     
<thead>           
<tr>     
<th>姓名</th>     
<th>語文</th>     
<th>數(shù)學(xué)</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">學(xué)生成績</caption>     
<thead>     
<tr>     
<th>姓名</th>     
<th>語文</th>     
<th>數(shù)學(xué)</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">學(xué)生成績</caption>     
<col ></col>     
<col bgcolor=blue></col>     
<thead>     
<tr>     
<th>姓名</th>     
<th>語文</th>     
<th>數(shù)學(xué)</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)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

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

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

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

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


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