資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究區分 HTML 表格中的 <th> 和 <thead> 標籤
在我們瞭解差異之前，重要的是要理解 <th> 和 <thead> 標籤都用於在 HTML 表格中提供標題。但是，<th> 標籤用於為表格單元格提供標題，而 <thead> 標籤用於為表格組提供標題。
這兩個標籤不能相互替換，輸出結果保持不變，因為只有開發者或瀏覽器才能理解其中的區別。
讓我們深入文章，更好地理解 HTML 表格中 <th> 和 <thead> 標籤之間的區別。
HTML <th> 標籤
在 HTML 中，表格基本上包含兩個元件 - 標題單元格和資料單元格。HTML <th> 標籤指定表格單元格的標題。為了方便所有人查詢列的標題，表格中每個單元格的標題預設情況下始終為粗體並居中；每個表示資料單元格的 <td> 標籤都與它有直接關聯。
語法
以下是 HTML <th> 標籤的語法
<tr> <th>…</th> <th>…</th> </tr>
示例
以下是一個示例，我們將使用 HTML <th> 標籤。
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 2px solid #A569BD;
}
</style>
<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> 標籤
<thead> 標籤幫助瀏覽器或搜尋引擎識別表格標題在表格主體中的位置。此標籤支援 <tbody> 和 <tfoot>。為了在表格中使用此標籤，<thead> 內必須有一個 <tr> 標籤。當需要列印較大的多頁表格時，此元素也很有用，因為它允許表格的標題和頁尾分別列印在頁面的頂部和底部。
語法
以下是 HTML <thead> 標籤的語法
<thead>
<tr>
<th> </th>
<th> </th>
</tr>
</thead>
示例
在以下示例中，我們將使用 HTML <thead> 標籤。
<!DOCTYPE html>
<html>
<style>
thead {
color: #6C3483;
}
tbody {
color: #DE3163;
}
tfoot {
color: #145A32;
}
table,
th,
td {
border: 2px solid #DFFF00;
}
</style>
<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> 標籤之間的一些區別
<th> 標籤 |
<thead> 標籤 |
|---|---|
屬於內聯塊級元素家族。 |
是一種特殊的塊級元素。 |
允許使用者區分標題和資料單元格。 |
允許使用者支援單獨的表格頭和頁尾滾動。 |
指定單元格的標題。 |
描述表格組的標題。 |
使用者可以看見標題，因為它顯示為粗體。 |
使用者無法看見標題。 |
是列的標題。 |
是表格的標題。 |
輸出顯示在表格本身中。 |
使用者無法看到輸出；它僅對瀏覽器有效。 |
會影響表格的設計。 |
不會影響設計。 |
指定每行開頭或結尾的垂直標題。 |
指定整個寬度的水平標題。 |
772 次瀏覽
