4

5

6

7

8

9

10

11

12

13

14

15

16

}

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(自定义

描述

)标签来容纳数据中的标题和内容。

1

2

3

4

5

6

7

8

9

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