ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML の THead タグ

HTML の THead タグ

WBOYオリジナル: 2024-09-04 16:30:211231ブラウズ

要素またはタグはとともに 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 タグ

HTML の THead タグの属性

HTML 要素は、次の追加属性をサポートしています。

align: この属性は、

のコンテンツを整列させます。要素とその中にあるすべてのもの。値として left、right、center、justify、char を使用します。

char: この属性は、

への配置を指定します。 align 属性が char に設定されている場合の要素の内容。

valign:

内のコンテンツの垂直方向の配置を指定します。要素。値として上部、中央、下部、またはベースラインを使用します。

charoff: この属性は、char 属性で指定された 1^st 文字に対するオフセットを指定します。つまり、いつ整列するかが char に設定されます。

bgcolor:

内の各セルの背景色を設定するのに役立ちます。要素。

結論

私たちは、

がどのように機能するかを見ました。要素はテーブルデータではなく列ラベルを識別し、ヘッダーに関する情報を保持してブラウザーにフィードし、コンテンツとその意味をテクノロジーに支援します。

要素。要素には、
を使用する前に、要素を使用するには、

以上がHTML の THead タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html define if for try Error char using Attribute default this position background column table tbody td tr everything

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML 時間タグ次の記事：HTML 時間タグ

続きを見る