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

Detailed explanation of how to configure Nginx web server sample code

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

Detailed explanation of how to configure Nginx web server sample code

Analysis of the HTML writing style and reasons of experienced people

Explanation of the configuration and use of MySQL storage engine InnoDB

Example code of vue custom component to implement v-model two-way binding data

CSS scroll bar style modification code

Discussion on the Issues of Image Button Submission and Form Repeated Submission

Detailed explanation of how to use several timers in CocosCreator

Detailed explanation of the default values of width and height in CSS: auto and %

js to realize the rotation of web page pictures

CentOS8 - bash: garbled characters and solutions

Recommend

Detailed steps for installing MinIO on Docker

Explanation of the basic syntax of Mysql database stored procedures

React implements dynamic pop-up window component

How to use libudev in Linux to get USB device VID and PID

Examples of simple add, delete, modify, and query operations using mysql statements

Detailed explanation of the 10061 unknown error when using Navicat to connect to a remote Linux MySQL database

Specific use of MySQL binlog_ignore_db parameter

In-depth explanation of MySQL isolation level and locking mechanism

Detailed explanation of MySQL injection without knowing the column name

Detailed explanation of native Javascript inheritance methods and their advantages and disadvantages

Tomcat parses XML and creates objects through reflection

Solution to Workbench not connecting to MySQL on Alibaba Cloud Server Ubuntu (tested)

Solution to MySQL Chinese garbled characters problem

The latest Linux installation process of tomcat8

Vite introduces the implementation of virtual files