テーブルのページ

テーブルの基本

テーブルのタグ

＜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
444	555	666

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

カレンダー

今日のひとこと

テーブルの作り方を習いました。 Htmlでテーブルを作るのはDWに比べると大変なことだと思いました。

テーブルの復習

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)
align=垂直方向の揃え (ctop/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列目	1行2列目
2行1列目	2行1列目	2行1列目	2行1列目	2行1列目

問題2

1行1列目	1行2列目
2行1列目	2行2列目
	2行1列目
	2行1列目
	2行1列目