10月の授業日記

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

1
  1. ＜table＞～＜/table＞で外枠部分を記述
  2. ＜tr＞～＜/tr＞で行を記述
  3. ＜td＞～＜/td＞で列を記述
  4. 外枠部分をわかりやすくするためbroder=1で枠を表示

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

＜table＞～＜/table＞内にいくつ＜tr＞～＜/tr＞があるかで行の数が決まる
123

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

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

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

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

かれんだー

月火水木金土日
　　12345
6789101112
13141516171819
20212223242526
27282930　　　

テーブルの属性

5.テーブルの幅の指定（相対指定）

widthで幅を指定できる
111222333
456
%で指定するとブラウザの幅に応じた可変サイズ

5-2.テーブルの幅の指定（絶対指定）

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

6.テーブルの高さの指定（絶対指定）

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どれにつけるかで指定される範囲が変わる

11.列(col)の結合

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

12.行(row)の結合

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

例題1

1 2345
12345

例題2

12
35794
6
8
10

13.セルの余白（cellpadding）

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

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

cellspacingでセルとセルの間の骨格部分のサイズを指定できる
111222333
456
border=0と組み合わせるとセルがくっつく