Html網頁表格結構化標記該如何使用-html教學-PHP中文網

首頁

web前端

html教學

Html網頁表格結構化標記該如何使用

php中世界最好的语言

Jan 20, 2018 am 09:43 AM

html標記結構化

這次帶給大家Html網頁表格結構化標記該如何使用，Html網頁表格結構化標記使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

Html表格的結構化

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

結構化格式

<table>     
<thead>…</thead> --------表头区     
<tbody>…</tbody>---------表体区     
<tfoot>…</tfoot>------------表尾区     
</table>

總結：透過將表格分成三部分，方便了我們對表格的編輯操作。

Html表格的標題

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

表格的標題

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

下的屬性值有：

屬性名稱

##屬性值

說明

align

Top

標題在表格上方

Bottom

##標題在表格下方

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

Html直列化格式

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

<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>数学</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>数学</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>数学</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>

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼用h5的sse伺服器發送EventSource事件

H5的本地儲存和本機資料庫詳細介紹

用H5和C3實作簡單的時鐘效果

以上是Html網頁表格結構化標記該如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML標籤和HTML屬性有什麼區別？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未來：進化和趨勢May 13, 2025 am 12:01 AM

HTML的未來將朝著更加語義化、功能化和模塊化的方向發展。 1)語義化將使標籤更明確地描述內容，提升SEO和無障礙訪問。 2)功能化將引入新元素和屬性，滿足用戶需求。 3)模塊化將支持組件化開發，提高代碼復用性。

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

See all articles