dlで表をつくる方法

上図のような表をdlで作成する場合、
今まではdt、ddにきっちりwidthを指定し、
それぞれにborder-bottomを指定。
dtにfloat:left;、ddにfloat:right;を指定するという方法でやっていました。
でも、「う」の段のように、ddのテキストの行数がdlよりも多いと
border-bottomがずれてしまいます。
ならborder-top指定すれば？と思いますが、
「え」の段のように、逆にdtのテキストの行数が多いと
「お」の段が回り込んでしまいます。
そうすると、一段ずつdlにするというような
何とも不細工なソースになってしまっていました。

調べてみると、下記の様にすればで崩れずソースもきれいなままです。
それは、dtにwidthとfloat:left;を指定border-bottomの指定はナシ。
ddには、dtのwidth分のpadding-leftとborder-bottomを指定、floatとwidthの指定はナシ。

具体的にはこんな感じです。

--------------

dl{
width:500px;
list-style:none;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
background:url(dtについている色を画像で指定) repeat-y left top;
overflow:auto;
}

dt{
clear:both;
width:100px;
float:left;
}

dd{
border-bottom: 1px solid #999999;
padding:0 0 0 100px（dtのwidth分）;
}

--------------