CSS: Is table, DL, DT, and DD used for simple columns?

If the table is not complex, it only contains several rows and columns, or uses DL. dt. dd. If complex data is displayed, such as registering the personal information list, we recommend that you use table.

Table data list:

Data list of traditional tablesCodeAs shown below. We need to add a TR tag for each row, and then add a TD tag for the title and data respectively. Because the tag is TD, we need to add the class attribute for each TD if we want to add a style.

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

Corresponding CSS code:

 
/* 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 code above, we can see that if you want to use the table label to modify or modify the content using CSS, you need to add some corresponding class attributes for the TD cell. This increases your workload, and the code will slightly increase. What does Code increase? This means that the website traffic is wasted, increasing the chance of generating more bugs, and making it more difficult to maintain the website later.

 

DL, DT, and DD data list:

Now let's take a look at the data list using html dl, DT, and DD tags. First, we use the DL (definition list-custom list) label to accommodate the entire data structure. Then we use the DT (custom title) label and DD (custom description) label) label to hold the title and content in the data.

 <  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 css code, we only need to float DT and DD to the left.

 
DL {margin-bottom: 50px;} DL dt {Background: #5f9be3; color: # FFF;Float: Left; font-weight: bold; margin-Right: 10px; padding: 5px; Width ;}
 

The same effect is achieved. You can see that the DL, DT, and DD code is simpler, smoother, and more semantic-compliant, thus reducing the development and maintenance costs of the website.

Here, if you are still using the table label to complete web forms or other web page la s, it is time to change your code. Make your work easier!

How to Use DL, DT and dd html tags to list data vs table list data