はじめに

今回は、超基本のテーブルタグについてです。

独学なもので、必要な時にその都度調べながらものごとを進めているのですが、なんとなくの理解で解決してしまうことも多々あるので、しばらくすると忘れるということがよくあります。
今回のテーブルタグもその一つ。これはしかし、その都度調べて使うには面倒なので、ちゃんと構造を覚えてすぐ使えるようにしたほうが楽だと思い、整理しておきます。

Contents

テーブルで使うタグ

まずはじめに、テーブルで使うタグを整理しましょう。

  • <table></table>：テーブルの大枠。この中にセルを配置していく。

    • <caption></caption>：テーブルに表題を付ける。
    • <thead></thead>：このタグで囲った行を、テーブルのヘッダ部分としてグループ化する。
    • <tfooter></tfooter>：このタグで囲った行を、テーブルのフッタ部分としてグループ化する。
    • <colgroup>：テーブルの列をグループ化し、属性を指定できる。
    • <col>：個々の列に対して属性を指定できる
    • <tbody></tbody>：テーブルの本体部分。

      • <tr></tr>：テーブルの行を定義。
      • <th></th>：テーブルの見出しセル。
      • <td></td>：テーブルのデータ。

これらのタグは、ちゃんと書く順番があるらしく、例えば、<tfooter></tfooter>は、<tbody></tbody>より前に記述するそうです。

テーブルで使える属性

次に、テーブルで使える属性を整理してみましょう。

  • border：tableの枠の太さを指定。値：数値
  • align：tableの表示位置を指定。値：center,left,right
  • height,width：tableの高さ、幅を指定。値：数値
  • bgcolor：tableの背景色を指定。値：色
  • background：tableの背景画像を設定。値：画像
  • bordercolorlight：tableの枠線の明るい部分の色を設定。値：色
  • bordercolordark：tableの枠線の暗い部分の色を設定。値：色
  • cellpadding：セルの余白を指定。値：数値
  • cellspacing：セルの間隔を指定。値：数値
  • width, height：それぞれ、セルの幅・高さを指定。値：数値,%
  • summary：テーブルの概要を設定。値：文字
  • frame：テーブルの外枠を部分的に消す。
    ―値：

    • void：外枠なし
    • above：上枠のみ表示
    • below：下枠のみ表示
    • hsides：左右枠のみ表示
    • lhs：左枠のみ表示
    • rhs：右枠のみ表示
    • box：全外枠表示
    • border：全外枠表示

テーブルの構造

頑張った割に分かりにくい。。ですが、下のような感じです。まあ、自分が分かればいいか。笑

<thead><tr> <th>Table Header</th> <th>Table Header</th> <th>Table Header</th> </tr></thead>
<tbody><tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td>
<tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr></tbody>
<tfooter><tr> <td>Table Data</td> </tr></tfooter>

参考サイト