ページを軽くしたい！（構造編）(2ページ目)

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

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

「上のTABLE」と「下のTABLE」では共に、左側の枠の、幅と背景色を同じにしておきます。

※「WIDTH="xxx"」が、セルの横幅を指定している部分です。単に数値だけを書けば単位は「ピクセル」になりますが、「30%」などのように割合で指定することも可能です。

作成ソフトを使う場合は

HTML直接編集ではなく、作成ソフトを使う場合でも基本は一緒です。横一列に区切れる箇所を境に、上下で表組みを分割します。

何を削るわけでもなく

というわけで、１つのTABLEで１ページ全体を囲っている場合は、TABLEをできるだけ分割 （せめて１画面の境で上下２つにでも分割）すれば、早く表示される（＝軽くなったように見える） ことがお分かりいただけたと思います。

TABLEを使っていなくても

TABLEを使ってデザインをしていなくても、『１画面で見える範囲は軽く作る』という方法は 有効でしょう。１画面で見える範囲には、あまり重い画像などを置かないようにすれば、 ページ全体が早く表示されているかのように見えると思います。

ぜひ、みなさんのサイトでも試してみて下さい、

【関連記事】

• TABLEを駆使して凝ったデザイン
• スタイルシートを使ってレイアウトを作る