テーブルのページ

なまえ

さや

趣味

映画鑑賞　旅行

好きなもの

基本何でも好き

嫌いな食べ物

ばなな

テーブルの基本

テーブルのタグ

＜table＞テーブルの外枠
＜tr＞テーブルの行（table Row）
＜td＞テーブルのセル(列)(Table Dat a)

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
8910111 21314
15161718192021
22232425262728
293031

テーブルのタグの属性

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

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

6.テーブルの幅指定(絶対指定)

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

6-2.テーブルの高さ指定(絶対指定)

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

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

widthはtdにも指定できる 111
222333
456
heightは(td)にも指定できる(各行ひとつ)

8.背景色(bgcolor)

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

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

9.水平揃え(align)

alignで水平揃えを指定できる
月火水木金土日
1234567
8910111 21314
15161718192021
22232425262728
293031
111 333
222
456
table,tr,tdどれにつけるかで指定できる範囲が変わる

9-2.垂直揃え(valign)

valignで垂直揃えを指定できる 111 333
222
456
table,tr,tdどれにつけるかで指定できる範囲が変わる

テーブルの復習

111222333
456

10.列（col）の結合

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

11.行（row）の結合

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

例題1

1112345
123

12.セルの余白

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

13.セルとセルの間隔

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