テーブルのページ



テーブルの基本

テーブルのタグ

<table>

テーブルの外枠

<tr>

テーブルの行

<td>

テーブルのセル

テーブルのタグ

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

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

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

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

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

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

<table>〜</table>内にいくつ<tr>〜</tr>があるかで行の数が決まる
123
456
1行目と2行目で列数が違う矛盾を避けるため、行ごとコピーしてtd内を打ち変える

4.テーブルの幅の変化

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

カレンダー

    123
45678910
11121314151617
18192021222324
252627282930 
<td>〜</td>が空だとセルはへこまない
代わりに全角スペースを入れることでへこませている
きょうのひとこと感想をテーブルで作りました

テーブルタグの属性

5.テーブルのサイズ指定(相対指定)

111222333
456

6.テーブルのサイズ指定(絶対指定)

111222333
456

7.セルのサイズ指定

111222333
456

8.bgcolor

111222333
456

カレンダーに背景色をつける

    123
45678910
11121314151617
18192021222324
252627282930 

9.テーブルのアライン

111222333
456

10.セルの余白

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

11.セルとセルの間隔

111222333
456

12.列の結合(colspan)

111222333
456

13.行の結合(rowspan)

1114222333
56

セルの結合の再復習

123
45
123
46