HTML の THead タグ-htmlチュートリアル-php.cn

HTML の THead タグ

WBOY

リリース： 2024-09-04 16:30:21

オリジナル

1210 人が閲覧しました

要素またはタグはとともに hand で使用されます。タグとタグを使用して、テーブルヘッダー、テーブルフッター、テーブル本体をそれぞれ定義します。要素は HTML テーブルのヘッダーを定義します。テーブルの列見出しを作成する行または行のセットを定義するには、を使用します。要素。つまり、この要素は HTML テーブル内のヘッダーコンテンツをグループ化します。 1 つまたは複数の行全体を囲み、テーブルヘッダーとして分類します。このトピックでは、HTML の THead タグについて学習します。

テーブルヘッダーは、列またはテーブル本体データに関する情報を含む 1 つまたは複数の行で構成されます。

の使用方法HTML の要素?

要素は、HTML テーブルのヘッダー部分を指定します。このはしたがって、テーブル要素

の直接の子としての位置を確保します。、、またはを使用します。要素。要素は、任意のの後に出現する場合があります。要素がある場合は、で囲まれた少なくとも 1 行のデータが含まれます。要素。

構文

<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 行が必要な場合は、両方の

行が必要であることに注意してください。要素データは 1 つのに追加できます。要素。を 2 つ追加しないようにしてください。 1 つのテーブルの要素セクション。以下の例では、ヘッダーセクションの下に 2 つの行があります:

例 #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 タグ

上記のコードはどちらも同じ出力を生成し、別々の

を使用していることに注目してください。 2 つのヘッダーの要素は、一部のブラウザーで処理されます。ただし、これは依然としてセマンティックエラーであり、適切なプログラミングでは使用すべきではなく、HTML 検証サービスによって危険信号として提起されます。

例 #4

以下に別の例を見てみましょう。次の例では、4 行のデータで構成されるテーブル本体を持つテーブルを作成しました。ヘッダーは、CSS を使用して背景色に設定された 1 行のデータで構成されます。、

または 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 タグ