HTMLのテーブル関連タグ10選

HTMLには10個のフォーム関連タグがあります。ここではその一覧を紹介しますが、まず、HTML 4.01/XHTML 1またはHTML 5で適切に定義された文書であることが必要です。

• <caption> テーブルのタイトルを定義する (4, 5)
• <col> テーブルの列の属性を定義する (4, 5)
• テーブルの列のグループ化を定義する (4、5)
• テーブルの定義 (4, 5)
• テーブル本体の定義(4, 5)
• セルを定義する (4, 5)
• <tfoot> 表のノート（下）を定義する（4、5）
• テーブルのヘッダーを定義する（4, 5）
• <thead> テーブルのヘッダーを定義します (4, 5)
• テーブルの行を定義する (4, 5)

基本的なテーブルの構造は次のようになります。

ヘッダー、ヘッド、ボディ、フッターを含んでいます。HTML要素の正しい順序は

1. <table>
2. キャプション
3. <thead>
4. <tfoot>
5. <tbody>

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

1. <table>
2. キャプション
3. <colgroup>
4. <col>
5. <thead>
6. <tfoot>
7. <tbody>

以下は、正しいテーブル構造の例です。

テーブルに関するいくつかのヒント

• w3schoolsで説明され使用されているように、テーブルの定義では <tfoot> 要素は <tbody> の前に表示されなければなりません。 ブラウザがすべてのデータを受け入れる前にテーブルノートをレンダリングできるようにするためです。また、この順序でない場合は にはできません。 は、どのDTDを宣言しても、W3CのHTML4とXHTMLの検証をパスします。
• HTML 4.01では、テーブルの 整列 と bgcolor 属性は好まれないので、HTML 5でサポートされているテーブル属性はもはやありません（実際、"align" と "bgcolor" はXHTML 1.0 Strict DTDでサポートされなくなりました）。
• 全ての主要なブラウザは <colgroup> タグをサポートしていますが、Firefox、Chrome、Safari は colgroup 要素の span 属性と width 属性のみをサポートしています。
• cssのempty-cells:show|hideは、空のセルにボーダーを表示するかしないかを設定します。なお は、table に設定する必要があり、td/th には設定できません。 IE6で遭遇する可能性が高い。
• border-collapse:collapse｜css の separate で、テーブルのボーダーを1つのボーダーに統合するかどうかを設定します。
• cssのborder-spacingプロパティは、テーブルのcelpacingプロパティと同等です。

フロントエンド・ウオッチでは、現在提唱されている「表現と構造の分離」という開発モデルを実現するために、ページの表現層に関わるものはすべてCSSで制御し、HTML独自の属性で制御しないことを推奨していますが、その中でもテーブルというのは最も無視されやすい属性の一つなのです。

テーブルの詳細については、以下のW3Cのドキュメントを参照してください。 w3 テーブルの紹介

最後に、とても素朴な疑問を残しておきます。テーブルのcellpaddingプロパティに相当するCSSプロパティはどれでしょうか？