戻る

シンプルな表題

テーブルの上に、中央寄せで表題が表示される。

表題
1行1列目

表題とテーブルの間

IE の場合、表題とテーブル間はパディングで隙間を空けている。Mozilla はデフォルトは隙間が無い。

表題(padding: 0px)
1行1列目

テーブルの背景色

テーブルに背景色を設定しても、表題の背景色は透明。

表題
1行1列目

align="left"

テーブルの左に表題が表示される。

表題
1行1列目

align="right"

テーブルの右に表題が表示される。

表題
1行1列目

align="bottom"

テーブルの下に、中央寄せで表題が表示される。

表題
1行1列目

テーブル幅より長い表題

テーブル幅より広い表題は、折り返される。

テーブル幅よりとても長い表題
1行1列目

テーブル幅より長いが折り返せない表題

テーブル幅より広く、折り返せない表題がある場合、IE はテーブル幅自体も広がる。Mozilla はテーブル幅は変わらない。

veryveryveryveryverylongcaption
1行1列目

テーブルと表題のマージンの相殺

table、caption 共に margin: 10px 指定。テーブルと表題の間のマージンは相殺される。

前の段落(margin-bottom: 10px; border: 1px blue solid)
表題
1行1列目
後の段落(margin-top: 10px; border: 1px green solid)

テーブルと表題(align="left")のマージンの相殺

table、caption 共に margin: 10px 指定。テーブルと表題の間のマージンは相殺される。Mozilla の場合、テーブルと前後の段落間のマージンの打ち消しが起こらない(なぜ?)。

前の段落(margin-bottom: 10px; border: 1px blue solid)
表題
1行1列目
後の段落(margin-top: 10px; border: 1px green solid)

テーブルと表題(align="right")のマージンの相殺

table、caption 共に margin: 10px 指定。テーブルと表題の間のマージンは相殺される。

前の段落(margin-bottom: 10px; border: 1px blue solid)
表題
1行1列目
後の段落(margin-top: 10px; border: 1px green solid)

テーブルと表題(align="bottom")のマージンの相殺

table、caption 共に margin: 10px 指定。テーブルと表題の間のマージンは相殺される。

前の段落(margin-bottom: 10px; border: 1px blue solid)
表題
1行1列目
後の段落(margin-top: 10px; border: 1px green solid)

大きなテーブルと表題(align="left")のマージンの相殺

table、caption 共に margin: 10px 指定。テーブルと表題の間のマージンは相殺される。

表題
1行1列目。このセルの中身は画面の大きさに対してとても長く、自動で折り返される。このときテーブル幅は画面サイズより大きくなることは無い。もっとも、ものすごく大きなディスプレイを使っていたり、仮想デスクトップのサイズが大きい場合は、折り返せずに表示されるかもしれない・・・。

大きなテーブルと表題(align="right")のマージンの相殺

table、caption 共に margin: 10px 指定。テーブルと表題の間のマージンは相殺される。

表題
1行1列目。このセルの中身は画面の大きさに対してとても長く、自動で折り返される。このときテーブル幅は画面サイズより大きくなることは無い。もっとも、ものすごく大きなディスプレイを使っていたり、仮想デスクトップのサイズが大きい場合は、折り返せずに表示されるかもしれない・・・。

戻る