dl 表組 - mnk375 @ ウィキ

[使える CSS テクニック] CSS で DL を float して表組みのように表現する
http://c-brains.jp/blog/wsg/08/06/09-174329.php
 
 
[HTML]
<dl>
<dt>会社名</dt>
<dd>株式会社シーブレイン</dd>
<dt>住所</dt>
<dd>横浜市中区尾上町 5-77-2 馬車道ウエストビル 8F</dd>
<dt>電話番号</dt>
<dd>045-650-6210</dd>
</dl>
[CSS]
dl {
	margin: 0 0 15px;
	padding: 0 10px 10px;
	border: 7px #EEEEEE solid;
}
dl dt {
	float: left;
	width: 7em;
	padding: 10px 0;
	font-weight: bold;
	text-indent: 1em;
	line-height: 150%;
}
dl dd {
	padding: 10px 0 10px 7em;
	line-height: 150%;
	border-bottom: 1px #CCCCCC solid;
}
ポイント
dt には float:left; を指定し、dd には padding-left に dt の width以上の値を設定します。
dt には width を指定する必要があるため、padding で左右余白の調節できません。
text-indentでインデントを調整します。
[ IE での注意点 ]
hasLayout が true になっている場合、dd の margin、padding、また background が正しく表示できません。
zoom:normal; などを設定して hasLayout の値を false にしておく必要があります。