views:

140

answers:

6

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?

+2  A: 

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.

Jack Marchetti
I consistently run into the following problem: I follow the rule of thumb, so I use DIVs. Then I get some interfering styles at some point, which forces me to try a TABLE... and it just works.
Jeff Meatball Yang
Whenever it comes to style, there should be some way/hack to accomplish. AND if it really can't works, I would try JS to help in the styling. No matter what, I will not trade off the PROPER formatting for pure display decision.
xandy
"Rule of Thumb" does NOT come from wife-beating, if that's what you meant :p
DisgruntledGoat
A: 

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

Here Be Wolves
+10  A: 

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.

Kirtan
+1 for semantics. What the OP is describing is a *list* of links. It ought to be a *list* element. :-)
Ben Blank
seconded +1 for semantics
Darko Z
If each list has its own title, you could use `<dl>` instead, with `<dt>` and the title and `<dd>` for each of the links.
DisgruntledGoat
A: 

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.

nlaq
I'd suggest that you amend the percentage calculation to something akin to (floor(100/number-of-elements))% just to allow for the browser's percentage width-to-pixels issues. I can't remember if this is particularly worse in one browser or another, but it can occasionally cause problems if the widths equal exactly 100%, especially if borders are also added.
David Thomas
A: 

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>
Jeff Meatball Yang
A: 

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.

DisgruntledGoat