0

I need to display a simple two column list. Options as I see it are a <table>, an <ul>, or a <dl>. Is one way "better" than the others? I suppose I define "better" as consistently rendered in all relatively modern browser, more semantically correct over the other, more accessibility, etc.

+--------------+-----------------+
| Name         | John Doe        |
| Address      | 101 Main Street |
| City         | Doomview        |
| State        | NY              |
| Zipcode      | 12312           |
| Phone Number | (555) 555-1212  |
+--------------+-----------------+
Improve this question

3 Answers 3

Reset to default
1

I've been stuck with this question for a while too. I've decided to go with the <dl> element.

Semantically, I feel that a <table> doesn't quite capture what you're doing. Tables should be used for tabular data, which to me means columns (= properties) and rows (= entities).

According to MDN:

The HTML Element (or HTML Description List Element) encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

In this situation however we seem to only have 1 entity, which essentially is a key => value list, aka a DL.

I'll link to an example for styling a DL as a table: http://www.onextrapixel.com/2009/05/13/how-to-use-dl-dt-and-dd-html-tags-to-list-data-vs-table-list-data/
and the result: http://www.onextrapixel.com/examples/dl-tags-vs-table/

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yes, but can you style the dl the same as a table? With border colors, background colors. etc.?
Yes, I've been stuck with this question for a while too. I agree that <dl> is more semantically correct, however, more CSS is required and rendering is sometimes an issue if the element is empty (I use &nbsp; to fix it). Good link you posted.
There's an "easy" choice, a "correct" choice, and the "best" choice. The easy choice is a <table>, the correct choice is a <dl> and the best choice is up to you to decide.
1

Yes and no. No way is "better" than the other. The only way each option could be "better" is what each are used for.

See here for a good list of what each tag are used for: http://www.w3schools.com/tags

In your case, you are wanting a layout that looks a table with two columns. In this case, i would use the <table> instead of the other tags, since you are wanting a table layout.

The usage of the <dl>

The <dl> tag defines a description list.

The usage of the <ul>

The <ul> tag defines an unordered (bulleted) list.

The usage of the <table>

The <table> tag defines an HTML table.

Improve this answer

6 Comments

Definition lists seem like a good choice - iandevlin.com/blog/2012/01/html/… As Name is linked to a value.
Thanks Elite. I know tables are "old fashion" but they do work well. The defined list seems more semantically correct as "address" is the definition of "101 Main Street". But is that all so important?
For the layout you want, i would thing the <table> tag would be the most logical choice depending on your layout you are requesting. @user1032531
If we're talking about layout, we should be talking about CSS. HTML should be semantic and there's no "logical" choice for layout reasons. As you can tell by my own answer, you can style a DL like a table. Frankly, you can style anything as a table.
@Bart agreed. But are there not two columns? Columns usually go with tables.
|
0

The table design is an old way to design websites, so use them only when you really want the table style. Use instead div design. And for lists use ul with li elements inside. You can use something like this:

<div id="left-col">
    <ul>
        <li></li>
        <li></li>
    <ul>
</div>
<div id="right-col">
    <ul>
        <li></li>
        <li></li>
    <ul>
</div>

But if you want a table with borders then use the <table> tag

Improve this answer

4 Comments

Yes, old websites where designed with tables, BUT for layout purposes, tables are perfect.
If you want the table style (borders and so...) you have to use the table BUT table shouldn't be used for design the structure of the website. This is deprecated.
Yes, agreed. But his question really does not state he is using the <table> to design his entire site.
Agree, I am not laying out a website, just the exact list I showed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.