テーブルのページ

テーブルの基本

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

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.テールのサイズの変化

＜tr＞〜＜/tr＞内にいくつ＜td＞〜＜/td＞があるかで列の数が決まる
111222333
456
各セルの大きさは中身に合わせて自動で伸縮する

カレンダー

月火水木金土日
　　　　123
45678910
11121314151617
18192021222324
252627282930

5.テールのサイズ指定（相対指定）

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

6.テールのサイズ指定（相対指定）

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

7.セルのサイズ指定（相対指定）

widthはtdにも指定できる
111222333
456
heightはtr（td）にも指定できる（各行ひとつのみ）

8.背景色

bgcolorで背景色を指定できる
111>222333
456

きょうのひとこと

感想細かい入力をたくさんしましたが、間違いなく入力することができてよかったです。

テーブルの復習

111222333
456

9.テーブルの整列

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

セルの結合

10.列の結合（colspan）

111222333
456

11.行の結合（rowspan）

111222333
56

例題1

12345
12345

例題2

12
35794
6
8
10

12.セルの余白（cellpadding）

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

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

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

今日のひとこと

例題1はできましたが、例題2が難しかったです。
tabletrtd
border●　　
cellspacing●　　
cellpadding●　　
width●　●
hight●●●
bgcolor●●●
background●○●
align●●●
valign　●●
colspan　　●
rowcolspan　　●