简明现代魔法 -> HTML超文本标记语言 -> 使用dl、dt、dd标签代替表格

使用dl、dt、dd标签代替表格

2010-01-10

过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难。现在,越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局,不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTML的dl、dt、dd标签会让你节省更多的代码,更能让代码符合内容的语义化。当然,table也有它的用武之地,那就是很大数据量的数据表,但是小型的数据列表和表单完全可以不使用table哦!

如果你仍然在使用传统table来创建数据列表,那么请继续往下看,看看使用HTML的dl、dt、dd标签是如何让你的工作更轻松。

table数据列表

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

                                                                                   
Name:Squall Li
Age:23
Gender:Male
Day of Birth:26th May 1986
<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数据列表

现在让我们来看看使用了HTML dl、dt、dd标签的数据列表。首先我们使用dl(definition list-自定义列表)标签来容纳整个数据结构,然后我们使用dt(自定义标题)标签和dd(自定义描述)标签来容纳数据中的标题和内容。<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition description”,定义描述)创建的。<dt>给出了术语名,<dd>标记给出了术语的定义。 也就是说<dt>用来创建列表中的上层项目,<dd>用来创建列表中最下层项目,<dt>和<dd>都必须放在<dl>< /dl>标志对之间。

 
Name:
 
Squall Li
 
Age:
 
23
 
Gender:
 
Male
 
Day of Birth:
 
26th May 1986
<dl> 
  <dt>Name: </dt> 
  <dd>Squall Li</dd>
  <dt>Age: </dt> 
  <dd>23</dd> 
  <dt>Gender: </dt> 
  <dd>Male</dd> 
  <dt>Day of Birth:</dt> 
  <dd>26th May 1986</dd> 
</dl>  

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

dl {
  margin-bottom:50px;
}

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

dl dd {
  margin:2px 0;
  padding:5px 0;
}  

从dl、dt、dd的实例中你应该能明显的看出它们的代码更简洁更平滑更符合语义化了吧。

看到这里,如果你还在坚持使用table标签来完成web表单或其它网页布局的话,现在是时候改变一下你的代码了。让你的工作更轻松些吧!

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们