(HTML)定義リスト(dl,dt,dd)で2列横並びにする

よくWebページで使われるのに、2列の表があります。

昔はこれを table タグで書いていましたが、XTHM+CSS 全盛の今日ではdl要素を使用することが主流になってきたようです。

ということで、2列の表を dl タグ(定義リスト)で作成する方法です。

幾つか方法はあるようですが、3流PGは float を使って dd 要素が dt 要素に回りこむ方法を取りました。

ほぼ、参考先のコピペですが、こんな感じです。

●HTML

 style="width:600px">

     class="left">項目
     class="right"> type="text" size="60"  >
 
     class="left">項目
     class="right"> type="text" size="60"  >
 
     class="left">項目ホゲホゲホゲホゲ
     class="right">ホゲホゲ　ホゲホゲ　ホゲホゲ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ホゲホゲ　ホゲホゲ　ピヨピヨ　
 
     class="left">項目
     class="right"> type="text" size="60"  >
 
     class="left">項目
     class="right">ホゲホゲ　ホゲホゲ　ホゲホゲ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ホゲホゲ　ホゲホゲ　ピヨピヨ

dt.left {

clear: left;

float: left; /*dt,dd横並びにするため、回りこみ許可*/

margin: 0 0 0.8em;

width: 7.5em; /*この幅の後に次のdd要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/

border-left: solid 8px #CCC; /*左に罫線描画*/

padding-left: 5px;

}

dd.right {

margin-bottom: 0.8em; /*dtのmargin-bottomと同じ値が無難*/

margin-left: 8em; /*dtのmargin-leftより大きい値にする。多数行になってもdtの下に回りこまないようにする。*/

}

borderを指定することで、ホントの表のように表現することもできるようです。(IE6の場合はバグで若干ずれるので調整要)

3流プログラマのメモ書き

元開発職→社内SE→派遣で営業支援→開発戻り浦島太郎状態の三流プログラマのIT技術メモ書き。このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。

(HTML)定義リスト(dl,dt,dd)で2列横並びにする