10 HTML テーブル関連タグ

実際、多くの人が「テーブルは絶対に使用すべきではないと聞いたことがある」と言いますが、これは絶対に間違っています。このアドバイスは、HTML テーブルを使用して Web ページのレイアウトを定義する場合のみに適用されますが、テーブルは情報の行と列を便利に配置するのに最適であり、ページに表形式のデータを表示する必要がある場合は、必ずテーブルを使用する必要があります。なぜだめですか？しかし、この場合、テーブル用の特定の HTML タグの存在を無視し、正しい使用方法を知らない人もいます。

HTML には 10 個のテーブル関連タグがあります。以下に簡単な紹介を記載したリストを示しますが、まず、ドキュメントは HTML 4.01/XHTML 1 または HTML 5 で適切に定義されている必要があります。

<caption>は表のタイトルを定義します（4, 5）
<col>は表の列の属性を定義します（4、5）
<colgroup>はテーブル列のグループ化を定義します（4、5）
<table>はテーブルを定義します（4, 5）
<tbody>はテーブル本体を定義します（4, 5）
<td>はセルを定義します（4, 5）
<tfoot>は表のフッターを定義します（4, 5）
<th>はテーブルヘッダーを定義します（4, 5）
<thead>はテーブルヘッダーを定義します（4, 5）
<tr>は表の行を定義します（4, 5）

基本的なテーブル構造は次のとおりです。

再理解表

タイトル、ヘッダー、本文、フッターが含まれます。 HTML 要素の正しい順序は次のとおりです。

<テーブル>
<キャプション>
<頭>
<tfoot>
<t本文>

<col>と<colgroup>を使用して、テーブル列またはグループ列を定義することもできます。

<テーブル>
<キャプション>
<colgroup>
<列>
<頭>
<tfoot>
<t本文>

正しいテーブル構造の例を次に示します。

コードをコピー

コードは次のとおりです。

<表の境界線="1">
<caption>ここに表のキャプションを記入</caption>
<colgroup span="1" style="background:#DEDEDE;"/>
<colgroup span="2" style="background:#EFEFEF;"/>

<頭>
<tr>
<th>ヘッド 1</th>
<th>ヘッド 2</th>
<th>ヘッド 3</th>
</tr>
</thead>

<tfoot>
<tr>
<td>足 1</td>
<td>足 2</td>
<td>足 3</td>
</tr>
</tfoot>

<t本文>
<tr>
<td>あ</td>
<td>ば</td>
<td>こ</td>
</tr>
<tr>
<td>だ</td>
<td>え</td>
<td>ふ</td>
</tr>
</tbody>
</テーブル>

ブラウザでの結果は以下の通りです。
再理解表

テーブルに関するヒント

w3schools の説明と使用法によると、テーブル定義では、ブラウザーがすべてのデータを受信する前にテーブルフッターをレンダリングできるように、<tfoot> 要素を <tbody> の前に配置する必要があります。さらに、この順序になっていない場合、どの DTD を宣言しても、W3C HTML4 および XHTML 検証に失敗します。
HTML 4.01 では、表属性alignとbgcolor は非推奨になったため、HTML 5 では表属性はサポートされなくなりました (実際、"align" 属性と "bgcolor" 属性は XHTML 1.0 Strict DTD ではサポートされなくなりました)。
すべての主要ブラウザは <colgroup> タグをサポートしていますが、Firefox、Chrome、Safari は colgroup 要素の span 属性と width 属性のみをサポートしています。
CSS の empty-cells:show|hide を使用すると、空のセルに境界線を表示するかどうかを設定できます。これはtd/th 要素ではなくテーブル内で設定する必要があることに注意してください。この問題は IE6 で発生する可能性が高くなります。
CSS の border-collapse:collapse | Separate は、表の境界線を 1 つの境界線に結合するかどうかを設定できます。
CSS の border-spacing プロパティは、table の cellspacing プロパティと同等です。

現在提唱されているプレゼンテーションと構造の分離という開発モデルを実現するために、Front-end Observation では、ページのプレゼンテーションを制御するために HTML 独自の属性を使用するのではなく、ページ上のプレゼンテーションに関連するすべてのものを CSS で制御することを推奨しています。最も見落とされやすいのはテーブルです。

テーブルの詳細については、W3C ドキュメント「w3 テーブルの概要」を参照してください。

最後に、非常に簡単な質問をします。テーブルの cellpadding プロパティに相当する CSS プロパティはどれでしょうか?

<<: Vueにおける混合継承の詳細な説明

>>: CSS でベジェ曲線の実装を反転する方法