tableコーディングのコツ

  • ブックマーク

htmlのtableコーディングをご存知でしょうか。

tableコーディングとはtableタグを使って、デザインの見たままを組んでいく手法です。
最近のWeb関連制作者は、cssで組むことが普通だと思うので、知らない方も多いかもしれません。

信じられないかもしれませんが、cssレイアウトが出現する前は、みんなこれで組んでいたのです。

このtableコーディング、今でも活用されている分野があります。
それがHTMLメール。

世の中にさまざまなメーラーがある中で、cssが効いたり効かなかったりします。中には相当古いメーラーを使っているユーザーも。
そこで活用されるのが「最強に崩れないレイアウト」であるtableコーティング

死ぬほどtableコーティングでHTMLを組んできたワタクシが、tableコーティングのコツを数点まとめてみました。

コツ1)tableを複雑にしない

colspanやrowspanは極力使わず、シンプルな構成を心がけます。
結合を使うと一気に構成が複雑になるので、特にテキストエディタでコーティングする場合は、その構造の把握が困難になります。

なので、構造は極力シンプルにする、が鉄則です。

とは言っても、複雑なレイアウトはどうするの? と思うかもしれません。
次の項目で解説します。

コツ2)tableを入れ子にする

大外に大きなtableを設置し、その中のtdの中にまたtableを入れる、といった具合に、どんどん入れ子にしていきます。

また、tableはborderを0にして重ねると、隙間を空けず縦につなげることができます。

これを利用して、大きなtableのtdの中に小さなtableを入れ子にしていきます。
これを繰り返すことで複雑なレイアウトも組むことができます。

コツ3)marginにはspacer.gifを使う

要素と要素の間に隙間を空ける場合、例えばページの両サイドにマージンを空けたい場合などは、tdのwidth設定のみだと崩れる場合があります。

このような時は、1px x 1pxの透明なgif画像を、横幅を伸ばして使います。
イメージ的には、tdのセルにつっかえ棒的にgif画像を使う感じです。

たとえば、両サイドに20pxのmarginを空けたい場合、このように使います。

透明画像なので、background-colorも使えます。

もちろん、縦方向のマージン調整にも使えます。

おわりに

cssだと組めるけど、tableコーディングだと物理的に組めない、というレイアウトももちろん存在します。なので、tableで組むことを前提にする場合は、きちんと組めるか確認しながらデザインすることも重要です。

いまの時代になって、tableコーディングの技術が活かせる媒体があることは、なんだか嬉しいような複雑な気持ちですね。笑。

この記事も読まれています

  • ブックマーク