在講網(wǎng)頁表格的結(jié)構(gòu)化標(biāo)記之前，還是先看幾幅圖片。

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

所謂的結(jié)構(gòu)化，正如上述第一副圖所示，就是把我們的表格劃分為三種：表頭、表體、表尾。從而當(dāng)我們?cè)谛薷谋眢w部分的時(shí)候，不會(huì)影響到其它兩部分，從而解除了耦合，方便我們的應(yīng)用。

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

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

Html表格的標(biāo)題

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

表格的標(biāo)題

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

<caption>下的屬性值有：

屬性名稱

屬性值

說明

align

Top

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

Bottom

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

小結(jié)：通過設(shè)置表格的標(biāo)題，能夠隨時(shí)讓標(biāo)題跟著表格動(dòng)。

Html直列化格式

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

屬性名稱

屬性值

說明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

數(shù)字

直列數(shù)

小結(jié)：通過設(shè)置表格的直列化格式，能夠?qū)ξ覀冃枰膬?nèi)容進(jìn)行加深顏色，這里只是針對(duì)的列內(nèi)容。

源代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<html>
<head>
<li>表格嵌套的使用一</li>
<table width="500" >
<tr>
<td align="center">學(xué)生成績(jī)表</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">成績(jī)匯總</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</table>
<br/>
<li>表格嵌套的使用二</li>
<table border="1" width="500" >
<caption align="bottom">學(xué)生成績(jī)</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">成績(jī)匯總</td>
</tr>
</tfoot>
</table>
<br/>
<li>表格嵌套的使用三</li>
<table border="1" width="500" >
<caption align="bottom">學(xué)生成績(jī)</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>

以上就是小編為大家?guī)淼臏\談Html網(wǎng)頁表格結(jié)構(gòu)化標(biāo)記的應(yīng)用的全部?jī)?nèi)容了，希望對(duì)大家有所幫助，多多支持腳本之家~

標(biāo)簽：賀州煙臺(tái) 山南通遼湘潭懷化黃山湖北

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《淺談Html網(wǎng)頁表格結(jié)構(gòu)化標(biāo)記的應(yīng)用》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。