テーブルのページ

テーブルの基本

テーブルのタグ

＜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
456

カレンダー

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

テーブルタグの属性

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どれにつけるかで指定される範囲が変わる

9.水平揃え(align)

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

10.垂直揃え(valign)

valignで垂直方向の揃えを指定できる
111222333
456
tr,tdどれにつけるかで指定される範囲が変わる
きょうのひとこと次回はテーブルを使ってレイアウトをしていきます

テーブルの復習

111222333
456

11.列(col)の結合

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

12.行(row)の結合

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

例題1

112345
12345

例題2

12
35794
6
8
9

13.セルの余白

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

14.セルとセルの間隔

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