テーブルのページ

テーブルの基本

テーブルのタグ

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

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

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

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

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

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

各セルの大きさは中身に応じて自動で伸縮する
111222333
444555666

カレンダー

月火水木金土日
　　　　　　1
2345678
9101112131415
16171819202122
23242526272829
30　　　　　　

テーブルタグの属性

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

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

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

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

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

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

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

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

8.bgcolor

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

9.水平揃え(align)

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

10.垂直揃え(valign)

valignで垂直方向のそろえを指定できる
111222333
444555666
tr,tdどれにつけるかで指定される範囲が変わる
きょうのひとこと
セルの幅を変えたり、高さを変えることが簡単じゃなくなったので難しい。 ただ、行と列を増やすのが楽になった気がした。

テーブルの復習

111222333
456

11.列(col)の結合

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

12.行(row)の結合

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

例題1

12345
12345

例題2

12
35794
6
8
10

13.セルの余白

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

14.セルとセルの間隔

cellspacingでセルとセルの間の骨格部分のサイズを指定できる
111222333
456
borderとcellspacingを0にするとセル同士が見えなくなりくっつくのでレイアウトに用いられる

きょうのひとこと

余白をつくったり、間隔をあけるだけで見た目が変わって見やすくなったと思う