テーブルのページ



テーブルの基本

テーブルのタグ

1.もっともシンプルなテーブル

  1. <table>〜</table>でテーブルの外枠部分を記述
  2. <tr>〜</tr>で行を指定
  3. 行の中の<td>〜</td>に打ったものがセル内に表示される
  4. border="1"でわかりやすくするためにテーブルの骨格を表示
tableテーブルの外枠
trテーブルの行(table row)
tdテーブルのセル(列)(table data)
1

2.テーブルの列を増やす

<tr>〜</tr>のなかにいくつ<td>〜</td>があるかで列の数が決まる
1
2
3

3.テーブルの行を増やす

<table>〜</table>のなかにいくつ<tr>〜</tr>があるかで行数が決まる
1
2
3
4
5
6
1行目と2行目で列数が違う矛盾を避けるため、行ごとコピーしてtd内を打ちかえる

4.テーブルの幅の変化

111
222
3333
4
5
6
テーブル、各セルの大きさは中身に合わせて自動で伸縮する

カレンダー

 123456
78910111213
14151617181920
21222324252627
282930    
<td>〜</td>のなかが空だとセルはへこまない
代わりに全角スペースを入れることでへこませている

テーブルの復習

123
456

12月のカレンダー

   1234
567891011
12131415161718
19202122232425
262728293031 

5.テーブルのサイズ指定(相対指定)

111222333
456

6.テーブルのサイズ指定(絶対指定)

111222333
456

7.セルのサイズ指定(絶対指定)

111222333
456

8.bgcolor

111222333
456

9.テーブルのアライン

111222333
456

10.セルの余白

111222333
456
セルとセルの端に注目

10.セルの余白

111222333
456
cellspacing="10"の場合
111222333
456
cellspacing="0" border="0"にするとセル同士がくっつく

12.列の結合

111222333
456
いらなくなった<td>〜</td>は自分で削除

13.行の結合

1114222333
56