テーブルのページ

テーブルの基本

テーブルのタグ

＜table＞

テーブルの外枠

＜tr＞

テーブルの行

＜td＞

テーブルのセル（列）

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

1.もっともシンプルなテーブル

1

＜table＞～＜/table＞でテーブルの外枠部分を記述
＜tr＞～＜/tr＞で行を指定
行の中の＜td＞～＜/td＞内に打ったものがセル内に表示される
テーブルの骨格をわかりやすくするためにborder="1"で表示させる

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

1

2

3

＜tr＞～＜/tr＞内にいくつ＜td＞～＜/td＞があるかで列の数が決まる

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

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

1	2	3
4	5	6

1行目と2行目で列数が違う矛盾を避けるため、行ごとコピーしてtd内を打ちかえる

4.テーブルの幅の変化

111	222	333
4	5	6

各セルの大きさは中身に合わせて自動で伸縮する

カレンダー

きょうのひとこと

テーブル作りはなかなか面倒でした。

テーブルの復習

1	2	3
4	5	6

テーブルの属性

5. テーブルのサイズ指定(相対指定)

111	222	333
4	5	6

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

111	222	333
4	5	6

7. セルのサイズ指定

111	222	333
4	5	6

8. bgcolor

111	222	333
4	5	6

カレンダーを色分け

9. テーブルのアライン

111	222	333
4	5	6

align=水平方向のそろえ（center/right）
valign=垂直方向のそろえ（top/bottom）

10. セルの余白

111	222	333
4	5	6

セルと文字の間に余白（マージン）ができる

11. セルとセルの間隔

111	222	333
4	5	6

border=0にすると枠線の影の部分がなくなり平面的になる
cellspacing=0にするとセルとセルの間隔が狭くなりくっつく
この二つを組み合わせないとくっつかない

12. 列の結合

111	222333
4	5	6

colspan属性を入れたセルから属性値に入れた数だけ列が結合される
列が結合されると結合された分だけ列は減る
減った列は自分で＜td＞～＜/td＞を減らして調整しなければならない

13. 行の結合

111	222	333
111	5	6

rowspan属性を入れたセルから属性値に入れた数だけ行が結合される
結合された下の行のセル（列）がなくなるのでその分下の行の列が減る
減った列は自分で＜td＞～＜/td＞を減らして調整しなければならない

きょうのひとこと

色分けをするとき属性を入れる場所を探すのが難しかったです。

セルの結合の復習

1	2	3
4	5

1	2	3
4	2	6

問題1

1	2
3	4	5	6	7

問題2

1	2
3	4
	5
	6
	7