表組み

Home>HTML>表組み

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

表組みとは、罫線を用いて四角い枠をつくり、その中に値を配置することで、読みやすくしたものです。
表組みの利点は、一覧表のようなものをつくるときに見やすくできるだけではなく、場合によってはレイアウトなどにも応用できることです(ただし、レイアウトに表組みを使うのはあまり推奨されていません)。

表組みの基本

表組みをつくるには、table要素を使います。
table要素は、<table>~</table>タグで表され、この<table>~</table>の中身に表組みに必要となるほかの要素(tr、td等)が内包されます。

表組みに使う要素

要素 タグ 役割
table <table>~</table> 表組みの土台となる。この要素の内部に表組みの各要素が配置される。
tr <tr>~</tr> 表内部の横1列を示す。th要素やtd要素がこの内部に配置される。
th <th>~</th> 見出し用のセル。一般的なブラウザでは中央に太字で表示される。tr要素の直後に配置する。横に複数分割したセルをつくる場合は、th要素の後に続けてth要素を配置する。
td <td>~</td> 通常のセル。この中にデータ等を記述する。tr要素の直後に配置する。横に複数分割したセルをつくりたい場合には、td要素の後に続けてtd要素を配置する。
caption <caption>~</caption> 表にタイトルをつける。表の上に表示するか下にするかを決められる。table要素の直後に配置する。
thead <thead>~</thead> 表のヘッダ(タイトル行)をグループ化する。一つのtable要素内に一つだけ配置できる。
tbody <tbody>~</tbody> 表のデータ部分をグループ化する。複数配置できる。
tfoot <tfoot>~</tfoot> 表のフッタ(最下段行)をグループ化する。一つのtable要素内に一つだけ配置できる。
col <col>~</col> 表の縦列にまとめて属性やスタイルシートを指定する(グループ化はしない)。
colgroup <colgroup>~</colgroup> 表の縦列をグループ化する。table要素の直後(又はcaption要素の直後)に配置する。

表組みのソースコード

<table>
<caption>表のタイトル</caption>
<colgroup span="2"></colgroup>
<colgroup span="1"></colgroup>
<thead>
<tr>
<th>タイトル1</th><th>タイトル2</th><th>タイトル3</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td><td>データ2</td><td>データ3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合計1</td><td>合計2</td><td>合計3</td>
</tr>
</tfoot>
</table>

表組みの基本的なソースコードは以上のとおりです。
このとき、例えば、th要素はタイトルを表すので、必要ないと思えば最初からtd要素でも構いません。
caption要素も、表のタイトルを必要としない場合には省きます。同じように、thead、tbody、tfoot、colgroup、col要素は使わないときは省くことができます。
最低限、表組みとして機能させるには、table要素、tr要素、td要素さえあれば足ります。

上記のソースコードをブラウザで表示させると、以下のようになります。

表のタイトル
タイトル1タイトル2タイトル3
データ1データ2データ3
合計1合計2合計3

表の枠線を表示しない設定になっているため、これでは表組みされているのかどうか、わかりません。そこで、次に表組みの見た目の操作を行います。

見た目の操作

table要素

table要素には、以下の属性により見た目を変更できます。また、CSSでも同様の操作ができるので、代替方法を併記します。

属性 効果 CSSによる代替
align 表内のテキストや画像の配置 text-align
bgcolor 背景色 background-color
border 外枠の太さ border
cellpadding セルの内側の空白 padding
cellspacing セルとセルの間の空白 border
frame 枠線の表示形式 border
rules セルの枠線の表示形式 border
width 表の幅 width

以上の属性は、td要素やth要素にも適用できます。table要素に指定すると、table要素内の全ての要素に一括して適用されますが、td要素などに指定すると、そのセル内のみに適用、といった個別の設定ができます。

セルの結合

セルを縦や横につなげることができます。td要素やth要素に以下の属性を指定します。

colspan 横にセルをつなげる
rowspan 縦にセルをつなげる

以下はcolspanとrowspanを設定した場合の、表の見え方です。

colspan="2"  
    rowspan="2"
   

ソースコードで見ると、この場合、一行に3つのセル(td要素)が配置されるところを、colspan="2"を設定している行は、td要素は2つだけ配置します。
また、一列に3つのセル(td要素)が配置されるところを、rowspan="2"を設定している列は、td要素は2つだけ配置します。

<table border="1">
<tr>
<td colspan="2"> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

レイアウトへの応用

冒頭で、レイアウトにtable要素を使うのはあまり望ましくない、と述べました。
table要素は、表組みを示すものですから、レイアウトなどのために使うと本来の文書構造を示す、という目的からはずれてしまうからです。
したがって、レイアウトを指定するならば、div要素などを用いてCSSで指定するべきとされています。

しかし、table要素を使うと、とても簡単にレイアウトをくみ上げることができます。一時しのぎやちょっとした部分への利用、CSSでうまく組めなかった場合には、table要素を使うことは十分にあります。
ですから、ここではtable要素を使ったレイアウトについてもふれておきます。

ページ全体のレイアウト

table要素を使ってページ全体のレイアウトを決めます。以下のようなレイアウトにしたい場合を例として考えます。

レイアウトのサンプルイメージ

この場合、ヘッダーとフッターまで表組みでレイアウトを組む必要はありません。
以下のように、ヘッダーとフッターの間にtable要素で表組みをいれます。

table要素を使った表組みの考え方

実際には、以下のようなソースコードになります。

<p>ヘッダー</p>
<table>
<tr>
<td style="width:30%;vertical-align:top">メニュー</td>
<td style="width:70%;vertical-align:top">メイン</td>
</table>
<p>フッター</p>

なお、表組みにしたときに、指定がない場合は、上下位置が中央に設定されてしまうので、予め、CSSなどでtd要素に「vertical-align:top」などとして、上に寄せて表示するようにしましょう。

ヘッダーのレイアウト

ヘッダーのレイアウトとして、table要素を使うこともあります。
例えば、ヘッダーにメインコンテンツのタイトルを横並びに表示する場合には、以下のようにtd要素で区切ります。

table要素を使ったヘッダーのレイアウト

そして、各セルにロゴマークの画像を配置したり、項目のテキストを入力したりします。

→詳しくは、「HTML:要素リファレンス:table」をご覧下さい。

関連リンク

よく読まれている記事

UpDate:2009-12-18