テーブルの作成

HTMLを学ぶ上で欠かせないのがテーブルと呼ばれる要素です。テーブルは表組を作成するツールですが、その他にレイアウトを構築する際にも多々使われています。

ここでは、テーブルの基本と応用について解説します。サンプルを取り揃えていますので、参考までに見ておいてください。

テーブルの基本
テーブルの仕組みについて説明します。以下のテーブルを参照してください。
テーブルの見本
セルセルセルセル
セルセルセルセル
セルセルセルセル
左のテーブルは、まさに基本です。セルが縦と横に集まって1つの表を形成しています。セルの中にコンテンツが入ります。テーブルにおけるセルはある意味で偉大で、ブロックレベル要素でもオブジェクトでもスクリプトでも入れられてしまうのです。

まず最初に、テーブルはセルの集合体であるということを理解してください。

テーブルの作成
簡単なテーブルから作ってみましょう。下記の HTML文を見てください。このテーブルでは枠線を表示するために、border属性を使っています。テーブルの初期値では枠線が表示されないために、この属性で設定する必要があります。
<table border="1">
<tr><th>科目</th><th>得点</th><th>平均点</th></tr>
<tr><td>国語</td><td>85点</td><td>88点</td></tr>
<tr><td>算数</td><td>62点</td><td>73点</td></tr>
<tr><td>理科</td><td>70点</td><td>75点</td></tr>
<tr><td>英語</td><td>95点</td><td>86点</td></tr>
<tr><td>合計</td><td>78点</td><td>81点</td></tr>
</table>
実行結果はこのようになります。何とも味気ない間の抜けた表になってしまいました。
科目 得点 平均点
国語85点88点
算数62点73点
理科70点75点
英語95点86点
合計78点81点
一般的に、th要素は文字が強調され、かつセンタリングされて表示します。
次にこの表にセル内の余白を設けます。記述方は、
<table border="1" cellpadding="5" cellspacing="0">
科目 得点 平均点
国語85点88点
算数62点73点
理科70点75点
英語95点86点
合計78点81点
このように少しだけ表らしくなってきました。枠線の表示/非表示、セル内やセル間での余白の設定で表の見え方が違ってきます。
列のグループ化
テーブルのセルを縦方向の列のグループ化を設定します。これによって表の表現が大きく変わって、訪問者に見やすさを提供します。
縦のセルをグループ化するのには、colgroup要素、あるいは col要素 を使います。table 要素直後に下記のように記述します。
<table border="1" cellpadding="5" cellspacing="0">
<colgroup>
<col width="50" align="center">
<col span="2" width="70" align="center">
</colgroup>
この構文の実行結果は以下のとおりです。
セルのグループ化
科目 得点 平均点
国語85点88点
算数62点73点
理科70点75点
英語95点86点
合計78点81点
align属性で、セル内での文字のセンタリングを施しました。グループ化することにより全体が表らしくなり、非常に見やすい表が作成できます。
colgroup要素は、縦方向の列を「構造的」にグループ化するために利用しますが、col要素だけでも利用することは可能です。その場合、構造化はされず単に列をグループ化するだけです。
テーブルにおける要素と属性、及び値について
基本的なテーブル作成に必要とする要素、属性、及び値を説明します。
テーブルを構築するための要素とその属性
要素名 属性 値と機能
table border 枠線表示:ピクセル単位
width テーブルの横幅:ピクセル、%単位
frame セルの上下左右の枠線表示の指示
  • above -- 上のみ枠線表示
  • below -- 下のみ
  • hsides - 上下のみ
  • lhs ---- 左のみ
  • rhs ---- 右のみ
  • vsides - 左右のみ
  • box ---- 上下左右
  • borde -- 上下左右
  • void --- 枠線表示無し
rules セルを区切る境界の枠線表示の指示
  • groups - グループ化したセルの境界
  • rows --- 横列の境界
  • cols --- 縦列の境界
  • all ---- すべての境界
  • none --- 境界線なし
cellspacing セル間の余白:ピクセル単位
cellpadding セル内の余白:ピクセル単位
summary テーブルの補助的説明を加える
caption なし 表のキャプション (表題)を定義する
tr align セル内の行揃えの指定
  • left --- 左寄せ (デフォルト)
  • right -- 右寄せ
  • center - 中央揃え
  • justify 両端揃え
  • char --- 指定された文字の位置
valign データの垂直方向の位置の指定
  • top ---- 上に寄せる
  • middle - 中央揃え (デフォルト)
  • bottom - 下に寄せる
  • baseline 1行目のベースラインを揃える
char 位置を揃える文字を指定する

align属性で charを指定する必要がある

th

td

align tr要素の align属性と同様、セル内の位置揃えを指定する属性
valign tr要素の valign属性と同様、セルの垂直方向の位置揃えを指定する属性
abbr セルの内容を簡略に説明を加える

アクセシビリティに配慮する属性

axis セルに分類名を付与する

アクセシビリティに配慮する属性

headers 関連するヘッダセルの識別子を付与する

アクセシビリティに配慮する属性

scope ヘッダセルの対象となるデータセルの範囲を関連付けて指定する

アクセシビリティに配慮する属性

colspan セルを横方向に結合させる:数値で指定する
rowspan セルを縦方向に結合させる:数値で指定する
char 位置を揃える文字を指定する

align属性で charを指定する必要がある

colgroup

col

span グループ化する列数を指定する
width グループ化したセルの幅を指定する
align グループ化したセルのデータの位置揃え
valign グループ化したセルの垂直方向の位置揃え
char 位置を揃える文字を指定する

align属性で charを指定する必要がある

thead

tbody

tfoot

align グループ化したセルのデータの位置揃え
valign グループ化したセルの垂直の位置揃え
char 位置を揃える文字を指定する

align属性で charを指定する必要がある

ここで定義されている要素、属性は DTD文書型宣言が、HTML 4.01 Strict (厳格仕様) で使用可能なものだけを選びました。これ以外にも存在しますが、それらは非推奨扱いとなっており、廃止方向に向かうものです。


This Page is HTML4.01 Valid! 初版公開日 2002年8月6日   最新更新日 2004年3月7日
Copyright(C) 2002〜2008 banban