はじめに

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

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

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>

参考サイト