テーブルのページ
テーブルの基本
| table | テーブルの外枠 |
| tr | テーブルの行(Table Row) |
| td | テーブルのセル（列）(Table Data) |
1.最もシンプルなテーブル
- ＜table＞〜＜/table＞でテーブルの外枠部分を記述
- ＜tr＞〜＜/tr＞で行を記述
- ＜td＞〜＜/td＞内に打ったものがセル内に表示される
- テーブルの骨格をわかりやすくするためにborder="1"で表示させる
2.テーブルの列を増やす
＜tr＞〜＜/tr＞内にいくつ＜td＞〜＜/td＞があるかで列の数が決まる
3.テーブルの行を増やす
＜table＞〜＜/table＞内にいくつ＜tr＞〜＜/tr＞があるかで行の数が決まる
各行で列数が異なる矛盾を避けるため、行ごとコピーして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)にも指定できる（各行ひとつのみ）
きょうのひとこと
テーブルの復習
9.テーブルの整列
alignで水平方向の揃え
valignで垂直方向の揃え（top=上/bottom=下）
10.列の結合(colspan)
- colspanを入れたセルから属性地に入れた分だけ列が結合される
- 列が結合されるとその分だけ列は減る
- 減った列は自分で＜td＞〜＜/td＞を減らして調整しなければならない
11.行の結合(rowspan)
| 1114 | 222333 |
| 5 | 6 |
- rowspanを入れたセルから属性地に入れた分だけ行が結合される
- 結合された下の行のセル(列)がなくなるのでその分下の行の列が減る
- 減った行は自分で＜td＞〜＜/td＞を減らして調整しなければならない
例題1
例題2
| 1 | 2 |
| 3579 | 4 |
| 6 |
| 8 |
| 10 | |
12.セルの余白
cellpaddingでセルと文字の間に余白(マージン)ができる
13.セルとセルの間隔(cellspacing)
cellspacingはセルとセルとの間の骨格部分の幅
cellspacingとborderを0にするとセルとセルの間がくっつく
きょうのひとこと
難しいと思っていましたが、身につけるととても役立ちそうなので取得したいです。
| table | tr | td |
| border | ● | | |
| cellspacing | ● | | |
| cellpadding | ● | | |
| width | ● | | ● |
| hight | ● | ● | ● |
| bgcolor | ● | ● | ● |
| background | ● | ○ | ● |
| align | ● | ● | ● |
| valign | | ● | ● |
| colspan | | | ● |
| rowspan | | | ● |