HTML的dl、dt、dd标记制作表格对决Table制作表
来源:互联网 发布:具体营销数据分析 编辑:程序博客网 时间:2024/06/05 10:43
不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTML的dl、dt、dd标签会让你节省更多的代码,更能让代码符合内容的语义化。当然,table也有它的用武之地,那就是很大数据量的数据表,但是小型的数据列表和表单完全可以不使用table哦!
<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>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, DT, DD TAGS LIST DATA*/
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来创建数据列表,那么请继续往下看,看看使用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数据列表
现在让我们来看看使用了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, DT, DD TAGS LIST DATA*/
复制代码
代码如下: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表单或其它网页布局的话,现在是时候改变一下你的代码了。让你的工作更轻松些吧!
0 0
- HTML的dl、dt、dd标记制作表格对决Table制作表
- HTML的dl、dt、dd标记制作表格对决Table制作表格
- dl,dt,dd标记在网页制作中的应用
- \t\tHTML的dl、dt、dd表格 VS Table表格
- Html中不太常用的dl、dt、dd
- HTML之dl、dt、dd的用法
- HTML网页制作之DL、DD、DT标签替代UL、LI
- html中dl、dt、dd标记的使用实现菜单显示|隐藏
- html学习10—目录—定义列表的标记<DL>/<DT>/<DD>
- 网页制作小技巧:dl dt dd标签用法
- 网页制作小技巧:dl dt dd标签用法
- CSS学习教程:用dl dt dd来制作列表
- DivCSS布局实例 用dl dt dd来制作列表
- 网页制作中的CSS+DIV:dl,dt,dd
- html 中的dl dt dd
- html之 <dl> <dd> <dt>
- 一个用 dl dt dd 做的表格
- 关于html中DD,DT,DL的解释
- JSP学习笔记之二
- Junit测试【2】(详解suit函数)
- 办公室常见问题解决:不能连接局域网的共享打印机
- 页面控制利器——JSTL标签库
- Handler的两种用法
- HTML的dl、dt、dd标记制作表格对决Table制作表
- Linux 系统结构详解
- [安卓开发] 自定义View之一: 组合View
- CenterOS6.5(Minimal) 搭建nginx
- Codeforces Round #311 (Div. 2) C 贪心
- linux下管道的容量以及实现机制
- Jdbc
- cookie
- 实时调度类