dl,dt,dd标签 VS 传统table实现数据列表
作者:暴风彬彬 来源:彬Go 时间:2009-08-02 20:45:00
过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难。现在,越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局,不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTML的dl、dt、dd标签会让你节省更多的代码,更能让代码符合内容的语义化。当然,table也有它的用武之地,那就是很大数据量的数据表,但是小型的数据列表和表单完全可以不使用table哦!
如果你仍然在使用传统table来创建数据列表,那么请继续往下看,看看使用HTML的dl、dt、dd标签是如何让你的工作更轻松…
table数据列表
传统table的数据列表代码如下所示。我们要为每行添加tr标签,然后还要在其中为标题和数据各加一个td标签,由于标签都是td,想要添加样式的话还要为每个td添加class属性。
<table>
<tbody>
<tr>
<td class="title">Name:</td>
<td class="text">Squall Li</td>
</tr>
<tr>
<td class="title">Age:</td>
<td class="text">23</td>
</tr>
<tr>
<td class="title">Gender:</td>
<td class="text">Male</td>
</tr>
<tr>
<td class="title">Day of Birth:</td>
<td class="text">26th May 1986</td>
</tr>
</tbody>
</table>
一下是相应的CSS代码,我们为之前在HTML中声明的class添加样式。
/*TABLE LIST DATA*/
table {
margin-bottom:50px;
}
table tr .title {
background:#5f9be3;
color:#fff;
font-weight:bold;
padding:5px;
width:100px;
}
table tr .text {
padding-left:10px;
}
从以上代码可以看出,使用table标签,如果想使用CSS来对内容进行修饰或修改的话,需要为td单元格添加一些相应的class属性。这样无形中增加了自己的工作量,代码会稍微变多了一些。代码变多意味着什么?意味着网站的流量在浪费、增加更多的产生Bug的几率以及后期维护更困难。


猜你喜欢
Python爬虫,获取,解析,存储详解
SQL Server日期计算第1/2页
如何实现固定长度的自动编号?
sysbench-0.4.12编译安装和CPU测试例子分享
ES6记录异步函数的执行时间详解
简洁js的隔行变色代码
SQL Server中row_number分页查询的用法详解
python之js逆向功能演示详解
Dhtml网页实例教程
python之pil的使用详解

python基础编程小实例之计算圆的面积

省市级联菜单的可用性
Python3列表删除的三种方式实现

搞清楚 Python traceback的具体使用方法
asp程序错误详细说明例表
Python实现访问者模式详情
MySQL处理重复数据的方法
使用Python的toolz库开始函数式编程的方法
一篇文章带你了解python标准库--datetime模块
