|    | 1  2  3  4  5  6  7  8  9  10  |

定義リストで表のように見せる

定義リストを横並びにし、表のように見せる

定義リストの利用

定義リストとは

dl (Definition List) 要素は、「用語」 とその 「解説」 など、対になって表現されるものを表すのに使用されます。dl 要素の子要素としては、dt (definition term) 要素または dd (definition description) 要素が一つ以上出現することができます。dt 要素は用語を示すもので、その内容モデルはインライン要素のみです。一方、dd 要素は用語に対する解説を示し、ブロックレベル要素を含むことができますので、段落や他のリストなどを記述することも可能です。

これにスタイルをセットしてみました。

DTD上では、dl 要素内での dt/dd 要素の出現順に指定はなく、またその回数もどちらか一方が一回以上出現すればいいことになっています。

定義リストは、用語とその解説以外にも使用することができます。このこのことから、定義リストを利用して、索引を表現してみました。

dt 要素に対し dd 要素を2回出現させ、これらを横並びにします

定義リストはブロックレベル要素なので、float プロパティを使用して、定義リストの dt 要素と dd 要素を横並びに表示させることにしました。また、width 値の調整で dd 要素を2回出現させました。

例として当サイトの索引を、dt 要素と dd 要素で作ってみました。

dt 要素に float と clear を同時に指定することでこれを実現しております。この指定により、dt 要素が先行する dd 要素の下に回り込むのを解除しつつ、dt 要素の横に後続の dd 要素を配置できるのです。

ページトップへ

|    | 1  2  3  4  5  6  7  8  9  10  |