ブログのシステム変更に伴いこちらの記事はこれ以上更新されません。
再度トップページに戻っていただくと、新しい「ふらふり」をお楽しみいただけます。
ふらふり トップページ

今後もよろしくお願いします。

dt、dd要素で表組みを作る

2007年08月27日

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

最近は、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を左右に並べる方法はあります。
以下。

ちょっと僕の方法では手詰まりだったので、いろいろと調べてみました。
どれも、dt、ddを左右に並べて、高さをそろえていく方法。

参考までに。

でもやっぱ表組みはtableで組んでも問題ないんだけど、なんか悔しくて…。

スポンサードリンク

タグ:

CSS , Web

フッターナビゲーション

トラックバック

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

[2009-01-26] dt、dd要素で表組みを作る - FLA-FLI 佐賀あたりで働くWebデザイナーのブログ 送信元 bookmark!!!

表組みをテーブルを使用せずにdl/dt/ddタグで作成する方法を紹介した記事。
ここまでやればワンランク上のコーダーになれる?

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

« 時の流れは速いもので | TOP | WordPressを試してみて »