DLをTableに見せる

Notice
定義リスト(<DL>) を 2列数行のテーブル(<TABLE>) に見せるような、スタイルシートの書き方サンプル。
「サンプル」には、どんなときにDLリストが使えそうか、例など書いてみました。
Sample view without CSS
コンテンツメニュー
dtにメニューの名前、ddに説明。
プロフィール
dtに項目名、ddにその項目の値。
dtに「血液型」、ddに「B型」など。
リンク
dtにサイト名、ddに説明やバナー。
ギャラリー
dtに画像、ddに説明など。(複数のリストの場合)
チャット・対談ログ
dtに発言者名、ddにメッセージ。
Sample view with CSS
コンテンツメニュー
dtにメニューの名前、ddに説明。
プロフィール
dtに項目名、ddにその項目の値。
dtに「血液型」、ddに「B型」など。
リンク
dtにサイト名、ddに説明やバナー。
ギャラリー
dtに画像、ddに説明など。(複数のリストの場合)
チャット・対談・会話
dtに発言者名、ddにメッセージ。
Sample source of CSS
/* dl-sample */
#sample * {
    margin:0;
    padding:0;
    border:0;
}
#sample dl {
    border-top:0;
    border-bottom:1px solid;
    border-left:1px solid;
    border-right:1px solid;
    background:#eee;
}
#sample dt {
    float:left;
    clear:both;
    width:9em;
    padding:0.5em;
    _width:10em;    /* WinIE */
    border-top:1px solid;
    white-space:nowrap;
}
#sample dd {
    margin-left:10em;    /* = dt.width + dt.padding */
    padding:1ex;
    border-top:1px solid;
    border-left:1px solid;
    background:#fff;
}
Sample source of HTML
<div id="sample">
    <dl>
        <dt>dl</dt>
            <dd>Definition Lists</dd>
            <dd>定義リスト、項目名付きリスト</dd>
            <dd>dlの子として置けるのは dtとddのみです。</dd>
        <dt>dt</dt>
            <dd>Definition Term</dd>
            <dd>説明したい項目名</dd>
            <dd>dtの中はインライン要素しか置けません。</dd>
        <dt>dd</dt>
            <dd>Definition Description</dd>
            <dd>dtの内容について説明する文章</dd>
            <dd>ddの中はブロック要素でもインライン要素でも置けます。</dd>
    </dl>
</div>
© s*m