実践テーブルレイアウト

　多くのウェブサイトは上部にページのタイトルなどを入れるヘッダ、中央に文章などが入れるコンテンツ、最下部に著作権表示などを入れるフッタで構成されています。更に細かく分類するとメニューを付けない1カラム、右か左に各ページへのリンクメニューがある2カラム、左右にメニューがある3カラムの3つが主流になっています。

　どの構成でレイアウトするのが見やすいかは個人差があり、どれが最適かはサイトの性質によって変わってきますが、このサイトもそうであるようにコンテンツの横にメニューがある2カラムがどんなサイトにも合う無難な構成だと思われます。大量の広告を掲載したいと考えている場合は3カラムで左サイドにメニュー、右サイドに広告スペースといった構成がいいかもしれません。

　さて、ここからは実際にテーブルレイアウトを行っていきます。ここでは無難な2カラムで右サイドにメニューがある構成にします。また、私の好みでページを中央に表示させるようにしたいと思いますが、テーブルレイアウトの弱点としてページ全体をテーブルで囲むと表示が遅くなってしまう欠点があるので、全体はDIVを使ったボックスで囲み、これを中央に表示させます。

　ボックスを中央表示するには「margin-right: auto; margin-left: auto」を使用します。その理由は横幅のサイズを指定したボックスを「align="center"」を使って中央表示させようとするとIE 6などでは中央表示されますが、FirefoxやOperaなどでは反映されません。但しalphaEDITのWYSIWYG編集では「margin-right: auto; margin-left: auto」が反映されないので編集中は左寄せで表示される事になります。

　上で作ったボックスの中にヘッダ、コンテンツ、フッタをそれぞれ独立したテーブルで挿入します。1つのテーブルでセルを分けて作っても問題ないのですが、テーブルを小分けして作った方がページ表示の体感速度が速くなるようです。中央のコンテンツテーブルは左右にセルを分けて右側にメニュー欄を作ります。そのサンプルが下。ページのソースも確認してみて下さい。

　サンプル1では文章が端に掛かっている他、右メニューとの余白もない為、見た目として良くありません。そこで各セルにCSSで余白を設けてみました。更に右に作ったセル内に新たにテーブルを入れ子して直線を装飾。そのサンプルが下になります。

　単調ではありますが、おおまかなレイアウトは終了。ここから更にタイトルバナーやアイコンを使ってページを装飾していく事でそれなりのページが完成する筈です。テーブルにラインを装飾する場合は、テーブルに直接ボーダーを指定すると下のように立体的？な線になってしまうので、CSSで指定する事をお勧めします。

　テーブルを多様していくとよくつまずく問題にテーブルやセルの枠線があります。上でも触れましたが直接テーブルにボーダーを指定すると1pxで指定しても立体的な枠線が作られてしまいます。そこでCSSを使って線を指定すればいいのですが、テーブルの要素だけに線を指定してもセル内部には線が表示されません。各セル（td）にもCSSで線を指定するとどうなるかと言うと外側の線と隣り合うセルの線がくっつき、太く表示されてしまいます。

　この問題を解決するにはテーブルに「border-collapse:collapse」というスタイルを指定します。これは隣り合うセル同士の線を重ねるという指定で、このスタイルを指定しておく事で1pxなどの細い実線をテーブルに使用したい時にどのセルも1pxの線で表示されます。

　下が1pxの実線と「border-collapse:collapse」を指定したテーブルになります。