テーブルのページ


テーブルのタグ

tableテーブルの外枠
trテーブルの行(Table Row)
tdテーブルの列(セル)(table Date)

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

1
  1. <table>〜</table>でテーブルの外枠部分を記述
  2. <tr>〜</tr>で行を記述
  3. <td>〜</td>で列を記述
  4. 外枠をわかりやすくするためborderで表示

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

<tr>〜</tr>内にいくつ<td>〜</td>があるかで列の数が決まる
123

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

<table>〜</table>内にいくつ<tr>〜</tr>があるかで行の数が決まる
123
456

4.テーブルのサイズの変化

各セルのサイズは中身に応じて自動で伸縮する
111222333
456

カレンダー

 123456
78910111213
14151617181920
21222324252627
282930    

テーブルの属性

5.テーブルの幅指定(相対指定)

widthで幅を指定できる
111222333
456

テーブルの属性

6.テーブルの幅指定(絶対指定)

widthで幅を指定できる
111222333
456
ピクセルで指定すると指定した幅でテーブルが作られる

6-2.テーブルの幅指定(絶対指定)

hightで高さを指定できる
111222333
456
高さは内容によって変化するのであまり使われない

7.テーブルの幅指定(絶対指定)

widthはtdnにも指定できる
111222333
456
heightは(tr)tdにも指定できる

8.テーブルの水平揃え(align)

alignで水平方向の揃えを指定できる
111222333
456
table,tr,tdどれにつけるかで指定される範囲は変わる

9.テーブルの垂直揃え(valign)

alignで水平方向の揃えを指定できる
111222333
456

10.テーブルの背景色(bgcolor)

bgcolorで背景色を指定できる
111222333
456
きょうのひとこと
テーブルを作るのが難しくて苦戦した

テーブルの復習

123
456

10.列(col)の結合

colspanで指定した分だけセル(列)を結合できる
111222333
456
結合して減る分のセル(列)は自分で削除する必要がある。

11.行(row)の結合

rowspanで指定した分だけセル(行)を結合できる
1114222333
56
結合して減る分のセル(列)は自分で削除する必要がある。

12.セルの余白(cellpadding)

cellpaddingで指定した分だけセル(列)を結合できる
111222333
456

13.セルとセルの間隔(cellspacing)

cellspacingでセルとセルの間の骨格部分のサイズを指定できる
111222333
456
cellspacing=0とborder=0を組み合わせるとくっつきテーブルではないように見えるこの状態でレイアウトに用いる

例題1

12345
12345

例題2

12
3579
6
8
10