テーブルのページ
テーブルの基本
テーブルのタグ
＜table＞
テーブルの外枠
＜tr＞
テーブルの行
＜td＞
テーブルのセル(列)
| table | >テーブルの外枠 |
| table | テーブルの行（Table Row） |
| テーブルのセル | テーブルの行（Table Date） |
1.もっともシンプルなテーブル
- ＜table＞〜＜/table＞でテーブルの外枠部分を記述
- ＜tr＞〜＜/tr＞で行を指定
- ＜td＞〜＜/td＞内に打ったものがセル内に表示される
- テーブルの骨格をわかりやすくするためにborder="1"で表示させる
2.テーブルの列を増やす
＜tr＞〜＜/tr＞内にいくつ＜td＞〜＜/td＞があるかで列の数が決まる
3.テーブルの行を増やす
＜table＞〜＜/table＞内にいくつ＜tr＞〜＜/tr＞があるかで行の数が決まる
1行目と2行目で列数が違う矛盾を避けるため、行ごとコピーしてtd内を打ちかえる
テーブルの幅の変化
各セルの大きさは中身に合わせて自動で伸縮する
カレンダー
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
| | | | | 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.テーブルのサイズ指定(相対指定)
6.テーブルのサイズ指定(絶対指定)
7.セルのサイズ指定
8.bgcolor
カレンダーを色分け
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
| | | | | 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 | |
9.テーブルのアライン
- align=水平方向の揃え(center/right)
- valign=垂直方向の揃え(top/bottom)
10.セルの余白
セルと文字の間に余白(マージン)ができる
11.セルとセルの間隔
- border=0にすると枠線の影の部分がなくなり平面的になる
- cellspacing=0にするとセルとセルの間隔が狭くなりくっつく
- この二つを組み合わせないとくっつかない
12.列の結合
- colspan属性を入れたセルから属性値に入れた数だけ列が結合される
- 列が結合されると結合された分だけ列は減る
- 減った列は自分で＜td＞〜＜/td＞を減らして調整しなければならない
13.行の結合
- rowlspan属性を入れたセルから属性値に入れた数だけ行が結合される
- 結合された下の行のセル(列)がなくなるのでそのぶん下の行の列が減る
- 減った列は自分で＜td＞〜＜/td＞を減らして調整しなければならない
| 今日のひとこと | まだ内容を覚えていないので難しかったです。 |
セルの結合の復習
問題1
| 1行1列目 | 1行2列目 |
| 2行1列目 | 2行2列目 | 2行3列目 | 2行4列目 | 2行5列目 |
問題2
| 1行1列目 | 1行2列目 |
| 2行1列目 | 2行2列目 |
| 3行2列目 |
| 4行2列目 |
| 5行2列目 |