テーブルのページ
テープルタグ
| table | テーブルの外枠 |
| tr | テーブルの行(Table Row) |
| td | テーブルの列(Table Data) |
1.最もシンプルなテーブル
- ＜table＞~＜/table＞で外枠部分を記述
- ＜tr＞~＜/tr＞で行き記述
- ＜td＞~＜/td＞列を記述
2.テーブルの列を増やす
＜tr＞~＜/tr＞内にいつく＜tr＞~＜/tr＞があるかで列の数がきまる
3.テーブルの列を増やす
＜tr＞~＜/tr＞内にいつく＜tr＞~＜/tr＞があるかで列の数がきまる
4.テーブルの幅の変化
各セルのサイズは中身に応じて自動で伸縮する
11月のカレンダー
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
| | | 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 | | | |
テーブルの属性
５.テーブルの幅の指定(相対配置)
widthで幅を指定できる
%で指定するとブラウザの幅に応じた可変サイズ
５-2.テーブルの幅の指定(絶対配置)
widthで幅を指定できる
ピクセルで指定すると指定した幅でテーブルか作られる
6.テーブルの高さの指定(絶対配置)
Heightで高さを指定できる
ピクセルで指定すると指定した高さでテーブルか作られる
7.セルのサイズ指定(絶対配置)
widthはtdにも指定できる
heightはtr(td)にも指定できる
8.水平揃え(align)
valignで水平方向の揃えを指定できる
table,tr,tdどれにつれるかで適用される範囲が変わる
9.垂直揃え(valign)
valignで垂直方向の揃えを指定できる
table,tr,tdどれにつれるかで適用される範囲が変わる
10.背景色(bgcolor)
bgcolorで背景色を指定できる
table,tr,tdどれにつれるかで適用される範囲が変わる
テーブルの復習
11.列(col)の結合
colspanで指定した分だけセル(列)を結合できる
結合して減る分のセル(列)は自分で削除する必要
12.行(row)の結合
rowspanで指定し分だけセル(列)を結合できる
結合して減る分のセル(行)は自分で削除する必要
13.セルの余白(cellpadding)
cellpaddingでセルと内容物の余白を指定できる
cellpaddingでセルと内容物の余白を指定できる
14.セルとセルの間隔(cellspacing)
cellspacingでセルとセルの間の骨格部分のサイズを指定できる
border=0と組み合わせるとセルがくっつく
きょうのひとこと
今日はテーブルについて詳しく習いました。