表・テーブル

Tweet

ホームページに一覧表を載せたいとか写真をアルバム風にずらっと並べたいという場合に使うのがこのテーブルタグ。
オフィスのエクセルの様に行と列の概念がある表示形式のことです。

テーブルは、限られたスペースに効果的かつ見やすく表示させるのに重宝するので、是非使いこなしていきましょう。

テーブルとは

テーブルとは「表」のことです。
エクセル等の表計算ソフトを思い浮かべれば分かりやすいと思います。
縦横の格子(網目)状に区切られた1つ1つのマスに、文字や画像を表示させることが出来るということになります。

まず、「行」と「列」の考え方から。

行(row)とは横のまとまりのこと。
列(col)とは縦のまとまりのこと。

つまり↓の様な感じです。

テーブル[<table><tr><td><td></tr></table>]

次に、実際のサンプルを見つつ具体的にどう書けば良いのかを説明していきます。

ホームページにテーブルを表示する時はtableタグ、trタグ、tdタグを使用します。

以下灰色背景がサンプルソース薄緑背景が実際の見た目

ちょっと分かりにくいので、区切りの線を付けてみるとこんな感じです。

2行3列のテーブルが表示されました。
ではこれから、tableタグ、trタグ、tdタグについて個別に説明していきます。

tableタグ

<table>と</table>のセットのこと。テーブルを使いたい時には必ず書かなきゃいけないものと覚えておいてください。

trタグ

<tr>と</tr>のセットのこと。trタグは1行をあらわしています。つまり、tableタグ内に<tr>と</tr>のセットが1つあれば1行のテーブル、<tr>と</tr>のセットが2つあれば2行のテーブルということになります。
行数に制限はありませんが、あまりに多すぎる(100行以上とか)とページの表示が遅くなるので、多くなりそうな時はページをいくつかに分けるなどして調整しましょう。
なお、trタグは<table>と</table>の間にしか書けません。

tdタグ

<td>と</td>のセットのこと。tdタグは1マス(1セル)をあらわしています。つまり、trタグ内に<td>と</td>のセットが1つあれば1行の中に1マス(1列)あるテーブル、<td>と</td>のセットが2つあれば1行の中に2マス(2列)あるということになります。
実際にテーブル内に表示したい文字・画像などはこのtdタグ内に書きます。
なお、tdタグは<tr>と</tr>の間にしか書けません。

さて、このテーブルではエクセルにある「2つの行を繋げる」とか「2つの列(マス)を繋げる」ということも出来ます。
その方法は、tdタグ内にrowspan属性やcolspan属性を記述するというものです。

早速、具体例を見て見ましょう。

2行4列で一部のマスが結合されたテーブルが表示されました。
ではこれから、rowspan属性、colspan属性について個別に説明していきます。

rowspan属性

行を結合する属性。rowspan=”2″の“と”に括られた数字(この場合は2)の数の行数を結合する。
(rowspan=”2″なら2行、rowspan=”5″なら5行を結合)

colspan属性

列を結合する属性。colspan=”2″の“と”に括られた数字(この場合は2)の数の列数を結合する。
(colspan=”2″なら2列、colspan=”5″なら5列を結合)

以上色々説明してきましたが、テーブルについては自分で色々いじってみるのが一番。

上のサンプルをコピー＆ペーストして、行を増やしたり列を増やしたり、結合を試してみたりしてみましょう。
いじっているうちに、なーんとなく理解できてくるはずです。

なお、上の例みたいにテーブルに線を付けたい場合は、左メニューCSSリファレンスにあるボーダー/枠線の説明と、コピペ用サンプル集にあるテーブルサンプル集をご覧ください。