CSS: 简单行列用table还是dl,dt,dd?

如果表格不复杂，只是几行几列，还是采用DL.DT.DD，如果是复杂数据显示，例如注册个人信息列表，还是建议使用table。

table数据列表：

传统table的数据列表代码如下所示。我们要为每行添加tr标签，然后还要在其中为标题和数据各加一个td标签，由于标签都是td，想要添加样式的话还要为每个td添加class属性。

<table>
<tbody>
<tr>
<tdclass="title">Name:</td>
<tdclass="text">SquallLi</td>
</tr>
<tr>
<tdclass="title">Age:</td>
<tdclass="text">23</td>
</tr>
<tr>
<tdclass="title">Gender:</td>
<tdclass="text">Male</td>
</tr>
<tr>
<tdclass="title">DayofBirth:</td>
<tdclass="text">26thMay1986</td>
</tr>
</tbody>
</table>

相应的css代码：

/*TABLELISTDATA*/
table{
margin-bottom:50px;
}

tabletr.title{
background:#5f9be3;
color:#fff;
font-weight:bold;
padding:5px;
width:100px;
}

tabletr.text{
padding-left:10px;
}

从以上代码可以看出，使用table标签，如果想使用CSS来对内容进行修饰或修改的话，需要为td单元格添加一些相应的class属性。这样无形中增加了自己的工作量，代码会稍微变多了一些。代码变多意味着什么？意味着网站的流量在浪费、增加更多的产生Bug的几率以及后期维护更困难。

dl,dt,dd数据列表：

现在让我们来看看使用了HTMLdl、dt、dd标签的数据列表。首先我们使用dl(definitionlist-自定义列表)标签来容纳整个数据结构，然后我们使用dt(自定义标题)标签和dd(自定义描述)标签来容纳数据中的标题和内容。

<dl>
<dt>Name:</dt>
<dd>SquallLi</dd>
<dt>Age:</dt>
<dd>23</dd>
<dt>Gender:</dt>
<dd>Male</dd>
<dt>DayofBirth:</dt>
<dd>26thMay1986</dd>
</dl>

而在css代码中，我们仅需让dt和dd向左浮动即可。

dl{
margin-bottom:50px;
}

dldt{
background:#5f9be3;
color:#fff;
float:left;
font-weight:bold;
margin-right:10px;
padding:5px;
width:100px;
}

dldd{
margin:2px0;
padding:5px0;
}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

实现的是同样的效果，您能明显的看出dl,dt,dd的代码更简洁更平滑更符合语义化，从而使网站降低开发和维护的成本。
看到这里，如果你还在坚持使用table标签来完成web表单或其它网页布局的话，现在是时候改变一下你的代码了。让你的工作更轻松些吧！
英文原文:HowToUseDL,DTAndDDHTMLTagsToListDatavsTableListData