テーブルのページ

＞home　＞6月の日記

テーブルの基本

1.最もシンプルなテーブル

1
＜table＞〜＜/table＞がテーブルの外枠を表す
＜tr＞〜＜/tr＞は行を表す
行内の＜td＞〜＜/td＞内に打ったものがセル内に表示される

2.テーブルの列を増やす

123
＜tr＞〜＜/tr＞のなかにいくつ＜td＞〜＜/td＞があるかで何列かが決まる

3.テーブルの行を増やす

123
456
＜table＞〜＜/table＞のなかにいくつ＜tr＞〜＜/tr＞があるかで何行かが決まる
各行の列数が異なってはいけないのでコピー＆ペーストを活用する

4.テーブルの幅の変化

111222333
456
各セルの大きさは中身に応じて変化する

テーブルのタグ

tableテーブルの外枠
trテーブルの行(table row)
tdテーブルのセル（列）(table data)

カレンダー

月火水木金土日
　123456
78910111213
14151617181920
21222324252627
282930　　　　
＜td＞〜＜/td＞内に値がないとセルはへこまない
空白には全角スペースを利用する

テーブルタグの属性

5.テーブルのサイズ指定（可変）

111222333
456
＜table width="**%"＞でブラウザウインドー幅に応じて可変する相対値指定となる

6.テーブルのサイズ指定（固定）

111222333
456
値に％をつけないとピクセル指定による固定幅となる

7.セルのサイズ指定

111222333
456
＜td＞にサイズ指定をするとそのセルのみサイズ指定ができる
合計値などが間違った指定をすると正しくテーブルが表示されなくなるので必要最低限の指定にとどめる

8.テーブルおよびセルの背景色

111222333
456

カレンダーを色分け

月火水木金土日
　123456
78910111213
14151617181920
21222324252627
282930　　　　

6/18 テーブル2

9.テーブルおよびセルのalign

111222333
456
水平方向はalign属性、垂直方向はvalign（vatical）属性(top/middle/bottom)で調整できる

テーブルを使ったレイアウト

10.セルの余白

111222333
456
cellpaddingでセルと中身との間に余白を入れられる

11.セルとセルの間隔

111222333
456
cellspacing="15"
111222333
456
cellspacing="0"とborder="0"にするとセル同士がくっつく

12.列の結合

列＝col
111222
456
＜td colspan="*"＞とすると設定したtdから*列分結合する
結合すると次列以降＜td＞〜＜/td＞が減ることになるので自分で減らし矛盾が起こらないようにする

13.行の結合

行＝row
111222
56
＜td rowspan="*"＞とすると設定したtdから*行分結合する
結合すると次行以降＜td＞〜＜/td＞が減ることになるので自分で減らし矛盾が起こらないようにする

練習問題

問題1
1行１列目1行2列目
2行１列目2行2列目2行3列目2行4列目2行5列目
問題2
1行１列目1行2列目
2行１列目2行2列目
3行2列目
4行2列目
5行2列目

14.テーブル・セルの背景画像

111222
56
＜tr background＞はIE非対応

最後の問題

1行１列目1行2列目1行3列目1行4列目1行5列目1行6列目
2行１列目2行2列目2行6列目
3行１列目3行6列目
4行１列目4行6列目
5行１列目5行6列目
6行１列目