表組み
表組みとは、罫線を用いて四角い枠をつくり、その中に値を配置することで、読みやすくしたものです。
表組みの利点は、一覧表のようなものをつくるときに見やすくできるだけではなく、場合によってはレイアウトなどにも応用できることです(ただし、レイアウトに表組みを使うのはあまり推奨されていません)。
表組みの基本
表組みをつくるには、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> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
レイアウトへの応用
冒頭で、レイアウトにtable要素を使うのはあまり望ましくない、と述べました。
table要素は、表組みを示すものですから、レイアウトなどのために使うと本来の文書構造を示す、という目的からはずれてしまうからです。
したがって、レイアウトを指定するならば、div要素などを用いてCSSで指定するべきとされています。
しかし、table要素を使うと、とても簡単にレイアウトをくみ上げることができます。一時しのぎやちょっとした部分への利用、CSSでうまく組めなかった場合には、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要素で区切ります。
そして、各セルにロゴマークの画像を配置したり、項目のテキストを入力したりします。
→詳しくは、「HTML:要素リファレンス:table」をご覧下さい。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2009-12-18