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

來源：本站原創(chuàng)|時間：2020-01-10|欄目：CSS/HTML|點擊：次

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

Html表格的結構化

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

結構化格式

XML/HTML Code復制內容到剪貼板

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

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

Html表格的標題

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

表格的標題

XML/HTML Code復制內容到剪貼板

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

<caption>下的屬性值有：

屬性名稱

屬性值

說明

align

Top

標題在表格上方

Bottom

標題在表格下方

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

Html直列化格式

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

屬性名稱

屬性值

說明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

數(shù)字

直列數(shù)

小結：通過設置表格的直列化格式，能夠對我們需要的內容進行加深顏色，這里只是針對的列內容。

源代碼如下：

XML/HTML Code復制內容到剪貼板

<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)頁表格結構化標記的應用的全部內容了，希望對大家有所幫助，多多支持我們~

上一篇：Html/Css(新手入門第一篇必看攻略)

欄目：CSS/HTML

下一篇：淺談HTML空鏈接的作用

本文標題：淺談Html網(wǎng)頁表格結構化標記的應用

本文地址：http://mengdiqiu.com.cn/a1/CSS_HTML/9610.html

更多CSS/HTML

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

CSS/HTML

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

您可能感興趣的文章

閱讀排行

本欄相關

隨機閱讀