Home | 目次 | Prev | テーブルレイアウト | Next

■ テーブルの作成　レイアウト

テーブルを単なる表としてでなく、ページのレイアウトとして使うことが多くあります。実際に Webサイトの多くが採用しています。テーブルの中にテーブルを入れたり、アンカーやボックスなどを配してレイアウトに表現をつけていきます。

ただし、Webの標準化を制定している W3C では、テーブルでレイアウトを構成するのは好ましくない、とされています。これについての詳細は 次節 で解説しています。

■ テーブルによるレイアウト構成
下記のテーブルにおけるレイアウトの表示は、実際にアメリカにあるWebサイトを改造したものです。セル単位で背景色を設定して、カラフルで印象深い構成になっています。
■ Web for beginner

Welcome to our site !

As for this site, beginner aims at about the same power of expression as professional only by the text editor. It establishes in order to make some Web pages. Tag elements and stylesheet are memorized without anyone's using the software of exclusive use, and withe right grammar. The manners on Web are learned and it is full-scale. Web page can be made.
  Basic Lectur  
  Reference  
  How to use HTML  
  Stylesheet  
  Accessibility  
  Setup of Language  
この実際のWebサイトでは、テーブル内の入れ子のテーブルにアンカーが記されていました。見た目の訴求感はアメリカらしくてのびのびとしたページになっていました。背景色や文字色の設定はすべてスタイルシートで記述されています。もし、上のテーブルにスタイルシートがなかったら、このように表示されます。分かりやすいように枠線を表示させました。
■ Web for beginner

Welcome to our site !

As for this site, beginner aims at about the same power of expression as professional only by the text editor. It establishes in order to make some Web pages. Tag elements and stylesheet are memorized without anyone's using the software of exclusive use, and withe right grammar. The manners on Web are learned and it is full-scale. Web page can be made.
  Basic Lectur  
  Reference  
  How to use HTML  
  Stylesheet  
  Accessibility  
  Setup of Language  
ユーザ側でスタイルシートがオフにされていても、ページの構成は保たれています。スタイルシートと、文書構造がしっかりできていればどのようなユーザ環境でも、正しく情報が伝えられます。特に、テーブルでレイアウトを構成する場合には、この点を十分に配慮する必要があります。
同時に、できることならレイアウトを構成する上で、テーブルを使わない方法を考えましょう。テーブルは便利ですが、どうしても逃れられない欠点も併せ持っています。
This Page is HTML4.01 Valid! 初版公開日 2002年8月22日 ;  最新更新日 2004年3月7日
Copyright(C) 2002〜2008 banban