佐賀あたりで働くWebデザイナーのブログ/FLA-FLI

たまには仕事がらみのお話も。

最近は、dt、ddを使って、擬似的な表組みを作ることがあります。
別にテーブルでもいいんですけどね。

表組みだったら、テーブルでもいいんだけど、ちょっと違うかな。ってときは、dt、ddを使ってます。

で、その方法。

HTMLソース

<dl>

<dt>項目1</dt>

<dd>項目1の内容です。</dd>

<dt>項目2</dt>

<dd>項目2の内容です。</dd>

<dt>項目3</dt>

<dd>項目3の内容です。項目3の内容です。項目3の内容です。</dd>

</dl>

で、CSS

dl,dt,dd {

margin: 0;

padding: 0;

}

dl {

border: 1px solid #333;

border-top: none;

width: 300px;

background: #e7e7e7;

}

dt,dd {

padding: 3px;

}

dt {

border-top: 1px solid #333;

clear: left;

float: left;

width: 80px;

}

dd {

margin-left: 80px;

border-top: 1px solid #333;

border-left: 1px solid #333;

background: #fff;

}

サンプルはこちら。

やっていることといえば、dtをfloatさせてるだけ。
で、dt分の幅のマージンをddに与えてあげると、表組みのようになります。

これだとIE6以上とFirefoxではしっかりと表組みに見えます。
IE5.5以下だと、dtとdd間に隙間ができます。
このあたりはもうちょっといろいろ必要です。

この方法でいいところは、dd要素に長い内容が入っても、しっかりと表組みのように見えてること。
逆にdt要素に長い内容が入ると崩れてしまいますけど…。

一つ覚えておくと便利なので、ご利用する機会があればぜひ(^^ゞ

ただdtとddを左右に並べるだけなら、そんなに難しくありません。
問題はborderが絡んでくるとやっかい。ってこと。

一番の解決策は背景画像で置いてあげることかなぁ。って思いますが、それだと毎回画像作らないといけないしね。

誰か、いい解決法を見つけてくれればいいんですけど…。

他にも、dt、ddを左右に並べる方法はあります。
以下。

このエントリーのトラックバックURL:http://www.sriproot.net/mt/mt/mt-tb.cgi/206