溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“HTML5表格怎么構建”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML5表格怎么構建”文章能幫助大家解決問題。
表格的基本元素包括：table、tr和td。
table表示HTML文檔中的表格，支持border屬性，用于定義表格邊框的寬度；
tr表示表格中的行；
td表示表格中的單元格，包括如下屬性：
1）colspan：規定單元格可橫跨的列數；
2）rowspan：規定單元格可橫跨的行數；
<table> <tr> <td>Apples</td> <td>Green</td> <td>Medium</td> </tr> <tr> <td>Oranges</td> <td>Orange</td> <td>Large</td> </tr> </table>
上面定義了一個兩行、三列的表格，使用表格的好處是：瀏覽器會保證列的寬度滿足最寬的內容，讓行的高度滿足最高的單元格。
使用table元素的border屬性，可以為表格添加邊框。
<table border="1"> <tr> <td>Apples</td> <td>Green</td> <td>Medium</td> </tr> <tr> <td>Oranges</td> <td>Orange</td> <td>Large</td> </tr> </table>
瀏覽器的默認邊框不太美觀，通常還需要用CSS來為為各種元素重設邊框樣式。
使用單元格的colspan和rowspan屬性可以構建不規則表格，使表格的某些行或者列跨越多個單元格，下面是一個單元格跨多列的一個例子：
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td colspan="2">January</td> </tr> <tr> <td colspan="2">February</td> </tr> </table>
下面是一個單元格跨多行的一個例子：
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> <td rowspan="2">$50</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> </table>
th元素用于為表格添加表頭，可以用來區分數據和對數據的說明。th元素支持如下屬性：
1）colspan：規定單元格可橫跨的列數；
2）rowspan：規定單元格可橫跨的行數；
3）scope：定義將表頭數據與單元數據相關聯的方法；
3）headers：由空格分隔的表頭單元格ID列表，為數據單元格提供表頭信息，該屬性不會在普通瀏覽器中產生任何視覺變化，但可以被屏幕閱讀器使用。
<table> <tr> <th>Rank</th><th>Name</th> <th>Color</th><th>Size</th> </tr> <tr> <th>Favorite:</th> <td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite:</th> <td>Oranges</td><td>Orange</td><td>Large</td> </tr> <tr> <th>3rd Favorite:</th> <td>Pomegranate</td><td>A kind of greeny-red</td> <td>Varies from medium to large</td> </tr> </table>
可以在一行中混合使用th和td。
使用td的headers屬性可以將單元格和表頭關聯，關聯的目的主要是供屏幕閱讀器和其他殘障輔助技術用來簡化對表格的處理。headers屬性可以為一個或多個th單元格的id屬性值：
<table border="1" width="100%"> <tr> <th id="name">Name</th> <th id="Email">Email</th> <th id="Phone">Phone</th> <th id="Address">Address</th> </tr> <tr> <td headers="name">George Bush</td> <td headers="Email">someone@example.com</td> <td headers="Phone">+789451236</td> <td headers="Address">Fifth Avenue New York,USA</td> </tr> </table>
使用th的colspan和rowspan屬性可以構造復雜表頭。
<table border="1"> <tr> <th colspan="2">Company in USA</th> </tr> <tr> <th>Name</th><th>Addr</th> </tr> <tr> <td>Apple, Inc.</td> <td>1 Infinite Loop Cupertino, CA 95014</td> </tr> <tr> <td>Google, Inc.</td> <td>1600 Amphitheatre Parkway Mountain View, CA 94043</td> </tr> </table>
為表格添加結構
可以使用thead、tbody和tfoot元素來為表格添加結構，這樣可以讓為表格各個部分添加CSS樣式變得更加容易。
1）表格主題
tbody元素表示構成表格主題的全體行，不包括表頭行（thead元素表示）和表腳行（tfoot元素表示）。
注意大多數瀏覽器在處理table元素時都會自動插入tbody元素。
2）表格表頭
thead元素用來標記表格的標題行。如果沒有thead元素的話，所有tr元素都會被視為表格主體的一部分。
3）添加腳注
tfoot元素用來標記組成表腳的行。在HTML5之前tfoot元素只能出現在tbody元素之前，而在HTML5中則允許將tfoot元素放在tbody之后。
下面是一個綜合的例子，里面使用了tbody、thead和tfoot元素。
<table> <thead> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </thead> <tfoot> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </tfoot> <tbody> <tr> <th>Favorite:</th> <td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite:</th> <td>Oranges</td><td>Orange</td><td>Large</td> </tr> <tr> <th>3rd Favorite:</th> <td>Pomegranate</td><td>A kind of greeny-red</td> <td>Varies from medium to large</td> </tr> </tbody> </table>
使用caption元素可以為表格定義一個標題，并將其與表格關聯起來。
<table> <caption>Results of the 2011 Fruit Survey</caption> <thead> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </thead> <tfoot> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </tfoot> <tbody> <tr> <th>Favorite:</th> <td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite:</th> <td>Oranges</td><td>Orange</td><td>Large</td> </tr> <tr> <th>3rd Favorite:</th> <td>Pomegranate</td><td>A kind of greeny-red</td> <td>Varies from medium to large</td> </tr> </tbody> </table>
一個表格只能包含一個caption元素，無需是表格的第一個元素，但始終顯示在表格上方。
在表格中，由于表格都是按行組建的，導致對列的操作不太方便，例如為表格的某列定義樣式。可以使用colgroup元素來指定列的分組
<html>
<head>
<style>
#colgroup1{background-color: red}
#colgroup2{background-color: green; font-size=small}
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup id="colgroup1" span="2" ></colgroup>
<colgroup id="colgroup2"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>上面的例子中指定了兩個列的組，第一個包含前2列，第二個包含剩下的1列，并為不同的分組指定了不同的樣式。colgroup的span屬性指定擴展幾列，如果不指定span屬性，也可以指定一個或多個col元素，下面的例子達到了和上面例子一樣的效果。
<html>
<head>
<style>
#colgroup1{background-color: red}
#col3{background-color: green; font-size=small}
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup id="colgroup1">
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>關于“HTML5表格怎么構建”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
