tableは表として使う

ホームページを構成する要素を大きく分けると、文字と画像（写真やイラストなど）ですが、実はこれら以外にも重要な要素があります。その一つにtable（テーブル）があります。

tableとは、机のことではありません。表です。

table（表）は本来、データを整理して見せるための手段でしたが、ホームページ画面のレイアウトに使われるようになっていきました。画面を縦三つに分けたり、文字の流れに沿わない位置に画像を置いたりする場合、どうしても既存のHTMLだけでは表現できない場合が多かったからです。それ故、以前は、多くのホームページ制作者がtableを多用して見栄えの良いページを作っていました。

下にあるように、tableを使い、仕切り線を見えなくすると、文字をレイアウトできます。この方法は、結構長い間、利用されてきました。

しかしtableは本来、レイアウトをするためのものではありません。縦と横のマス目に内容を分けることで、見やすく、理解しやすくするためのものです。目的外使用がされていたtableですが、CSS（後述）の普及によってだんだんレイアウトには使われなくなっていきました。今でもtableでレイアウトをしているホームページは残っていますが、非常に少なくなっています。またtableを使って、思うようなレイアウトをしようとすると構造が複雑になり、データ量が多くなっていきます。さらにSEO対策（※）においては、tableでのレイアウトは不適切であるといわれることもあるため、ますますCSSを用いたレイアウトへと移り、今ではCSSの使用が前提となっていると言っても過言ではありません。

とはいえtableが全く使われなくなったわけではありません。表として表現したい場合はtableを使うことが推奨されており、今でも重要なアイテムです。

tableを作ってみる

では、tableをHTMLで表してみます。tableの下にそのHTMLを置きました（Webオーサリングツールを使えば、クリック一つで簡単にtableを作れます）。

初めに<table>というタグを置き、ここからtableが始まることを示します。その右にある「width」はtableの幅です。100％だと画面いっぱいになります。tableがtableの中にあったり、後述のCSSのボックスの中に置かれていたりすると、その幅いっぱいになります。これは％だけでなく、ピクセル値でも表現できます。「width="250"」とすれば、幅250ピクセルになります。以前は、多くのノートタイプコンピュータの画面幅が1024ピクセルでしたので、250ピクセルがどれくらいかは、そこから感じ取ることができますね。

「border」は仕切り線の太さです。現在は「1」ですが、「0」だと表の仕切り線が見えません。見えないことを利用して、tableがレイアウトに利用されていました。

「cellpadding」は、セル（マス目）内の余白（padding）のことです。文字を仕切り線からどれくらい離すかを指定できます。上のtableでは3ピクセル離れています。

「cellspacing」は、セル（マス目）とセルの間のことです。上記の余白と間違えやすいですが、このセル間隔と上記のセル余白をうまく使いこなすと、いろいろな形のtableを作ることができます。

「tr」は表の横の並びです。<tr>から</tr>までのブロックが三つあります。つまり横の並び（行といいます）が三つ（3行）あるということです。

「td」は、マス目一つをさします。<tr>から</tr>の間に<td>○○</td>が三つあります。つまり1行に三つのマス目がある形になります。

セルの順番に注意

さて、tableで内容を表現する場合、その並び順に注意しましょう。縦横どこに置いても問題ないように思われがちですが、実はtableの内容（セル）には順番があります。

上記の３×３のテーブルの場合で見てみましょう。下に同じものを再度出します。

内容（セル）の一番は左上（1a）です。その次は「1b」か「2a」のどちらかだと想像できますが、実はこれ、決まっています。次は「1b」です。その次が「1c」。そして「2a」へと続きます。こんな順番はどうでもいいことのように思われがちですが、コンピュータがデータを読んでいく順番ですので、重要になる場合があります。また目の見えない方もホームページの内容を読み上げるソフトによってネットを楽しんでいらっしゃいますが、そのソフトがテーブルを読む際、上記の順で読んでいきます。だから「1a」の次に「2a」の内容がくるような組み方をすると、訳が分からなくなってしまいます。注意しましょう。