HTML的dl、dt、dd标记制作表格对决Table制作表格

2024-08-26 00:09:35

字体：大中小

来源：转载

供稿：网友

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

dl列表和table表格哪个更适合数据列表

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

table数据列表

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<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>

上一篇：知名浏览器对DOCTYPE模式的选择机制

下一篇：用标准dl,dt,dd标签抛弃table列表