DL, DT, DD を用いた TABLE 置換実験
（HTML の話ね）

背景

ふと思ったんだけど、2列の表でよく表現されるものは実はこう表記するのが正しいんじゃないか？

<dl>
  <dt>雑誌名</dt>
  <dd>SoftwareDesign</dd>
  <dt>カナ</dt>
  <dd>ソフトウェアデザイン</dd>
</dl>

これが、こう

雑誌名

SoftwareDesign

カナ

ソフトウェアデザイン

ではなくて、

のように表示されるとけっこう嬉しいような。

[ ↑ Contents ]

実装1

こんな感じで CSS を当ててみた。

dl {
  display: table;
}
dt {
  display: table-cell;
}
dd {
  display: table-cell;
}

これで、dl が table に、dt, dd が td に相当する表示になる。

ところが基本的な問題として tr に相当する要素がない。だからこうなっちゃう。

結果1

てんでダメ。

[ ↑ Contents ]

実装2

それじゃあってんで、HTML の方に修正を加えた。本来なら dl の中に div を入れたいところだが、それは文法上できないので、こんな感じになる。

<style type="text/css"><!--
    div.list {
        display: table;
    }
    div.list dl {
        display: table-row;
    }
    div.list dt, dd {
        display: table-cell;
    }
--></style>
<div class="list">
    <dl>
        <dt>雑誌名</dt>
        <dd>SoftwareDesign</dd>
    </dl>
    <dl>
        <dt>カナ</dt>
        <dd>ソフトウェアデザイン</dd>
    </dl>
</div>

実際にスタイルを適用したものが下。分かりやすさのために枠線を付加している。

Mozilla 1.0.1（Win）では正しく表示されている。Opera 6.03（Win）だと枠線が表示されていないけど、「位置」という意味でのレイアウトは正しい。IE は逆に「位置」が変わらずに枠線だけ適用されている。

というか。

……。すごく本末転倒な感じがするのは気のせいか？ 気のせいじゃないよなぁ。けっきょく table 書いてるのと一緒だもんね。それに dl が分割されちゃってるので、意味的におかしい感じがするし。

結果2

納得いかない。

[ ↑ Contents ]

実装3

dl を分割せずに、dd のあとに強制的に改行を入れるというのはどうだろう？ もちろん <br> は使わず CSS で。

具体的には dd:after で改行を書けばいいような気がしてるんだけど、…。

無理だよなぁ、そんなこと。だって、tr を強制的に改行しようとしているんだもんねぇ。てことは、そもそもが display: table で目指すのが間違いなのかな？　あ、そうかもしんない。てことは…、

やってみました。こんな感じ。（例によって Gecko エンジンで見てちょ）

ソースはこう。

<style type="text/css"><!--
    div.seem-to-table {
        margin-left: 2em;
        width: 14.45em;
        border-top: 0.2pt solid black;
        border-left: 0.2pt solid black;
    }
    div.seem-to-table dl {
        margin: 0;
        padding: 0;
    }
    div.seem-to-table dt {
        float: left;
        clear: left;
        width: 3em;
        padding: 0.2em;
        border-right: 0.2pt solid black;
        border-bottom: 0.2pt solid black;
    }
    div.seem-to-table dd {
        width: 14em;
        padding: 0.2em;
        margin-left: 0;
        border-right: 0.2pt solid black;
        border-bottom: 0.2pt solid black;
    }
--></style>
<div class="seem-to-table">
    <dl>
        <dt>雑誌名</dt>
        <dd>SoftwareDesign</dd>
        <dt>カナ</dt>
        <dd>ソフトウェアデザイン</dd>
    </dl>
</div>

こんなことも可能ではないかと。

<style type="text/css"><!--
    div.seem-to-table2 {
        margin-left: 2em;
        width: 14.4em;
    }
    div.seem-to-table2 dl {
        margin: 0;
        padding: 0;
    }
    div.seem-to-table2 dt {
        margin-bottom: 0.2em;
        float: left;
        clear: left;
        width: 3em;
        padding: 0.2em;
        background-color: #ffffff;
    }
    div.seem-to-table2 dd {
        width: 10.5em;
        padding: 0.2em;
        margin-bottom: 0.1em;
        margin-top: 0.2em;
        background-color: #cccccc;
    }
--></style>
<div class="seem-to-table2">
    <dl>
        <dt>雑誌名</dt>
        <dd>SoftwareDesign</dd>
        <dt>カナ</dt>
        <dd>ソフトウェアデザイン</dd>
    </dl>
</div>

ただ、面倒くさいことにあれこれサイズ指定をしなくちゃいけないんですな。table は内容に応じて自動的に幅が伸縮するけど、この方法は全部自分で指定してあげないと、見た目が破綻してしまうのです。そりゃまぁ、無理矢理 table っぽくしてるだけですから。一度パターンが決まればあとは使いまわせるけど、最初のパターンを決めるまでにちと苦労しそう。

結果3

おおむね満足のいく結果、かなぁ。

今回のポイント

要するに、必ず dt, dd, dt, dd, ... とか dt, dd, dd, dt, dd, dd, ... という順番になるのだから、

• dd は dt の右に回り込む（dt に指定した float: left）、
• dd は自分の前の dd の前に回りこむ（今回は dd は一つしか書いてないけど）
• dt は自分自身が左端にきたいから前の dt の指定した float を解除するために clear: left

というルールにしたのです。あとは位置の微調整のために margin だの padding だのを使う。border を使うとその分位置がずれますのでご注意あれ。

まとめ

表を作るときは見た目をかなり意識しちゃうもんなんだけど、表そのものの構造はそんなに複雑じゃないのに、HTML は案外簡単じゃないので、見た目を意識しながら面倒なコードのお世話をしなきゃならないという、困った状況に陥りやすいのですが、ここでは TABLE の構造さえ決まってしまえば、少なくともソースを手書きで作るのは楽だし、意味的にも割と納得のいく方法にたどりつけたんじゃないかと思う。

今回扱ったような、表と言えば表なんだけど、表じゃないと言えば表じゃないような気がするデータって、自分は案外あるので、今後、応用できることに期待。でも単なる段組みレイアウトと同じ話になってしまった自分が悲しい。

参考

• スタイルシートでマルチカラム・デザインを実現する方法

具体的で分かりやすいでしょう。

[ ↑ Contents ]