テーブルレイアウト (デフォルトの表示)

table要素を使って作成された3ペイン(段)レイアウトです。 ウインドウ幅をかなり狭くすると、横スクロールが必須になってしまいます。 (解説記事に戻る)

■上部ペイン

ここでは、table要素・tr要素・td要素を使って、全体のレイアウトを作成する「テーブルレイアウト」が使われています。

■左端ペイン

このようにtableを使ってレイアウトするのは楽ですが、CSSでレイアウトを再調整しにくいデメリットがあります。

1

■中央上部

2

■右端ペイン

とはいえ、実はtableでレイアウトされていても、強引にCSSで表組みを崩して、再レイアウトする方法もあります。

3

■中央2行目

4

■中央3行目

5

テーブルレイアウト (CSSでテーブルを崩した表示)

table要素を使って作成されていつつも、CSSによってテーブルレイアウトではなくなった表示例です。各ペイン(段)が別々のブロックレベル要素のように表示されています。 (解説記事に戻る)

■上部ペイン

ここでは、table要素・tr要素・td要素を使って、全体のレイアウトを作成する「テーブルレイアウト」が使われています。

■左端ペイン

このようにtableを使ってレイアウトするのは楽ですが、CSSでレイアウトを再調整しにくいデメリットがあります。

1

■中央上部

2

■右端ペイン

とはいえ、実はtableでレイアウトされていても、強引にCSSで表組みを崩して、再レイアウトする方法もあります。

3

■中央2行目

4

■中央3行目

5

解説記事に戻る