Is It Better To Use Divs Or Tables To Contain Columns Of Links?

April 21, 2024 Post a Comment

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 tha

Solution 1:

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

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

#horizontalul {
    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.

Solution 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.

Solution 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

Solution 4:

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>

Solution 5:

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.

Html5 Lite