以文本方式查看主题 - ╋艺 镇╋ (http://wdystv.com/bbs/index.asp) -- ┣◇网站建设&Web语言 (http://wdystv.com/bbs/list.asp?boardid=4) ---- CSS: 简单行列用table还是dl,dt,dd? (http://wdystv.com/bbs/dispbbs.asp?boardid=4&id=3150) |
-- 作者:admin -- 发布时间:2011/8/25 9:38:49 -- CSS: 简单行列用table还是dl,dt,dd? 如果表格不复杂,只是几行几列,还是采用DL.DT.DD,如果是复杂数据显示,例如注册个人信息列表,还是建议使用table。 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代码: /*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>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表单或其它网页布局的话,现在是时候改变一下你的代码了。让你的工作更轻松些吧!
英文原文:How To Use DL, DT And DD HTML Tags To List Data vs Table List Data
|
-- 作者:admin -- 发布时间:2012/1/31 11:10:47 -- 1.对:<dl></dl>用来创建一个普通的列表,<dt></dt>用来创建列表中的上层项目,<dd></dd>用来创建列表中最下层项目; 2.对:ul,li列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业,并让浏览者有一目了然的感觉; 3.对<table> :标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。 综上这是一个关于猫和老虎的问题,你喜欢谁?? |