DL, DT, DD labels vs traditional table to implement data list

ArticleDirectory

• Table data list
• Data list of DL, DT, and dd

In the past, many web designers liked to use table layout to form a Web page. However, it would be quite difficult to debug and maintain the web page later. Nowadays, more and more front-end developers begin to use XHTML + CSS to replace the original table layout to complete the overall layout of the webpage, which not only reduces the development and maintenance costs of the website, but alsoCodeAlso more semantic. However, it does not mean that the table disappears, but it is still used by many people as a necessity for data performance on webpages, such as the Personal Information Data list. In fact, using html dl, DT, and DD tags will save you more code and make the Code conform to the semantics of the content. Of course, table can also be used, that is, a data table with a large amount of data, but small data lists and forms can completely avoid using tables!

If you are still using a traditional table to create a data list, go on to see how the html dl, DT, and DD labels make your work easier...

Table data list

The code for the data list of a 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 respectively. Because the tag is TD, we need to add the class attribute for each TD if we want to add a style.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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

Below is the correspondingCSSCode, we add a style for the class declared in HTML.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* 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.

Data list of DL, DT, and dd

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.

1 2 3 4 5 6 7 8 9 10

<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, DT, DD tags List Data */

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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 DL, DT, and DD instances, you should be able to clearly see that their code is simpler, smoother, and more semantic-compliant.

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!

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