1

Possible Duplicate:
Why not use tables for layout in HTML?

I've always heard that using tables for layout was a BIG NO NO. To my understanding, you were supposed to use div's and span's for layout.

I've been working on a site recently that has a lot of information that is directly side-by-side. Div's take up an entire line. Setting them to do otherwise in the CSS is annoying. If it is this hard to support, are div's actually made for this?

Tables just seem like the overall solution for it all. What are the downsides of using Tables vs. div's and span's?

For instance, I used tables to layout this here:

enter image description here

Community
  • 1
  • 1
Freesnöw
  • 30,619
  • 30
  • 89
  • 138
  • 3
    check this http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Sotiris Oct 04 '11 at 10:13
  • Generally speaking, yes, it is bad karma. However, show us your case, maybe you have to present tabular data or something. Explain it with sample HTML markup. :) – Shef Oct 04 '11 at 10:13
  • 2
    You aren't "supposed to use divs and spans", you are supposed to use **appropriate semantic markup** (which may include tables) and then describe the presentation of it using CSS. – Quentin Oct 04 '11 at 10:14

3 Answers3

4

Tables should be used to display tabulair data. For other cases, use div's and span's.

"has a lot of information that is directly side-by-side." sounds like tabulair data. I won't punish you for using tables in this case. EDIT
You've just edited your answer, and included your lay-out. Don't use tables!

For readability, your code should look like this:

<div class="cart">
    <div class="price"></div>
    <div class="quantity"></div>
    <div class="pay"></div>
</div>

Compare that lay-out to:
    <table>...<tr><td></td>....</table>

When one views the source of the first lay-out, he can get meaningful information from it. When viewing the source of the second option, on the other hand...

EDIT2 - Layout example

When creating a dynamic webshop, you should also take users who have disabled JavaScript into account. See Fiddle: http://jsfiddle.net/GRgkz/1/

I have created one <form> container element, in case the user has disabled JavaScript. Inside the form, I've added the lay-out. See the fiddle for the application logic.

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • 1
    Can you give me reasons why though? – Freesnöw Oct 04 '11 at 10:13
  • OK, that makes sense. Also, how would I replicate my current picture using `div's` instead of tables? – Freesnöw Oct 04 '11 at 12:05
  • 1
    I've just spent an hour to create an example for you: http://jsfiddle.net/GRgkz/1/ – Rob W Oct 04 '11 at 13:28
  • 1
    Wow, that is amazing. Thanks a ton. I would like to say though, it took me about ten seconds with tables. – Freesnöw Oct 04 '11 at 13:29
  • I've been messing with `margin` and `padding` to vertically center the contents. See http://stackoverflow.com/questions/5516630/align-middle-question for an easier, more reliable method to vertically align the element. About the 1 hour: I had to get the colors of your proposed image, create pseudo-code, and think of a model for the webshop (FORM). – Rob W Oct 04 '11 at 13:32
4

Tables should and always be used for tabular data, hence the name table.

For layouts which are not tabular, you should use <div> tags, occasionally <span> tags, newer html5 tags such as <header> <article> <nav>, other tags like <dd> <dt> <dl> <ul> <li> Using a combination of them, you will be able to create many different layouts.

Setting them to do otherwise in the CSS is annoying

No, this is completely wrong. It is only "annoying" if you do not know what you are doing. If you do not know what you are doing, then read up on html/css and how to properly use it. You are not going to learn everything quickly, and only through practice will you become a "guru" in the "art" of building cross browser websites.

Don't be lazy though, do it properly. External CSS files which style your html.

Edit

Looking at the HTML which you have added to your question, you certainly should NOT be using tables for this markup. This is a simple layout which can easily be achieved with <div> tags and some css markup.

Tim B James
  • 20,084
  • 4
  • 73
  • 103
3

Smashing Magazine has a wonderful article about this :

http://coding.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

Darklg
  • 593
  • 3
  • 5