10 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 要素の正しい順序は次のとおりです。

1. <テーブル>
2. <キャプション>
3. <頭>
4. <tfoot>
5. <t本文>

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

1. <テーブル>
2. <キャプション>
3. <colgroup>
4. <列>
5. <頭>
6. <tfoot>
7. <t本文>

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

テーブルに関するヒント

• 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 プロパティはどれでしょうか?