CSS Forum

**Bulevardi** · 08-07-2008, 10:55 AM

Okay, there are lots of people pro or contra tables or divs.
Lots of people say tables are for tabular data only and divs are for layout. Both have their uses and issues.

There's nothing wrong with using tables for layout. Search engines and spiders don't care one way or another. Neither do your visitors.

I made already a few websites and some with tables, some with divs. (I don’t want to mention the frame websites I made ages ago, did I just mention…) But I couldn’t go all the way I wanted with divs.

Some people say “tables” versus “css”… but it’s “tables” versus “divs” because you can specify tables with css too.
The layout of both divs as well as tables you can define in external css files.
For some more complex things I tried, tables give me the right results cross-browser, while divs always look different. This when using normal webstandards from W3schools. Besides, you can mix both tables and divs and spans and… together.
If you see sites like this: http://www.komettails.net/ you see you can make pretty websites with both techniques. But I rather prefer tables, you can specify menus more specific for backgrounds.

Using multiple css files for different browsers and a javascript to detect the browser is definitely not the solution. The reason why I use css is that I only have to change 1 file, and not 1 per browser.

Some say: “divs offer more flexibility, u can change the layout of the complete site by just changing a few things in the css!”
But for me, it’s lots more puzzling to get it right with all browsers and I never get it specific where I want. Flexible and userfriendly… hmm.
In contrary, with tables, you have a layout in normal flow that you can’t change quite flexible out of the static structure. But, if you have a good layout for 1 website, you’re not going to change it totally every 2 months… So when you made a good website, you keep it that way and it mostly lasts for a long time… you’re mostly making a new layout when you’re making a new website.

Some people say the page loads very longer with tables… well, for small websites, that few microseconds don’t bother me nor my bandwidth, and there’s not much more code for the tables I use.
For my website I used some tables to create a raw construction. Not hundreds of tables nested in each other.

Some other things to mention:

- div overlappings
- nested divs give bugs for background-images in FireFox
- no problems with floats
- no problems with clear
- no problems with vertical-align and height problems
- no problems with positioning
- no problems with white space
- browser incompatibility
- …

It’s supposed to be good for layout… of course you can handle it properly when you have a basic website with a basic design and layout. But there are lots of problematic situations to conquer when you want some more specific personalised complexer website.

I know divs can have advantages, but I don’t want to do lots of workarounds or hacks to avoid stupid problems.
For some people like me, it’s faster to design in tables. How ‘bout you?
So some are pro, some are contra. Discuss here!

**Bulevardi** · 01:23 PM

Look at this good tutorial:
http://css.maxdesign.com.au/floatuto...torial0816.htm

If you use this code, save as .html and put a green background image in the contentbackground div. You'll notice it's totally not browsercompatible for lots of reasons.

Code:

<html>
<head>
<title>test</title>

<style>
body {
  background-color: #FFFFFF;
  background-image:url("background.jpg"); background-repeat: repeat-x; background-attachment: fixed; background-position: top center; 
  font-family: Arial;
  color: #000000;
  font-size: 3mm;
  text-align: center;
}

#container {
  width: 800px;
  margin: 0px auto;
  background-color: #fff;
  color: #333;
  border: 1px solid gray;
}

#header {
  width: 800px;
  background-color: #666666;
  border-bottom: 1px solid gray;
}

#contentbackground {
  background-image:url("background2.jpg"); background-repeat: repeat-Y; background-attachment: fixed; background-position: top center; 
}

#leftcontent {
  background-color: #0099FF;
  float: left;
  width: 200px;
}

#rightcontent {
  color: #FFFFFF;
  width: 590px;
  background-color: #333333;
  margin-left: 200px;
  border-left: 1px solid gray;
}

#footer {
  clear: both;
  color: #666666;
  background-color: #ddd;
  border-top: 1px solid gray;
}

</style>
</head>

<body>


<div id="container">

<div id="header">
Place for header background, logo, navigation, ... 
</div>

<div id="contentbackground">

<div id="leftcontent">
<p>
Here comes some menu stuff, this div needs to be modded with another background on top of the contentbackground. 
It will get less higher than the rightcontent div and the contentbackground needs to stretch vertically equally until the footer.
</p>
</div>

<div id="rightcontent">
<p>
Here comes the content... this div also needs to be modded with another background on top of the contentbackground.
</p>
The 'contentbackground' needs to fill the whole left and rightcontent plus the footer. That's why that div is around (leftcontent, rightcontent footer).
If the rightcontent is shorter than the leftcontent, the contentbackground needs to stretch vertically until the footer.
<p>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
<p>
Now you see that the left blue background isn't moving down until the bottom...<br>
You don't see the green background when using FireFox.<br>

The tutorial to make this page: <a href="http://css.maxdesign.com.au/floatutorial/tutorial0816.htm" target="_blank">tutorial</a><br><br>

</p>
</div>


<div id="footer">
Footer
</div>

</div>


</div>


</body>
</html>

**wayfarer07** · 08-07-2008, 11:29 AM

Don't even get me started. Divs are 100% more efficient and dynamic-friendly than table-layouts, whether you nest them or not. There are browser compatibility issues with any design.

Refusing to use divs because of the simple issues you outlined above only illustrates your ignorance on the subject.

CSS layouts:
1.have smaller HTML code.
2.produce more efficient memory use
3.have flexible models that can be changed around
4.are better for sitewide improvement
5.are easier to change the structure of
6.are compatible with more JavaScript libraries.
7.are easier to use with fancy frontend displays
8.are easier to integrate with a database(because of smaller HTML code size)
9.have better seperation of styles and markup (and hopefully behavior also), to make for smoother team-projects
10.are faster to produce
11.are based on standards
12.make on-page SEO easier
13.are more semantically and structurally sound
14.do you want me to keep adding to this list? I can double it if you wish. Table layouts have almost zero advantages.

**Bulevardi** · 08-07-2008, 01:25 PM

Yes I see. I already made some websites with divs, but still, for me personally it's more easy. I guess I have to practice more...

The real funny thing is that the big webstandard website about css is made full of tables

http://www.w3schools.com/css/

**LadynRed** · 01:55 PM

Quote:

There's nothing wrong with using tables for layout.

Oh please... I'm with Wayfarer - don't even get me started on how wrong that is.

However, I'll let some industry gurus say it all - just read this presentation:
http://www.hotdesign.com/seybold/everything.html

Tables were NEVER meant to be used for layout - it's just that some bright folks figured out how to get some modicum of layout control with HTML markup by using tables way back in the 90's, it's all we had - but tables were ALWAYS meant for data, and that's exactly what they should be used for today!

IMO, if you are going to sell services as a 'professional' web designer, you should NOT be laying out sites with tables. Additionally, true professionals continue to learn and grow, and sticking to tables for layout is just... well.... lazy.