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的几率以及后期维护更困难。

标签:表格,dl,dt,dd,标签,列表
0
投稿

猜你喜欢

  • Python爬虫,获取,解析,存储详解

    2023-12-21 15:03:23
  • SQL Server日期计算第1/2页

    2024-01-23 20:30:59
  • 如何实现固定长度的自动编号?

    2010-06-03 10:08:00
  • sysbench-0.4.12编译安装和CPU测试例子分享

    2024-01-24 10:06:21
  • ES6记录异步函数的执行时间详解

    2024-04-10 16:18:56
  • 简洁js的隔行变色代码

    2008-06-18 18:17:00
  • SQL Server中row_number分页查询的用法详解

    2024-01-21 20:15:01
  • python之js逆向功能演示详解

    2023-09-01 13:49:29
  • Dhtml网页实例教程

    2007-10-09 13:39:00
  • python之pil的使用详解

    2023-01-19 07:21:19
  • python基础编程小实例之计算圆的面积

    2023-06-07 06:33:14
  • 省市级联菜单的可用性

    2009-02-24 16:32:00
  • Python3列表删除的三种方式实现

    2021-03-26 17:55:55
  • 搞清楚 Python traceback的具体使用方法

    2022-10-04 07:00:15
  • asp程序错误详细说明例表

    2008-04-02 12:13:00
  • Python实现访问者模式详情

    2021-02-16 05:37:51
  • MySQL处理重复数据的方法

    2024-01-24 04:08:27
  • 使用Python的toolz库开始函数式编程的方法

    2022-10-18 10:29:55
  • 一篇文章带你了解python标准库--datetime模块

    2022-08-21 03:42:04
  • python 变量初始化空列表的例子

    2022-09-03 08:14:42
  • asp之家 网络编程 m.aspxhome.com