Use standard dl, dt, dd tags to abandon the table list_HTML/Xhtml_Web page production

Now, more and more front-end developers are beginning to use xHTML CSS to replace the original table layout to complete the overall layout of the web page. This not only reduces the development and maintenance costs of the website, but also makes the code more semantic. However, this does not mean that table has disappeared since then. It is still used by many people as a necessity for data presentation in web pages, such as personal information data lists, etc. 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, table also has its place, that is, data tables with a large amount of data, but small data lists and forms do not need to use tables at all!
If you are still using traditional tables to create data lists, then please continue reading 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 tr tags to 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 need to add a class attribute to each td.

Copy code

The code is as follows:

> ;

Name:	Squall Li
Age:	23
Gender:	Male< ;/td>
Day of Birth:	26th May 1986

The following is the corresponding CSS code , we add styles to the classes previously declared in 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;
}

From the above code It can be seen that 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 virtually increase your workload, and the code will become slightly larger. What does more code mean? This means that website traffic is wasted, more chances of bugs are generated, and later maintenance is more difficult.
dl, dt, dd data list
Now let us take a look at the data list using HTML dl, dt, dd tags. First we use the dl (definition list-custom list) tag to accommodate the entire data structure, and then we use the dt (custom title) tag and dd (custom description) tag to accommodate the title and content in the data.

Copy code

The code is as follows:

Name:

Squall Li

Age:

23

Gender:

Male

Day of Birth:

26th May 1986< ;/dd>

In the css code, we only need to make dt and dd float 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, right? .
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 job easier!