淺談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)我們?cè)谛薷谋眢w部分的時(shí)候,不會(huì)影響到其它兩部分,從而解除了耦合,方便我們的應(yīng)用。
結(jié)構(gòu)化格式
- <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)題
- <table>
- <caption>…</caption>
- </table>
屬性名稱
屬性值
說明
align
Top
標(biāo)題在表格上方
Bottom
標(biāo)題在表格下方
小結(jié):通過設(shè)置表格的標(biāo)題,能夠隨時(shí)讓標(biāo)題跟著表格動(dòng)。
Html直列化格式
什么是表格的直列化格式呢?我們平常在Excel中所見到的給整列加背景顏色,說的就是這么一回事。
<colgroup>…<colgroup>
屬性名稱
屬性值
說明
Align
Left
靠左
Center
考中
Right
靠右
Valign
Right
靠右
Top
考上
Middle
靠中
Bottom
靠下
Span
數(shù)字
直列數(shù)
小結(jié):通過設(shè)置表格的直列化格式,能夠?qū)ξ覀冃枰膬?nèi)容進(jìn)行加深顏色,這里只是針對(duì)的列內(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ì)大家有所幫助,多多支持腳本之家~
相關(guān)文章
- 這篇文章主要介紹了html中table表格的內(nèi)容水平和垂直居中顯示的相關(guān)資料,需要的朋友可以參考下2017-03-27
HTML用正則表達(dá)式檢驗(yàn)表格的實(shí)例代碼
這篇文章主要介紹了HTML用正則表達(dá)式檢驗(yàn)表格的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-02-08- 本文給大家分享基于html制作的漂亮表格,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-11-15
- 下面小編就為大家?guī)硪黄嘘P(guān)HTML表格邊框的設(shè)置小技巧。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-19
- 這是一款將CSV格式數(shù)據(jù)轉(zhuǎn)換成HTML表格形式的工具,可實(shí)現(xiàn)按照逗號(hào)(,),tab,豎線(|),空格及自定義字符作為分隔符號(hào)進(jìn)行轉(zhuǎn)換的功能。2016-04-15
- 這篇文章主要介紹了HTML表格布局實(shí)際使用詳解,是HTML入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-28
- 這篇文章主要介紹了html 表格比較寬溢出的解決方法,表格如果比較寬,則有可能溢出,所以下面的方法,大家可以看看2019-09-06
- 給某一表格定義樣式,這也是為了應(yīng)付顯示需求,不得不做的一件事,下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-04-23
HTML表格_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
在html中繪制表格使用table標(biāo)簽,tr表示行,td表示列,下面通過代碼實(shí)例給大家介紹HTML表格的相關(guān)知識(shí),感興趣的朋友一起看看吧2017-06-20