テーブル要素は、「表」を作成する命令です。
テーブルは、セルの大きさを計算する際にかなりPCに負担をかけます。結果として、必要以上に大きいテーブルや
いい加減な作りのテーブルは表示に時間がかかります。「ページは軽い方がいい」がサイトの大原則なので、
これでは困ります。それを避けるために、制作者側に出来ることは前もってやっておくことが大切です。
具体的には、テーブルの幅、セルの幅、パディング（余裕）やスペーシング（隙間）そして枠線、
これらの指定（後述）をプログラムに必ず書くようにすれば、
ブラウザとパソコンに対する負担が減り、結果として早く表示されるようになります。
本当は、セルの高さも指定できますが、非推奨（マナー違反、または将来廃止される）属性とされています。
また、画面上にはレンダリングされませんが、読み上げブラウザ用の「サマリー（summary）属性」は、必須とされています。
サマリー属性は、テーブルの内容を解説する文章をその属性値に書き込むことが出来ます。
これは、テーブルという要素が他の要素よりも「文章として」理解しにくいための「読み上げブラウザ」向け措置です。
まず、下のような基本的なテーブルを作ってみます。
| １のＡ | １のＢ | １のＣ |
| ２のＡ | ２のＢ | ２のＣ |
基本プログラム文
<table width="450"> <tr> <td width="150">１のＡ</td> <td width="150">１のＢ</td> <td width="150">１のＣ</td> </tr> <tr> <td>２のＡ</td> <td>２のＢ</td> <td>２のＣ</td> </tr> </table>
テーブル要素は常に「子要素」と「孫要素」を持ちます。
テーブルの子要素は「ｔｒ（テーブルライン）」要素といって「１行に表す範囲」を定める要素です。
「ｔｒ」の子要素（テーブルの孫要素）は、「ｔｄ（テーブルデータ？）」といって実際の中身を書く要素です。
<table>・・・</table> の組み合わせは１セット。これで１つのテーブルを作るので当たり前です。 これを２個書いたら、表が２つ出来てしまいます。
<tr>・・・</tr> の組み合わせはこの場合１ｔａｂｌｅ内に２セットあります。 ２セットあるので、２行の表が出来ます。３セットあれば３行の表が出来ます。
<td>・・・</td> の組み合わせはこの場合１ｔｒ内に３セットずつあります。 ３セットずつあるので、１行の中に含まれる列は３列になります。 また、「<td>・・・</td>」で定義される範囲を「セル」と呼びます。「エクセル」など表計算ソフトで いう「１マス」のことで、これも全く同じ意味です。
テーブルには必ずワイド属性を付けなければなりません。 これがないと、１マス（セル）の幅をブラウザが勝手に判断してテーブルの大きさを決めてしまいます。 それでは、絶対に思ったような見栄えになりません（特に他人のパソコンでは！）。
書き方は「width="数値"」で、この数値の単位はピクセルです。 現在（２００２年）のところ、パソコンのモニター幅が１０２４または８００が標準とされているので、 テーブルの幅も、「最低８００以下」にしてブラウザの横スクロール使わなくても済むようにします。
実際にはこのプログラムに必ず様々な属性をつけ加えます。
| 「ホムペ作成」のインデックスに戻る | 次のページ（テーブル要素２）へ |