最近、仕事でコーディングをやる際に、tableレイアウトではなくcssでやってしまうことの方が多くなりつつあります。
おかげで、作業スピードもかなり速くなり、今ではtableでやるよりも速くなりました。
そんなことはさておき、今日はtableを使わない段組みのTipsを紹介。

もちろん、内容が表を示すものであれば、tableでマークアップする必要があります。
でもたまに、これは表なのか?と迷ってしまうこともあるはず。

今回、例に挙げるのが、トップページに良く見られる、Topics等の更新情報を表示する部分。
下の例のように、左側に日付、右側に見出しといったレイアウトだと、
人によっては、カレンダーだしtableじゃない?という人もいるでしょう。
でも今回はリストで組んでみます。

2000.00.00 情報を更新しました。
2000.00.00 リニューアルオープンしました。

まずHTMLは、こんな感じで。

<ul> <li>2000.00.00 <a href="#">情報を更新しました。</a></li> <li>2000.00.00 <a href="#">リニューアルオープンしました。</a></li><ul>

次にcssを書いてみます。
幅を200pxと仮定して、ulをリセットします。

ul{ margin:0; padding:0; list-style-type:none; width:200px; }

次にliをこんな感じに。

li{ font-size:12px; line-height:140%; }

そして、aをblockにしてみます。

li a{ display:block; }

するとこんな感じに。

ピンと来た人もいると思いますが、ここで、margin,paddingの登場です。
頭揃えで横並びにするには、aタグの部分を1行分上に、そして日付の幅分右移動させてやれば良い訳です。
よって、aタグを次のように修正。

a{ margin:-1.4em 0 0 0; padding:0 0 0 5.0em; display:block;}

まずmarginに負の値を指定することで、上側に上げています。
1.4という数字は、1文字分の高さ(1.0em)に行間分(ここでは1.4em)を掛けたものです。
もちろん行間が180%であれば、-1.8emになります。

次にpaddingで右方向へ。
日付の文字数は、最大値が全角5文字(半角10文字)なので、5文字分(5.0em)のスペースを左側にあけてあげます。
これで完了。実際はこんな風↓になります。

補足ですが、右方向に移動するには、実はmarginでも出来ます。
しかしここではpaddingを使いました。
その理由は、境界線を引くことが良くあるからです。
ではaタグにborderを追加してみます。

a{ margin:-1.4em 0 0 0; padding:0 0 0 5.0em; display:block; border:solid #333333; border-width:0 0 1px 0; }

結果はこちら↓

ん〜、表らしくなってきた。
こんな感じで意外と簡単に出来てしまいます。
背景色や背景画像等を指定して、思い通りにカスタマイズしてみて下さい。

最後に一言。
明らかに表の場合は、必ずtableタグでマークアップしましょう。