テーブルのページ

テーブルのタグ

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

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

1
  1. ＜table＞〜＜/table＞でテーブルの外枠部分を記述
  2. ＜tr＞〜＜/tr＞で行を記述
  3. ＜tr＞〜＜/tr＞で列を記述
  4. 外枠をわかりやすくためborderで表示

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

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

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

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

4.テーブルのサイズの変化

各セルのサイズは中身を応じて自動で伸縮する
111222333
456

カレンダー

月火水木金土日
　123456
78910111213
14151617181920
21222324252627
282930　　　　

テーブルの属性

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

widthで幅を指定できる width="80%"
111222333
456

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

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

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

widthで幅を指定できる 　width="450"　height="100"
111222333
456
高さは内容によって変化するのであまり使われない

7.セルの幅指定(絶対指定)

widthはtbにも指定できる 　width="450"
111222333
456
heighは(tr)tdにも指定できる

8.テーブルの水平揃え(align)

alignで水平揃えを指定できる 　width="450" align="center"
111222333
456
table,tr,tdどれにつけるかで指定される範囲が変わる

9.テーブルの垂直揃え(valign)

valignで垂直揃えを指定できる 　width="450" align="center"
111222333
456
table,tr,tdどれにつけるかで指定される範囲が変わる

10.テーブルの背景色(bgcolor)

bgcolorで背景色を指定できる 　width="450" align="center" bgcolor="gray" 4
111333
56
table,tr,tdどれにつけるかで指定される範囲が変わる
今日の一言！良い良い良いです！

テーブルの復讐

123
456

10.列(colの結合)

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

11.行(rowの結合)

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

12.セルの余白(cellpadding)

cellpaddingでセルと内容物の余白を指定できる 4
111333
56

13.セルとセルの間隔(cellspacing)

cellspacingでセルとセルの間の骨格部分のサイズを指定できる。 4
111333
56
cellspacing=0とborder=0を組み合わせるとくっつきテーブルできないように見えるこの状態でレイアウトに用いてる