2/2 ページを軽くしたい！（構造編） [ホームページ作成] All About

分割できそうにないデザインの場合でも

明らかに分割しても問題なさそうな、横一列の「デザイン上の切れ目」があれば話は簡単です。しかし、例えば、左側一列に上から下まで通して項目が存在するようなデザインを行っているサイト(※)の場合は、分割するのは難しそうに思われるかも知れませんね。
※All About Japan の各ガイドサイトもそうです。

でも大丈夫です。
TABLEのセル間のサイズを0にして（後述）「上のTABLE」と「下のTABLE」の間隔をなくし、上下のセルのデザイン（色や幅）を合わせることで、繋がっているように見せかけることが可能です。そのテクニックを使って、分割させてみましょう。

やってみましょう

では、具体的に、どのように記述すれば良いかをご紹介いたしましょう。既にTABLEを活用したデザインを行える方(※)なら、何も問題はないはずです。
※HTMLを直接編集せず、WYSIWYG系ソフトを使って作成されている場合でも基本は一緒です。要は、ページ全体を囲っているTABLEを分割すれば良いのです。（後述）

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">

上記のようにTABLEタグを記述すれば、TABLEの枠線は表示されなくなり（BORDER="0"）、またセル間の隙間もなくなり（CELLSPACING="0"）、セルの中身はセルの端っこから詰めて表示されるようになり（CELLPADDING="0"）ます。

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
：　　：
</TABLE>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
：　　：
</TABLE>

このように記述したTABLEを複数個並べても、その切れ目が見えることはありません。上下で繋がったデザインにすれば、あたかも１つのTABLEで囲っているように見えます。しかし、実際は分割されているので、１つのTABLEの中身の読み込みが完了するたびに順次表示されていきます。

セル（TDタグ）は、必ず横幅を数値（もしくは割合）で指定します。こうしないと、上下でずれてしまう可能性がありますので注意して下さい。

<TABLE ～省略～>
<TR>
<TD WIDTH="320" BGCOLOR="#ffffcc">
：　　：
</TD>
<TD BGCOLOR="#ccffcc">
：　　：
</TD>
</TR>
</TABLE>
<TABLE ～省略～>
<TR>
<TD WIDTH="320" BGCOLOR="#ffffcc">
：　　：
</TD>
<TD BGCOLOR="#ffcccc">
：　　：
</TD>
</TR>
</TABLE>