Many past web designers would love to create web design using table
and it has been the Achilles point for web developers when it comes to
debugging. Now, however when it come to listing data on a web page,
example listing data of a profile, many people would use a HTML table
instead. In fact, by using HTML dl, dt, dd tags, you will
save on writing more codes and add more semantic value to the content.
Whereas table are best use for tabular data, and should not be use in
listing data, web form or web layout.
If you are still creating list data using table, look below and compare on how to make your life easier with HTML dl, dt, dd tags.
Live Demo | Download Demo
It may both look identical, but look closely behind the codes.
Table List Data
A typical listing data using table can be as follow. First we have a tr table row to hold the title and the data td table cell. Then when we need to style the title element, we will need to give a class to that td table cell.
01.<table>
02. <tr>
03. <td class="title">Name: </td>
04. <td class="text">John Don</td>
05. </tr>
06. <tr>
07. <td class="title">Age: </td>
08. <td class="text">23</td>
09. </tr>
10. <tr>
11. <td class="title">Gender: </td>
12. <td class="text">Male</td>
13. </tr>
14. <tr>
15. <td class="title">Day of Birth:</td>
16. <td class="text">12th May 1986</td>
17. </tr>
18.</table>
So over here in the CSS, we style the title class that we had declare in the HTML.
01./*TABLE LIST DATA*/
02.table {
03. margin-bottom:50px;
04.}
05.
06.table tr .title {
07. background:#5f9be3;
08. color:#fff;
09. font-weight:bold;
10. padding:5px;
11. width:100px;
12.}
13.
14.table tr .text {
15. padding-left:10px;
16.}
From here you can see that if you want to change the design or format for the title in the CSS, you will need to give each td
for the title a class. If you want to style the data as well, you will
need to give a class to it as well, so you are actually writing a lot
of codes. More codes mean larger file size to download, more chances
for bugs and harder for you to maintain.
DL, DT, DD List Data
Now, let's look at using HTML dl, dt, dd tags for listing the data. First we have the dl (definition list) tag to hold the whole set of data, next we have dt (defines the item in the list) tag and dd (describes the item in the list) tag to hold the title and the data.
01.<dl>
02. <dt>Name: </dt>
03. <dd>John Don</dd>
04.
05. <dt>Age: </dt>
06. <dd>23</dd>
07.
08. <dt>Gender: </dt>
09. <dd>Male</dd>
10.
11. <dt>Day of Birth:</dt>
12. <dd>12th May 1986</dd>
13.</dl>
Over at CSS, we will need to float the dt tag, so that the title for the list data will align to the left. The rest of the styling is up to you.
01./*DL, DT, DD TAGS LIST DATA*/
02.dl {
03. margin-bottom:50px;
04.}
05.
06.dl dt {
07. background:#5f9be3;
08. color:#fff;
09. float:left;
10. font-weight:bold;
11. margin-right:10px;
12. padding:5px;
13. width:100px;
14.}
15.
16.dl dd {
17. margin:2px 0;
18. padding:5px 0;
19.}
From dl, dt, dd tags example, you can see that the codes are lesser, sleeker and much more semantic.
Live Demo | Download Demo
So if you are still using table to consolidate or list your data on
the web form and web layout, it's really time now to make the switch.
It's definitely going to make your life a lot more easier.