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.
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 tdtable cell. Then when we need to style the title element, we will need to give a class to that td table cell.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <table> <tr> <td class="title">Name: </td> <td class="text">John Don</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">12th May 1986</td> </tr></table> |
So over here in the CSS, we style the title class that we had declare in the 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 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
| <dl> <dt>Name: </dt> <dd>John Don</dd> <dt>Age: </dt> <dd>23</dd> <dt>Gender: </dt> <dd>Male</dd> <dt>Day of Birth:</dt> <dd>12th May 1986</dd></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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| /*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 dl, dt, dd tags example, you can see that the codes are lesser, sleeker and much more semantic.
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.
Rather than using td.title I think it would be more appropriate to use a th element. It eliminates the need for the .title class (as well as the "text" class) and actually makes more sense.
Name:
John Don
Wouldn't you agree?
Hi Zack,
Yes you are right.
But even if you use "th" element, it is still not as semantic as using definition list.
Thank for sharing. :)
Hi Terrance,
Awesome tutorial and explanation. Thanks a lot. Keep doing the good work.
With Regards,
Sagar S. Ranpise
Hi,
I have a small problem with the DL-way:
when I tell the dl to have a "width: 50%", I get this result:http://img19.imageshack.us/img19/9537/ss20091001104849.png
Can you help me with more css?
Hi Tom,
Change width:50%; to pixel (px). If you want to keep it fluid with width:50%;, then add padding-left to your dl dd.
hope this helps!
Hello Tom,
You can simple use this in css and may be sure that you will solve your problem
dl {margin:0; padding:0;}
dl dt{font-weight:bold; float:left;}
dl dd{margin:0 0 2px 90px; padding:0;}
If you want to change width then you can do and if you want to use same width in % or in pix, it is working with both.
There are problems with dt, dd.
In case the height of the content within dt is higher than of the content within dd, the dd is not resizing automatically to have the same height... This leads to lot of problems...
Thanks for the information. That would really help clear a lot of doubts for a whole lot of people. It is always better to use more efficient code for better efficiency. Looking at it differently, this could also save the environment as better efficiency means more productivity using lesser resources. Now that is green coding. Our green news features many ways to use computers to save the environment.
How to make third column using this technique.
What can one do, if a is somewhat longer and goes over two lines? In your css the float breaks the whole layout. Is there a solutions using these tags?
The one that continues using tables is because it does not dominate or does not know CSS. To design in CSS is far better, by the subject of order, maintenance, accessibility, navigability and thousand reasons more.
Use the th-Element for Head-Elements in the table and you will have the same. A table ist better to handle as the dt and dd, if you want to define absolute widths for it. I used at the Beginning the dt and dd-Elemnts by my Projekt and after many annoyed days i started to use tables. They are much better to handle and have saved me a lot of time.
just my opinion.
Using tables in 2010 for anything other than very complex tabular data (which is what tables were originally meant for anyway) is like keeping a leisure suit from the 70's on the basis that it still fits you. Just because you can, doesn't mean you should. Good luck - maybe we'll see you on page 499 of 500. :-)
Nice article, thought I'd just add my two cents to help the dd forms a little more obvious semantically.
Field 1:
I do still use table in my designs, although quite sparingly, they do have their uses still, particularly regarding backwards compatability.
ahh, looks like the html is encoded into the post, d'oh!
Greet Article, I'm looking for dl, dt, dd.
When I first saw people using it this way I was like Wow!
Then I read http://www.w3.org/TR/html401/struct/lists.html#h-10.3
Please correct me if I'm wrong. I think the purpose of DL, DT, DD is for definition (just my personal understanding from the documentation).
I would generally use the below instead because these tags seem to be designed particularly for this purpose.
- To display data - use label-span pair
- To input data - use label-input pair
And I apply the same style you use for DT to label.
Thanks for sharing.
@Ming, one thing upsets me about your comment: That it took 15 months before someone reading this page pointed it out! You are absolutely right — this is an inappropriate use of DL, DT, and DD.
DL should mark a list of definitions — a glossary, for example.
DT marks a term to be defined, not a label for a field.
DD marks the definition of that term, not a data field.
As you point out, CSS is the tool to use to control the appearance of text. The html tags are to be used to label the semantic structure of each item. The take-home lesson is to learn the purpose of each tool in the kit provided through the W3C and then to use a tool for its intended purpose.
Lighter code is still junk code if it's semantically incorrect.
Nice tutorial you have posted here but your CSS rules for the and tags have not put one thing into consideration.
Assume that your s all have one line as your example here has clealy show but one or two tags contain contents that span across two lines, what would happen then? There would be a distortion of the total structure.
Now don't get me twisted, i don't use tables for my layouts (only when necessary) but your execution of this stylesheet isn't carefully thought about.
Be sure to add "clear:both;" in the css to make sure each row always lines up regardless of the height.
dl dt {
float:left;
clear:both;
width:100px;
}
dl dd {
float:left;
}