dl定義リストをtableっぽく表組みにしてみる

表組みタグといば<table>。
でも<table>はタグがいっぱいになるので、個人的にあまり好きじゃない。

そこで、<DL>定義リストを、CSSで表組みぽくできるみたいなので作ってみた。

<DL>の表組みサンプル

ポイントは…

  • <DT>の幅にあわせ<DD>をmargin-leftで寄せること必須。
  • 高さを指定しない場合は、<DT>にfloat: left;を指定し横並びさせるのが簡易。
  • 高さを指定する場合は、<DD>にmargin-top(ネガティブマージン)指定し<DT>の横に並べる。
  • <DD>のmarginは、余白やボーダーの分も計算。

簡易な表組みに最適。

2列、3列程度の簡易な表組みなら、<DL>定義リストにするのがいいかもしれない。HTML内もスッキリするしSEO的にもいいんでは。

列が多いもの、複雑な表組みならやっぱりtable?

  • 欠点1
    縦(行)はガンガン増やせるが、横(列)を増やそうと思うと面倒…<DD>に対し、いちいち横マージンを指定する必要がある。
  • 欠点2
    <DT>に背景色を入れると<DD>内の行数が増えたとき、<DT>の背景色は自動では広がらない…。やり方があるのだろうか?

まぁ、<DL>は定義型のリストを作成するタグであって、表組み用のタグではないですからね…(笑。もっと自由に表組みさせたいときは、やっぱり<table>しかないみたい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です