テーブルのページ

テーブルの基本

テーブルのタグ

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

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

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

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

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

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

1	2	3
4	5	6

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

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

111	222	333
4	5	6

カレンダー

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

テーブルタグの属性

5.テーブルの幅指定（相対指定）

widthで幅を指定できる

111	222	333
4	5	6

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

6.テーブルの幅指定（絶対指定）

widthで幅を指定できる

111	222	333
4	5	6

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

6-2.テーブルの高さ指定（絶対指定）

heightで高さを指定できる

111	222	333
4	5	6

高さは内容によって変化するのであまり使われない

7.セルのサイズ指定（絶対指定）

widthはtdにも指定できる

111	222	333
4	5	6

heightはtr(td)にも指定できる（各行ひとつ）

8.bgcolor

bgcolorで背景色を指定できる

111	222	333
4	5	6

table,tr,tdどれにつけるかで指定される範囲が変わる

9.水平揃え（align）

alignで水平方向の揃えを指定できる

111	222	333
4	5	6

table,tr,tdどれにつけるかで指定される範囲が変わる

10.垂直揃え（valign）

valignで垂直方向の揃えを指定できる

111	222	333
4	5	6

tr,tdどれにつけるかで指定される範囲が変わる

きょうのひとこと

テーブルを作るのもDWと違ってひとつひとつ打つのが大変だと思った

テーブルの復習

111	222	333
4	5	6

11.列（col）の結合

colspanで指定した分だけセル（列）を結合できる

111	222333
4	5	6

結合して減る分のセル（列）は自分で削除する必要がある

12.行（row）の結合

rowspanで指定した分だけセル（行）を結合できる

1114	222	333
1114	5	6

高さは内容によって変化するのであまり使われない

例題1

1	2345
1	2	3	4	5

1	2
3579	4
	6
	8
	10

13.セルの余白

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

111	222	333
4	5	6

14.セルとセルの間隔

cellspacingでセルとセルの間の骨格部分のサイズを指定できる

111	222	333
4	5	6

borderとcellspacingを0にするとセル同士が見えなくなりくっつくのでこの状態でレイアウトに用いられる

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30