HTML 中的 THead 標籤-html教學-PHP中文網

HTML 中的 THead 標籤範例

範例#4

HTML 中 THead 標籤的屬性

結論

首頁

web前端

html教學

HTML 中的 THead 標籤

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:30 PM

html html5 HTML Tutorial HTML Properties HTML tags

元素或標籤與

一起使用。標籤和標籤，分別定義表頭、表尾和表體。元素定義 HTML 表格的標題。要定義建立表格的列標題的行或行集，我們使用元素。換句話說，此元素將 HTML 表中的標頭內容分組。它包含整行或幾行並將其分類為表頭。在本主題中，我們將學習 HTML 中的 THHead 標籤。

表頭由一行或多行組成，其中包含有關列或表主體資料的資訊。

如何使用 HTML 中的元素？

元素指定 HTML 表的標頭部分。這個因此確保了作為表元素

的直接子元素的位置。在使用任何、或;元素。元素可以出現在任何之後。元素（如果有）和中的資料。元素。

文法

<thead>
<tr>
</tr>
</thead>

登入後複製

當然，如上所示，就像任何其他 HTML 元素一樣，

元素也可以成對使用，打開標籤，有一個夥伴、一個結束標籤、 .

HTML 中的 THead 標籤範例

考慮以下範例：

範例#1

代碼：

<html>
<head>
<title>HTML thead Tag</title>
</head>
<table style = "width:100%" border = "1">
<thead>
<tr>
<td colspan = "4" align="center">This is the <b>header</b> section of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4" align="center">This is the <b>footer</b> section of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tbody>
<tbody>
<tr>
<td colspan="4">...</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
<html>

登入後複製

輸出：

HTML 中的 THead 標籤

請注意，如果表格標題需要兩行，則兩個

都可以。元素資料可以加入一個元素中。元素。盡量不要加入兩個一張表的元素部分。請觀察下面的一個這樣的範例，標題部分下有兩行：

範例#2

代碼：

<table style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
</thead>
<thead>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

登入後複製

輸出：

HTML 中的 THead 標籤

範例#3

代碼：

<table  style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

登入後複製

輸出：

HTML 中的 THead 標籤

請注意，儘管上面的程式碼產生相同的輸出並使用單獨的

;某些瀏覽器確實可以處理兩個標頭的元素。然而，它仍然是一個語義錯誤，不應在正確的程式設計中使用，並且 HTML 驗證服務也會將其作為危險信號提出。

範例#4

讓我們來看下面另一個例子。在下面的範例中，我們建立了一個表，表體由四行資料組成。標題由一行資料組成，使用 CSS 設定為背景顏色。 , 或

不影響 HTML 表格的預設外觀；因此，一點 CSS 的幫助就足夠了。

代碼：

<body>
<table border="3">
<caption>Time Table</caption>
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
</thead>
<tbody>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Hindi</td>
<td>Hindi</td>
<td>English</td>
</tr>
<tr>
<td>English</td>
<td>Hindi</td>
<td>Maths</td>
<td>Social</td>
<td>Science</td>
</tr>
<tr>
<td colspan="10" align="center">Lunch</td>
</tr>
<tr>
<td>Science</td>
<td>English</td>
<td>Maths</td>
<td>Hindi</td>
<td>Social</td>
</tr>
</tbody>
</table>
</body>

登入後複製

輸出：

HTML 中的 THead 標籤