如果你仍然在使用传统

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>

一下是相应的

CSS 代码，我们为之前在 HTML 中声明的 class 添加样式。

1

2

3

/*TABLE LIST DATA*/

table

{

margin-bottom:50px;