テーブルのページ

テーブルの基本

tableテーブルの外枠
trテーブルの行（Table Row）
tdテーブルの列（Table Row）

(=^・・^=)1.もっともシンプルなテーブル(=^・・^=)

1
  1. ＜table＞〜＜/table＞でテーブルの外枠部分を記述
  2. ＜tr＞〜＜/tr＞で行を記述
  3. ＜td＞〜＜/td＞内に打ったものがセル内に表示される
  4. テーブルの骨格を分かりやすくするためにborder="1"で表示させる

(=^・・^=)2.テーブルの列を増やす(=^・・^=)

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

(=^・・^=)3.テーブルの行を増やす(=^・・^=)

＜tr＞〜＜/tr＞内にいくつ＜td＞〜＜/td＞があるかで行の数が決まる
123
456
各行で列数が異なる矛盾を避けるため、行ごとコピーしてtd内を打ちかえる

(=^・・^=)4.テーブルのサイズの変化(=^・・^=)

111222333
456
各セルの大きさは中身に合わせて自動で伸縮する

(=^・・^=)5.テーブルのサイズ指定（相対指定）(=^・・^=)

widthで幅を指定できる
月火水木金土日
　　　　123
45678910
11121314151617
18192021222324
252627282930
111222333
456
％で指定するとブラウザの幅に応じた可変サイズ

(=^・・^=)6.テーブルのサイズ指定（絶対指定）(=^・・^=)

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

(=^・・^=)7.セルのサイズ指定（絶対指定）(=^・・^=)

widthで幅を指定できる
111222333
456
heightはte(td)にも指定できる（各行ひとつのみ）

(=^・・^=)8.背景色(=^・・^=)

bgcolorで背景色を指定できる
111222333
456
heightはte(td)にも指定できる（各行ひとつのみ）

今日の一言

感想細かすぎて目が痛い。そして同じような作業が続いて眠くなる。

テーブルの復習

111222333
345

(=^・・^=)9.テーブルの整列(=^・・^=)

alignで水平方向の揃え
111222333
456
valignで垂直方向の揃え（top=上/bottom=下）

セルの結合

(=^・・^=)10.列の結合（colspan）(=^・・^=)

111222333
456

11.行の結合(rowspan)

1114222333
56

例題1

12345
12345

例題2

12
35794
6
8
10

12.セルの余白(cellpadding)

cellpaddingでセルと文字の間に余白（マージン）ができる
111222 333
456

13.セルの余白(cellspacing)

cellspacingはセルとセルとの間の骨格の幅
111222 333
456
cellspacingとborderを0にするとセルとセルの間がくっつく

今日の一言

一文字間違えるだけでわけがわからなくなる。
tabletrtd
border●　　
cellspacing●　　
cellpadding●　　
width●　●
hight●●●
bgcolor●●●
background●○●
align●●●
valign　●●
colspan　　●
rowspan　　●