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コーディングの技術が活かせる媒体があることは、なんだか嬉しいような複雑な気持ちですね。笑。
この記事も読まれています