テーブルのページ

テーブルのタグ

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

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

1
  1. ＜table＞〜＜/table＞でテーブルの外枠部分を記述
  2. ＜tr＞〜＜/tr＞で行を記述
  3. ＜td＞〜＜/td＞で列を記述
  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で幅を指定できる
111222333
456
%で指定するとブラウザの幅に応じた可変サイズ

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

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

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

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

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

widthはtdにも指定できる
111222333
456
heightは(tr)tdにも指定できる

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

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

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

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

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

bgcolorで背景色を指定できる
111222333
456
table,tr,td どれにつけるかで指定される範囲が変わる
きょうのひとこと表をつくるのにもいちいち時間がかかって大変

テーブルの復習

123
456

10.列 (col) の結合

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

11.行 (row) の結合

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

12.セルの余白 (cellpadding)

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

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

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

例題1

12345
12345

例題2

12
35794
6
8
10