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?
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.
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
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.
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.
The main principle behind HTML is to "markup" the MEANING of your data.
I'll use the above principle as a guide:
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).
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.
And in fact, each column is an "unordered list" - which translates into a UL element with LI elements.
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>
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.