Is it better to use divs or tables to contain columns of links?

Question

I have a page with 3 columns of links at the bottom. Each column is put into a div and all three divs are wrapped into a big div that is centered on the page. Is this something that is better suited to a table or is a table the wrong element for the job?

Answer 1

You can also use <ul> & <li> for this.

#horizontal {
    width: 100%;
    background: #eee;
    float: left;
}

#horizontal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 12em;
    float: left;
}

This will create horizontal columns using li elements, and then you can stuff the HTML to create individual links in each li.

Answer 2

The Rule of Thumb is:

Use Divs for layout, tables for tabular data.

On a side note, check out etymology of the term Rule of Thumb, quite humorous.

Answer 3

the question you want to ask yourself is, are your links a part of any tabular data?

if yes, tables are your choice. If no, then you should use divs.

Its important to use the semantically correect element to create a page, although other elements may result in the same effect, possibly with less effort.

As for your links, it seems they are not part of a table. I'd suggest the use of divs and proper css.

jrh

Answer 4

I don't think tables are a good choice for this. Simply having three columns doesn't constitute tabular data in my book. With some clean markup and a good stylesheet, you can have a much more flexible way to accomplish this. If you use left floated divs, simply give them a percent width so that they fill up the parent container (100 / number of elements)%. That way, if you want to add another column its a simple markup change a single stylesheet change. This way you wont have to deal with browser table wonkyness and have a great deal more flexibility in its design - on top of that you can change the layout completely without leaving your stylesheet.

Answer 5

The main principle behind HTML is to "markup" the MEANING of your data.

I'll use the above principle as a guide:

1. If you have 3 columns just because it looks nice - then there is no meaning to your columns, and you should try to use DIVs (which are meaningless "container" elements).

2. If you have 3 columns because there are 3 categories of links, then a TABLE is fine. Imagine if you gave headers to each list of links - this makes a TABLE with a THEAD necessary.

3. And in fact, each column is an "unordered list" - which translates into a UL element with LI elements.

4. And since you have a list of links, you will use, of course, A elements.

So from first-principles, you should have this structure:

<DIV> or <TABLE> (with <TR>/<TD>)
 -> <UL>
 ----> <LI>
 -------- <A> 

Answer 6

Contrary to other answers, a table could be a semantic solution. If the three sections are distinct from each other and have a title, you can use <th> for the titles and <td> for each of the links. I think that's perfectly semantic.