HTML的dl、dt、dd标记制作表格对决Table制作表
93 浏览量
2020-12-08
19:58:26
上传
评论
收藏 60KB PDF 举报
HTML的的dl、、dt、、dd标记制作表格对决标记制作表格对决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
属性。这样无形中增加了自己的工作量，代码会稍微变多了一些。代码变多意味着什么？意味着网站的流量在浪费、增加更多
评论0
最新资源