（8）テーブルは表のこと
ホームページを構成する要素を大きく分けると、文字と画像（写真やイラストなど）ですが、実はこれら以外にも重要な要素があります。その一つにテーブルがあります。
テーブルとは、机のことではありません。表のことです（下図参照）。
テーブル（表）は本来、データを整理して見せるための手段でしたが、ホームページ画面のレイアウトに使われるようになっていきました。画面を縦三つに分けたり、文字の流れに沿わない位置に画像を置いたりする場合、どうしても既存のHTMLだけでは表現できない場合が多かったからです。それ故、少し前までは、多くのホームページ制作者がテーブルを多用して見栄えの良いホームページを作っていました。
下の図のように、テーブルを使い、仕切り線を見えなくすると、文字をレイアウトできます。この方法、結構長い間、利用されてきました。
しかしテーブルは本来、レイアウトをするためのものではありません。縦と横のマス目に内容を分けることで、見やすく、理解しやすくするためのものです。目的外使用がされていたテーブルですが、CSS（後述）の普及によってだんだんレイアウトには使われなくなっていきました。今でもテーブルでレイアウトをしているホームページは残っていますが、少なくなってきています。またテーブルを使って、思うようなレイアウトをしようとすると構造が複雑になり、データ量が多くなっていきます。さらにSEO対策（※）においては、テーブルでのレイアウトは不適切であるといわれることもあるため、ますますCSSを用いたレイアウトへと移っています。
※「検索エンジン最適化対策」と呼ばれる。GoogleやYahooなどで検索したとき、自分のホームページが上位に出てくるよう対策を施すこと。
とはいえテーブルが全く使われなくなったわけではありません。表として表現したい場合はテーブルを使うことが推奨されており、今でも重要なアイテムです。
では、テーブルをHTMLで表してみます。テーブルの下にそのHTMLを置きました。
| 1a | 1b | 1c |
| 2a | 2b | 2c |
| 3a | 3b | 3c |
<table width="100%" border="1" cellpadding="3" cellspacing="5">
<tr>
<td>1a</td>
<td>1b</td>
<td>1c</td>
</tr>
<tr>
<td>2a</td>
<td>2b</td>
<td>2c</td>
</tr>
<tr>
<td>3a</td>
<td>3b</td>
<td>3c</td>
</tr>
</table>
初めに「table」というタグを置き、ここからテーブルが始まることを示します。その右にある「width」はテーブルの幅です。100％だと画面いっぱいになります。テーブルがテーブルの中にあったり、後述のCSSのボックスの中に置かれていたりすると、その幅いっぱいになります。これは％だけでなく、ピクセル値でも表現できます。「width="250"」とすれば、幅250ピクセルになります。多くのノートタイプコンピュータの画面幅は1024ピクセルですので、250ピクセルがどれくらいかは、そこから感じ取ることができますね。
「border」は仕切り線の太さです。現在は「1」ですが、「0」だと表の仕切り線が見えません。見えないことを利用して、テーブルがレイアウトに利用されていました。
「cellpadding」は、セル（マス目）内の余白（padding）のことです。文字を仕切り線からどれくらい離すかを指定できます。上のテーブルでは3ピクセル離れています。
「cellspacing」は、セル（マス目）とセルの間のことです。上記の余白と間違えやすいですが、このセル間隔と上記のセル余白をうまく使いこなすと、いろいろな形のテーブルを作ることができます。
「tr」は表の横の並びです。<tr>から</tr>までのブロックが三つあります。つまり横の並び（行といいます）が三つあるということです。
「td」は、マス目一つをさします。<tr>から</tr>の間に<td>が三つあります。つまり1行に三つのマス目があるという形になります。
セルの順番に注意
さて、テーブルで内容を表現する場合、その並び順に注意しましょう。縦横どこに置いても問題ないように思われがちですが、実はテーブルの内容（セル）には順番があります。
上記の３×３のテーブルの場合で見てみましょう。下に同じものを再度出します。
| 1a | 1b | 1c |
| 2a | 2b | 2c |
| 3a | 3b | 3c |
内容（セル）の一番は左上（1a）です。その次は「1b」か「2a」のどちらかだと想像できますが、実はこれ、決まっています。次は「1b」です。その次が「1c」。そして「2a」へと続きます。こんな順番はどうでもいいことのように思われがちですが、コンピュータがデータを読んでいく順番ですので、重要になる場合があります。また目の見えない方も、ホームページの内容を読み上げるソフトによってネットを楽しんでいらっしゃいますが、そのソフトがテーブルを読む際、上記の順で読んでいきます。だから「1a」の次に「2a」の内容がくるような組み方をすると、訳が分からなくなってしまいます。注意しましょう。
