テーブルのページ

＞homeへ戻る 　＞10月の授業日記 　＞11月の授業日記 　＞12月の授業日記

テーブルの基本

テーブルのタグ

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

テーブルのタグの属性

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

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

6.テーブルのサイズ指定(絶対指定)

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

6-2.テーブルのサイズ指定(絶対指定)

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

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

widthはtdにも指定できる
111222333
456
heightはtr（td）にも指定できる（各行ひとつ）

8.背景色

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

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

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

9.テーブルの水平揃え

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

9-2.テーブルの垂直揃え

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

テーブルの復習

123
456

10.列の結合

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

11.行の結合

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

例題1

12345
12345

例題2

12
35794
6
8
10

12.セルの余白

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

2.セルとセルの間隔

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