dl,dt,dd标签 VS 传统table实现数据列表

dl,dt,dd标签VS传统table实现数据列表近期博客忙着搬家，所以将近两周的时间都无法访问，还好现在已经解决，从windows主机
迁移到了更适合php+mySQL环境的Linux主机，速度方面是否有所提升还不太清楚，总之现在博客恢复正常，还是比较欣慰的。从今天
开始彬Go会一如既往的为大家奉献更多更好的技术文章，希望大家继续捧场，学到更多有用的东西。好了言归正传….过去有很多网页设计师喜欢
将他们的网页效果图用table布局实现成网页，但是这样做会遇到一个比较麻烦的问题就是，后期调试和维护会相当的困难。现在，越来越多的
前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局，不但让网站降低了开发和维护的成本，而且代码也更
语义化了。但是，并不是说table从此消失了，它仍然被很多人用来作为网页中数据表现的必需品，比如个人信息数据列表等。事实上，使用H
TML的dl、dt、dd标签会让你节省更多的代码，更能让代码符合内容的语义化。当然，table也有它的用武之地，那就是很大数据量的
数据表，但是小型的数据列表和表单完全可以不使用table哦！如果你仍然在使用传统table来创建数据列表，那么请继续往下看，看看使
用HTML的dl、dt、dd标签是如何让你的工作更轻松…table数据列表传统table的数据列表代码如下所示。我们要为每行添加t
r标签，然后还要在其中为标题和数据各加一个td标签，由于标签都是td，想要添加样式的话还要为每个td添加class属性。12345
67891011121314151617181920??????e">Name:??SquallLi??????class="title">Age:??23??????<
td?class="title">Gender:??Male???
???DayofBirth:??26t
hMay1986????一下是相应的CSS代码，我们为之前在HTML中声明
的class添加样式。12345678910111213141516/TABLELISTDATA/table?{??mar
gin-bottom:50px;}tabletr?.title?{??background:#5f9be3;??color:#f
ff;??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(自定义描述)标签来容纳数据中的标题和内容。12345678910

???

Name:?

???<
dd>SquallLi??

Age:?

???

23

???

Gender:?t>???

Male

???

DayofBirth:

???

26thMay1986dd>?

而在css代码中，我们仅需让dt和dd向左浮动即可。/DL,DT,DDTAGSLISTDATA/1
23456789101112131415161718dl?{??margin-bottom:50px;}dldt?{??back
ground:#5f9be3;??color:#fff;??float:left;??font-weight:bold;??mar
gin-right:10px;??padding:5px;??width:100px;}dldd?{??margin:2px?0
;??padding:5px?0;}从dl、dt、dd的实例中你应该能明显的看出它们的代码更简洁更平滑更符合语义化了吧。看到这里，如果你还在坚持使用table标签来完成web表单或其它网页布局的话，现在是时候改变一下你的代码了。让你的工作更轻松些吧！