テーブルを使うときには、必ず各セルに「幅」を指定します。その他の属性も含めて、 前項のプログラムを正式なプログラム文に直します。
属性付きプログラム文
| １のＡ | １のＢ | １のＣ |
| ２のＡ | ２のＢ | ２のＣ |
<table summary="２かける３のテーブル" width="450" cellpadding="1" cellspacing="1" border="1"> <tr> <td width="150">１のＡ</td> <td width="150">１のＢ</td> <td width="150">１のＣ</td> </tr> <tr> <td>２のＡ</td> <td>２のＢ</td> <td>２のＣ</td> </tr> </table>
最も基本的なテーブルです。パディング、スペーシング、ボーダーともに「1」に設定。テーブル全体の幅は「450」（ピクセル）、 セルの幅は同じ幅を取ってあります。 ２行目は、幅を指定する必要がありません。基本的には、幅は上の行のセルと同じにしなくてはいけないため、 同じ幅を指定しても無意味だからです。
セル内のテキストに関しては、なにも指定がなければ「左寄せ」でかつ「上下に同じスペースを持った位置」にレンダリングされます。
「summary（サマリー）」属性は表の内容の「要約」です。
「width（ワイド）」属性は表や「セル」の幅を指定します。
「cellpadding（セルパディング）」属性は「セル」内での余白を指定します。
「cellspacing（セルスペーシング）」属性は「セル」と「セル」の間の余白を指定します。
「border（ボーダー）」属性は仕切り線の太さを指定します。
枠線を消したり太くしたりするためのはtable開始タグに「border」属性を加えます。 「border="0"」なら枠線が消え、「border="3"」などなら太くなります。
IEのデフォルトではこの値が１に設定されていて、見た目に「良く言えば立体的」「悪く言えば野暮」な枠線が引かれます。 表計算ソフトのようなすっきりとした一本線を引くためには、 「cellspacing="0"」を「border="1"」と組み合わせて使います。 「cellspacing」を0に指定すればセル間の隙間が無くなるので、これと枠線の太さ「border」を1に設定したものと組み合わせれば 表計算ソフトと同様の枠線を作ることが出来ます。
セル内に書かれるテキストとセルの枠線までの距離を決めるのは「cellpadding="1"」です。 0なら枠線とテキストがくっついてしまいます。通常、2から5ぐらいの間に設定します。 ただし、「画像を隙間無く埋めたい」等の理由でわざと「cellpadding="0"」を設定することもあります。
これで、基本的なテーブルは全て書けます。馴れない内は、一度紙にテーブル（の予定・の叩き台）を書いてから 実際にプログラムすると間違えにくいです。
| 「ホムペ作成」のインデックスに戻る | 次のページ（テーブル要素３）へ |