CODEWITHSUNDEEP
javascripthtmlcsscss-tables
Michael Swarts
Michael Swarts

Reputation: 587

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

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?

Upvotes: 3

Views: 375

Answers (6)

DisgruntledGoat
DisgruntledGoat

Reputation: 72550

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.

Upvotes: 0

Kirtan
Kirtan

Reputation: 21695

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.

Upvotes: 11

Jeff Meatball Yang
Jeff Meatball Yang

Reputation: 39037

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>

Upvotes: 0

user19302
user19302

Reputation:

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.

Upvotes: 0

jrharshath
jrharshath

Reputation: 26583

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

Upvotes: 0

Jack Marchetti
Jack Marchetti

Reputation: 15754

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.

Upvotes: 2

Related Questions