テーブルのページ

テーブルの基本

テーブルのタグ

＜table＞テーブルの外枠
＜tr＞テーブルの行(Table Row)

1.最もシンプルなテーブル

1
  1. ＜table＞～＜/table＞でテーブルの外枠部分を記述
  2. ＜tr＞～＜/tr＞で行を記述
  3. ＜td＞～＜/td＞内に打ったものがセル内に表示される
  4. テーブルの外枠を分かりやすくするためにborder=1で表示させる

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

＜tr＞～＜/tr＞内にいくつ＜td＞～＜/td＞があるかで列の数が決まる
123

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

＜table＞～＜/table＞内にいくつ＜tr＞～＜/tr＞があるかで行の数が決まる
123
456

4.のサイズの変化

各セルの大きさは中身に合わせて自動で収縮する
111222333
456

カレンダー

月火水木金土日
1234567
891011121314
15161718192021
22232425262728
293031　　　　

テーブルのタグの属性

5.テーブルの幅指定(相対指定)

widthで幅を指定できる
111222333
456
％で指定するとブラウザの幅に応じた可変サイズ

6.テーブルの幅指定(絶対指定)

widthで幅を指定できる
111222333
456
ピクセルを指定すると指定した幅でテーブルが作られる

6-2.テーブルの高さ指定(絶対指定)

heightで高さを指定できる
111222333
456
高さは内容によって変化するのであまり使用されない

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

widthでtdにも指定できる
111222333
456
heightはtr(td)にも指定できる(各行ひとつ)

8.背景色(bgcolor)

widthでtdにも指定できる
111222333
456
table,tr,tdどれにつけるかで指定できる範囲がかわる

テーブルの復習

111222333
456

10.列(col)の結合

colspanで指定指定した分だけセル(列を結合できる)
111222333
456
結合で減る分のセル(列)は自分で削除する必要がある

11.行(row)の結合

rowspanで指定した分だけセル(行)を結合できる
1114222333
56
結合で減る分のセル(列)は自分で削除する必要がある

例題1

12345
12345

例題2

12
35794
6
8
10

12.セルの余白

cellpaddingでセルと内容物との余白を指定できる
111222333
456

12.セルとセルの間隔

cellspacingでセルとセルの間の骨格部分のサイズを指定できる
111222333
456
border="0"と組み合わせてレイアウトに用いられる