国产精品18久久久久,国产精品原创视频,久久久91精品国产一区二区三区

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

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

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

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

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

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

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

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

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

Html表格的標題

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

表格的標題

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

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

<caption>下的屬性值有：

屬性名稱

屬性值

說明

align

Top

標題在表格上方

Bottom

標題在表格下方

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

Html直列化格式

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

屬性名稱

屬性值

說明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

數(shù)字

直列數(shù)

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

源代碼如下：

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

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

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

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

巨人網(wǎng)絡通訊聲明：本文標題《淺談Html網(wǎng)頁表格結(jié)構(gòu)化標記的應用》，本文關(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)絡，涉及言論、版權(quán)與本站無關(guān)。