テーブルのページ
テーブルのタグ
| table | テーブルの外枠 |
| tr | テーブルの行(Table Row) |
| td | テーブルの列(セル)(Table Data) |
1.最もシンプルなテーブル
- ＜table＞〜＜/table＞でテーブルの外枠部分を記述
- ＜tr＞〜＜/tr＞で行を記述
- ＜td＞〜＜/td＞で列を記述
- 外枠をわかりやすくするためborderで表示
2.テーブルの列を増やす
＜tr＞〜＜/tr＞内にいくつ＜td＞〜＜/td＞があるかで列の数が決まる
3.テーブルの行を増やす
＜table＞〜＜/table＞内にいくつ＜tr＞〜＜/tr＞があるかで行の数が決まる
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.テーブルの幅指定(絶対指定)
widthで幅を指定できる
ピクセルで指定すると指定した幅でテーブルが作られる
6-2.テーブルの高さ指定(絶対指定)
heightで高さを指定できる
高さは内容によって変化するのであまり使われない
7.セルの幅指定(絶対指定)
widthはtdにも指定できる
heightは(tr)tdにも指定できる
8.テーブルの水平揃え(align)
alignで水平方向の揃えを指定できる
table,tr,tdどれにつけるかで指定される範囲が変わる
9.テーブルの垂直揃え(valign)
valignで垂直方向の揃えを指定できる
table,tr,tdどれにつけるかで指定される範囲が変わる
10.テーブルの背景色(bgcolor)
bgcolorで背景色を指定できる
table,tr,tdどれにつけるかで指定される範囲が変わる
| きょうのひとこと | 今日の感想をテーブルで作ってください |
テーブルの復習
10.列(col)の結合
colspanで指定した分だけセル（列）を結合できる
結合して減る分のセル（列）は自分で削除する必要
11.行(row)の結合
rowspanで指定した分だけセル（行）を結合できる
結合して減る分のセル（列）は自分で削除する必要
12.セルの余白(cellpadding)
cellpaddingでセルと内容物の余白を指定できる
13.セルとセルの間隔(cellspacing)
cellspacingでセルとセルの間の骨格部分のサイズを指定できる
cellspacing=0とborder=0を組み合わせるとくっつきテーブルでないように見えるこの状態でレイアウトに用いる
例題1
例題2