Tables vs Divs for page layout

Question

I know there are a lot of articles concerning the topic at hand. My mission is to achieve a fixed-fluid 2 column layout with sticky header and footer. After reading several articles, people claim that divs are better for building page layouts. I agree with that in certain cases. Can anyone tell me if what I am trying to accomplish, would be better with divs than a table. Can anyone give me a more simple solution with DIVs than the attached code using a TABLE.

CSS

   html,body{
     height:100%;
     width:100%;
     margin : 0;
   }

   table{
    height:100%;
    width:100%;
    border-collapse: collapse;
    border-spacing: 0
   }

   #top{
     height:100px;
     background-color:black;
   }

   #bottom{
     height:100px;
     background-color:blue;
   }

   #left{
     width:250px;
     background-color:blue;
   }

HTML

<html>
  <head>
  </head>
  <body>
    <table >
      <tr id="top">
        <td colspan="2"></td>
      </tr>
      <tr id="mid">
        <td id="left">
        </td>
        <td id="right">
       </td>
      </tr>
      <tr id="bottom">
        <td  colspan="2">
        </td>
      </tr>
    </table>
  </body>
</html>

HTML shoudl be semantical, ie the tag shoudl represent what its wrapped around. A table should hold tabular data and a div (division) should layout your page. Use the infom in the articles you've read to get strated and come back when stuck — DavidB, Feb 26 '13 at 15:35
Very quick mock-up of what I think you're after: http://jsfiddle.net/wSCsm/1/ Please don't use tables for this. Tables are for tabular data only. Not for general page layout, not for making it easier to align forms etc. — Billy Moat, Feb 26 '13 at 15:38
I see nothing in your example (or requirements) that gains benefit from using a table? Are you hoping to use some sort of auto-resize? If so, it would only be for the middle row correct? So that immediately eliminates the need for top/bottom rows - these can be replaced by DIV elements. and the table (if still required) nested inside a "mid" DIV — musefan, Feb 26 '13 at 16:38

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

If your code is for non-tabular data, then without even looking at your code I can tell you that the div element is better for layout than table.

For more information this SO article is quite useful:

Why not use tables for layout in HTML?

Can anyone give me a more simple solution with DIVs than the attached code using a TABLE

It's not about what's the simplest to code. Plus div layout is more scalable. In the long-run you will run into less roadblocks with divs.

edited May 23 '17 at 12:06

Community

1
1

answered Feb 26 '13 at 15:33

Curtis

101,612
66
270
352

Thank you for everyones responses. A special thanks to Billy Moat who actually posted code to prove the point (although header and footer is not supported on older IE). I do use divs as its purpose was intended to be a non tabular layout content holder, not tables. – cella Feb 27 '13 at 07:00

score -1 · Answer 2 · answered Feb 26 '13 at 15:35

-1

In my opinion, tables should only ever be used for tabular data - but that's my opinion. The point of using divs is that they're much easier to manipulate with CSS and don't come with built-in formatting that you then need to override. For fluid layouts, it's the hive-mind opinion that divs are better because they are inherently fluid while tables are not. But, really, it comes down to personal preference; in your case, you can do it whichever way your heart desires!

answered Feb 26 '13 at 15:35

Tammy Shipps

865
4
13

I find it funny that someone downvoted me for airing my opinion along with the truth. Gotta love the interwebs! – Tammy Shipps Feb 26 '13 at 15:40
3

I didn't downvote you, but I suspect it might be the *personal preference* part. It's not personal preference which is the correct method. Tables are for tabular data, divs are for layout. – Curtis Feb 26 '13 at 15:44
Yes, there is always a "Right" way to do things, but the truth of the matter is that there are other ways to do them, too. If he doesn't need the true beauty of fluid div layouts, then he can do what he pleases. Like I said in my post, tables are for tabular data, divs are for layout - but it would be lying to say you couldn't use tables if you really wanted to. It might not be the best way, but it is "a" way. – Tammy Shipps Feb 26 '13 at 15:52
1

I see your point, and the OP should feel free to do how they please. But in that case don't bother asking for a professional opinion on a Q&A site. – Curtis Feb 26 '13 at 15:58
Key word here, I think, is "opinion." – Tammy Shipps Feb 26 '13 at 16:00
If someone thinks your opinion is wrong they will downvote. That's the point of the voting. If you have any further issues with this I'd suggest raising it on the meta site http://meta.stackoverflow.com/ – Curtis Feb 26 '13 at 16:05
2

i also did not downvote, but i can't confirm what you say. there are standarts, that exist for several reasons. e.g. supporting screen readers. you for sure can design a page with *tables* and structuring the html code they way you want. But if you want to be kind to other people you should use the given semantic provided by the language. saying it exaggerated it is like in real life, you can always do what you want, but if you should do it is another question. – t.niese Feb 26 '13 at 16:09
Screen readers and accessibility standards only are required for websites that have them as legal or internal requirements. If you, as a personal dev, don't care about them, then you don't care. That's my point. He asked which is better, I said divs, but really, if you don't care about the divs benefits, then it doesn't matter. – Tammy Shipps Feb 26 '13 at 16:28
1

@Tammy. Not my downvote either, but I would say it was given for your answer being too opinion based. This kind of reply is best done as a comment I believe. Both you and Curt have good points, but I am with you in your logic. I have many times tried to argue with the same kind of logic, and just get slammed for it. I am guilty of using tables for layout. Not always, but if I want multiple elements to auto-align based on content, then Tables have always been the logical way (in my opinion). and hey, does it not (by definition) become tabular data just by being in a table? :P – musefan Feb 26 '13 at 16:30
Considering that someone down-voted his question, I'm just going to take it on faith that someone had a bad day and leave it at that :) – Tammy Shipps Feb 26 '13 at 16:43

Tables vs Divs for page layout

2 Answers2