Use DLs instead of tables for key / value lists

If you're looking to display a simple key/value list, such as a list of user's contact information, a table might be overkill. I'd suggest the use of the definition list. In my opinion, the syntax for this element is far simpler – leading to more manageable code. It's only downfall is how it's rendered on the page (value below key).

To make DL behave more like a table with columns, use the following CSS as a guide:

dt { float: left; clear: left; width: 100px; margin: 5px 10px 0 0; }
dd { float: left; margin: 5px 0 0 0; }


You may want to adjust the width of the dt if you expect larger amounts of text.