テーブルのページ

テーブルのタグ

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.テーブルの高さ指定（絶対指定）

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

7.セルの幅指定（絶対指定）

widthはtdにも指定できる
111222333
456
heightは（tr）tdにも指定できる

8.テーブルの水平揃え（align）

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

9.テーブルの垂直揃え（valign）

valignで垂直方向の揃えを指定できる
111222333
456
table,tr,tdどれにつけるかで指定される範囲が変わる

10.テーブルの背景色（bgcolor）

bgcolorで背景色を指定できる
111222333
456
table,tr,tdどれにつけるかで指定される範囲が変わる
きょうのひとことテーブルのHTMLタグは難しい印象がありましたが、やってみれば覚えられそうで安心しました。

テーブルの復習

123
456

11.列（col）の結合

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

12.行（row）の結合

rowspanでを指定した分だけセル（行）を結合できる
1114222333
56
結合して減る分のセル（行）は自分で削除する必要

13.セルの余白（cellpadding）

cellpaddingでセルと内容物の余白を指定できる
111222333
456

14.セルとセルの間隔（cellspacing）

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

例題1

12345
12345

例題2

12
35794
6
8
10