Use standard dl, dt, dd tags to discard table lists

Now, more and more front-end developers are starting to use xHTML+CSS to replace the original table layout to complete the overall layout of the web page, which not only reduces the cost of development and maintenance of the website, but also makes the code more semantic. However, it does not mean that tables have disappeared. They are still used by many people as a necessity for data presentation on web pages, such as lists of personal information data. In fact, using HTML's dl, dt, and dd tags will save you more code and make the code more semantically consistent with the content. Of course, tables have their uses, and that is for data tables with large amounts of data, but small data lists and forms do not require tables at all!
If you are still using traditional tables to create data lists, please read on to see how using HTML's dl, dt, and dd tags can make your work easier...
table data list The data list code of the traditional table is as follows. We need to add a tr tag for each row, and then add a td tag for the title and data. Since the tags are all td, if we want to add styles, we also need to add a class attribute to each td.

Copy code

The code is as follows:

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

The following is the corresponding CSS code, we add styles to the classes declared previously in the HTML.

Copy code

The code is as follows:

/*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;
}

As can be seen from the above code, when using the table tag, if you want to use CSS to modify or modify the content, you need to add some corresponding class attributes to the td cell. This will invisibly increase your workload and the code will become a little more. What does more code mean? This means that the website traffic is wasted, the chance of bugs is increased, and subsequent maintenance is more difficult.
dl, dt, dd data lists Now let's take a look at data lists using the HTML dl, dt, dd tags. First we use the dl (definition list) tag to hold the entire data structure, and then we use the dt (custom title) tag and dd (custom description) tag to hold the title and content in the data.

Copy code

The code is as follows:

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

In the CSS code, we only need to float dt and dd to the left.

Copy code

The code is as follows:

/*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;
}

From the examples of dl, dt, and dd, you should be able to clearly see that their codes are simpler, smoother, and more semantic.
Seeing this, if you still insist on using table tags to complete web forms or other web page layouts, now is the time to change your code. Make your work easier!

<<: A brief discussion on CSS height collapse problem

>>: Solution to the problem of not being able to obtain the hostname of the host in the docker container