テーブルのページ
テーブルの基本
| table | テーブルの外枠 |
| tr | テーブルの行 |
| td | テーブルのセル |
1．最もシンプルなテーブル
- ＜table＞〜＜/table＞でテーブルの外枠部分を記述
- ＜tｒ＞〜＜/tｒ＞で行を記述
- ＜td＞〜＜/td＞内に打ったものがセル内に表示される
- テーブルの骨格を分かりやすく表示するために"border"で表示させる
2．テーブルの列を増やす
＜tr＞〜＜/tr＞内にいくつ＜td＞〜＜/td＞かがあるかで列の数が決まる
3．テーブルの行を増やす
＜tr＞〜＜/tr＞内にいくつ＜td＞〜＜/td＞かがあるかで列の数が決まる
各行で列数が異なる矛盾を避けるため、行ごとコピーしてtd内を打ちかえる
4．テーブルのサイズの変換
各セルの大きさは中身に合わせて自動で伸縮する
カレンダー
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
| | | | | 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で幅を指定できる
％で指定するとブラウザ幅に応じた可変サイズ
6．テーブルのサイズ指定(絶対指定)
heightで高さを指定できる
ピクセルで指定すると指定した幅でテーブルが作られる
7．セルのサイズ指定(絶対指定)
widthはtdにも指定できる
heightはtr(td)にも指定できる(各行ひとつのみ)
8．背景色
bgcolorで背景色を指定できる
heightはtr(td)にも指定できる(各行ひとつのみ)
今日のひとこと
| 感想 | テーブルのtrやtdよく間違える;;ややこしい！ |
テーブルの復習
9.テーブルの整列
alignで水平方向の揃え
valignで垂直方向の揃え(top=上/bothom=下)
セルの結合
10.列の結合 (colspan)
- colspanを入れたセルから属性値に入れた分だけ列が結合される
- 列が結合されるとその分だけ列は減る
- 減った列は自分で＜td＞〜＜/td＞を減らして調整しなければならない
11．行の結合（rowspan)
- rowspanを入れたセルから属性値に入れた分だけ行が結合される
- 結合された下の行のセル（列）がなくなるのでその分下の行の列が減る
- 減った行は自分で＜td＞〜＜/td＞を減らして調整しなければならない
例題1
例題2
12．セルの余白
cell でセルと文字の間に余白(マージン)ができる
13．セルとセルの間隔(cellspacing)
cell でセルと文字の間に余白(マージン)ができる
cellspacingとborderを0にするとセルとセルとの間がくっつく
今日のひとこと
練習問題できた、うれしい＾＾！
| table | tr | tr |
| border | ● | | |
| cellspacing | ● | | |
| cellspacing | ● | | |
| width | ● | | ● |
| height | ● | ● | ● |
| bgcolor | ● | ● | ● |
| bacground | ● | ○ | ● |
| align | ● | ● | ● |
| colspan | | | ● |
| rowspan | | | ● |