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

MYSQL 5.6 Deployment and monitoring of slave replication

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

MYSQL 5.6 Deployment and monitoring of slave replication

Some simple implementation codes of the form element take registration as an example

MySQL password is correct but cannot log in locally -1045

Do you know the meaning of special symbols in URL?

10 very good CSS skills collection and sharing

Detailed explanation of the differences between js array find, some, filter, and reduce

Implementation of Docker deployment of ElasticSearch and ElasticSearch-Head

Web developers are concerned about the coexistence of IE7 and IE8

Detailed explanation of how Tomcat implements asynchronous Servlet

This article will show you what Vite does to the browser's request

Recommend

Install Tomcat on Linux system and configure Service startup and shutdown

Detailed graphic tutorial on installing Ubuntu 20.04 dual system on Windows 10

How to deploy tomcat in batches with ansible

Graphic tutorial on configuring log server in Linux

How to use multi-core CPU to speed up your Linux commands (GNU Parallel)

Linux system command notes

Introduction to html form control disabled attributes readonly VS disabled

Create a screen recording function with JS

Solution to MySQL unable to read table error (MySQL 1018 error)

How to install Element UI and use vector graphics in vue3.0

Solve the problem that Navicat cannot connect to the MySQL server in the Centos system in VMware

Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS

Solve the problem of being unable to log in when installing MySQL on mac using homebrew

Reasons and solutions for not being able to detect array changes in Vue2

Detailed explanation of how to query fields containing '%' in MySQL like (ESCAPE usage)