dl要素(定義リスト)は語句・内容と対応するため、色々な場面で応用できます。新着情報とか、フォームとか。
このdl要素をテーブルの見た目のように扱うCSSです。サンプルファイルも用意しています。
ソースなど
HTMLの生書き状態

これを、テーブルみたいに見せるべく…
表現したい装飾

HTMLソース
<dl> <dt>kotaログ</dt> <dd>MacやWeb制作に関しての話題。</dd> <dt>仙グル</dt> <dd>仙台のおすすめ居酒屋 (角ハイボール・日本酒)、ランチなどをレビューするグルメブログです。<br /> よくサントリーさんともコラボしています。</dd> <dd>毎日更新、ぜひ見て下さい。</dd> </dl>
CSS
dl,dt,dd { margin: 0; padding: 0; } dl { background-color: #333; border: 1px solid #999; border-top: none; width: 450px; } dt { color: #ccc; width: 7em; padding: 0.5em 0 0.5em 1em; border-top: 1px solid #999; float: left; } dd { background-color: #FFF; margin: 0 0 0 7em; padding: 0.5em 1em 0.5em 1em; border-top: 1px solid #999; border-left: 1px solid #999; }
お好み、サイトに合わせて調整して下さい。
[…] 標準では ul などと同じように内容は縦に並んでいくのですが、dt の横に dl を並べることでテーブルっぽく見せることが出来ます。 dl要素でテーブルのような見た目を表現する | kotaログ […]