テーブルのページ

テーブルの基本

テーブルのタグ

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

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)

bgcolorで背景色を指定できる
111222333
456
table,tr,tdどれにつけるかで指定できる範囲が変わる

カレンダーに背景色をつける

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

9.水平揃え(align)

alignで水平方向の揃えを指定できる
111222333
456
table,tr,tdどれにつけるかで指定できる範囲が変わる

9-2.垂直揃え(valign)

valignで垂直方向の揃えを指定できる
111222333
456
table,tr,tdどれにつけるかで指定できる範囲が変わる

テーブルの復習

111222333
456

10.列(col)の結合

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

11.行の結合

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

12.セルの余白

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

13.セルとセルの間隔

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