資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學區分HTML表格中的<th>和<thead>標籤
在我們瞭解區別之前，重要的是要理解<th>和<thead>標籤都用於在HTML表格中提供表頭。在HTML中，<th>標籤用於提供表格單元格的表頭，而<thead>標籤用於提供表格組的表頭。
這兩個標籤不能互相替換，輸出結果保持不變，因為只有開發者或瀏覽器才能理解其中的區別。
讓我們深入瞭解一下HTML表格中<th>和<thead>標籤的區別。在我們深入瞭解區別之前，讓我們簡要了解一下HTML中的<th>和<thead>標籤。
HTML <th>標籤
此標籤指定表格單元格的標題。為了方便每個人找到列的表頭，表格中每個單元格的表頭預設情況下總是粗體且居中。每個<td>標籤都與它直接相關。在HTML中，表格主要由兩部分組成：表頭單元格和資料單元格。
語法
以下是HTML <th>標籤的語法
<tr> <th>…</th> <th>…</th> </tr>
示例
下面的示例中，我們將使用HTML <th>標籤。
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 2px solid #A569BD;
}
</style>
</head>
<body style="background-color:#D5F5E3 ">
<table>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
<tr>
<td>RS7</td>
<td>$1000</td>
</tr>
<tr>
<td>Bugati</td>
<td>$8000</td>
</tr>
</table>
</body>
</html>
執行上述程式碼後，它將生成一個包含表格以及應用於網頁上顯示的CSS的輸出。
HTML <thead>標籤
此標籤幫助瀏覽器或搜尋引擎識別表格標題在表格主體中的位置。此標籤支援<tbody>和<tfoot>。為了在表格中使用此標籤，<thead>內部必須有一個<tr>標籤。當需要列印包含多個頁面的大型表格時，此元素也很好用，因為它使表格的表頭和表尾可以分別列印在頁面頂部和底部。
語法
以下是HTML <thead>標籤的語法
<thead>
<tr>
<th> </th>
<th> </th>
</tr>
</thead>
示例
在下面的示例中，我們將使用HTML <thead>標籤。
<!DOCTYPE html>
<html>
<head>
<style>
thead {
color: #6C3483;
}
tbody {
color: #DE3163;
}
tfoot {
color: #145A32;
}
table,
th,
td {
border: 2px solid #DFFF00;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Bike</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vespa</td>
<td>1000</td>
</tr>
<tr>
<td>Enfield</td>
<td>1100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>2100</td>
</tr>
</tfoot>
</table>
</body>
</html>
執行上述程式碼後，輸出視窗將彈出，在網頁上顯示應用了CSS的表格。
<th>和<thead>標籤的區別
<th>標籤 |
<thead>標籤 |
|---|---|
它屬於內聯塊元素家族。 |
它是一種特殊的塊級元素。 |
它使使用者能夠區分表頭和資料單元格。 |
它使使用者能夠支援單獨的表頭和表尾滾動。 |
它指定單元格的表頭。 |
它描述表格組的表頭。 |
使用者可以看到表頭，因為它以粗體顯示。 |
使用者看不到表頭。 |
它是列的表頭。 |
它是表格的表頭。 |
表格本身包含輸出。 |
使用者看不到輸出；它僅對瀏覽器有效。 |
它會影響表格的設計。 |
它不會影響設計。 |
指定每一行開頭或結尾的垂直表頭。 |
它指定全寬的水平表頭。 |
500 次瀏覽
