完美世界国际版下载,好看的玄幻小说,完美世界有声小说全集

主頁 > 知識庫 > 淺談Html網(wǎng)頁表格結(jié)構(gòu)化標(biāo)記的應(yīng)用

淺談Html網(wǎng)頁表格結(jié)構(gòu)化標(biāo)記的應(yīng)用

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

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

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

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

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

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

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

Html表格的標(biāo)題

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

表格的標(biāo)題

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

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

<caption>下的屬性值有：

屬性名稱

屬性值

說明

align

Top

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

Bottom

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

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

Html直列化格式

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

屬性名稱

屬性值

說明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

數(shù)字

直列數(shù)

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

源代碼如下：

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

<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>

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

標(biāo)簽：銅陵那曲湖南阿拉善盟福建沈陽揭陽健身房

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