はじめに
今回は、超基本のテーブルタグについてです。
独学なもので、必要な時にその都度調べながらものごとを進めているのですが、なんとなくの理解で解決してしまうことも多々あるので、しばらくすると忘れるということがよくあります。
今回のテーブルタグもその一つ。これはしかし、その都度調べて使うには面倒なので、ちゃんと構造を覚えてすぐ使えるようにしたほうが楽だと思い、整理しておきます。
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> |
コメントを残す
コメントを投稿するにはログインしてください。