テーブルのページ
テーブルの基本
テーブルのタグ
| 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 | | | | |
＜td＞〜＜/td＞の中が空だとセルはへこまない
代わりに全角スペースを入れることでとへこませている
12月のカレンダー
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
| | | | 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 | 31 | |
テーブルタグの属性
5.テーブルのサイズ指定（相対指定）
＜table width="**%"＞でブラウザウインドー幅に応じて可変する相対値指定となる
6.テーブルのサイズ指定（絶対指定）
値に％をつけないとピクセル指定による固定幅となる
高さはheight属性
7.セルのサイズ指定
＜td＞にサイズ指定をするとそのセルのみサイズ指定ができる
合計値などが間違った指定をすると正しくテーブルが表示されなくなるので必要最低限の指定にとどめる
8.bgcolor
bgcolor属性でテーブル全体、もしくはセルの背景色を指定できる
tableに指定するとテーブル全体の背景色
tdでセル、trで行全体に指定できる
9.テーブルのアライン
水平揃えはalign垂直揃えはvalign
10.セルの余白(cellpadding)
テーブルタグにつけるcellpadding属性でセルと内容物の間にマージンをつけられる
11.セルとセルの間隔(cellspacing)
- テーブルのボーダーを0にすると骨格の影の部分がなくなる
- 骨格部分はcellspacingで太さが決まる。0にするとくっつく
12.列の結合
col(列)span(またがる)=何列分
結合した分の＜td＞〜＜/td＞を自分で消す
13.行の結合
row(行)span(またがる)=何行分
結合した分の＜td＞〜＜/td＞を自分で消す