Pure CSS vs Tables

A debate of sorts

Page 1 of 1

12 Replies - 2414 Views - Last Post: 21 August 2008 - 09:26 AM

#1 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1148
  • View blog
  • Posts: 7,153
  • Joined: 07-September 06

Pure CSS vs Tables

Posted 26 July 2008 - 10:24 PM

I believe this is the proper place to post this as it is a debate between CSS and the use of Tables in a website, but if not feel free to move it.

I understand that many people believe it to be bad practice to use tables to get a website skin to look like they want it to, I am fine with that. What I don't understnad is how people can expect website skins to look the smae without the use of tables in them. Table a look at most div based 2+ column websites. They have the content (or perhaps the menu) column longer than the others with a solid color bachground and think it looks nice?

Perhaps I am mistaken, but I don't think there is a way to easily get all the columns to be the same height without using tables (and if anyone has a quick example of how to make the divs work like that I would be more than happy to take a look at it).

So, now onto the debate.

Do you think it is better to use HTML tags whenever possible (including things like <center> and tables)? Or do you think it is best to try and go for the pure CSS approach? Why?

This post has been edited by BetaWar: 26 July 2008 - 10:24 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Pure CSS vs Tables

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4337
  • View blog
  • Posts: 12,137
  • Joined: 18-April 07

Re: Pure CSS vs Tables

Posted 26 July 2008 - 10:27 PM

I find that balancing the two is the perfect solution at this current stage. I typically use a table to create the basic framework and then fill it with CSS items. The table holds up the structure of the page very well across the browsers and then the CSS does the individual layout of items fantastic.

Allows me to build some nice flexible content with a bit of sturdiness to it.

:)
Was This Post Helpful? 0
  • +
  • -

#3 no2pencil  Icon User is online

  • Admiral Fancy Pants
  • member icon

Reputation: 5327
  • View blog
  • Posts: 27,246
  • Joined: 10-May 07

Re: Pure CSS vs Tables

Posted 26 July 2008 - 10:27 PM

My understanding is that the use of DIV tags & css will allow your page to load faster than tables.

Plus with tables the images & alignment will shift all around as the page loads. Again, it is my understanding that this doesn't happen with DIV tags & css, because the content will load in the specified area.

Just like Martyr2 said, I'll use both, as I can get the project done faster with tables. Then I can fine tune it as must as I care to with Div tags & css. It's usually a work in progress for me.
Was This Post Helpful? 0
  • +
  • -

#4 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1148
  • View blog
  • Posts: 7,153
  • Joined: 07-September 06

Re: Pure CSS vs Tables

Posted 26 July 2008 - 10:47 PM

Same with me (though I tend to use span tags more thna divs as of late) Tables for the basic lyout and divs/spans for most everything else. It makes it stay clean and everything while allowing control over various objects.

Thanks for the replies guys, I have just seen a lot of things asking specifically about Div 2+ column layouts on this and other forums and was wondering why people were so into them. It makes me happy(ier) to see that I am not the only one to use tables for main layout design.

<edit>
<BACKWARDS QUOTE>

Martyr2 said:

Personally I don't think the browsers have come far enough to implement CSS in a standard way with one another so you find yourself fighting IE CSS bugs etc.


Is it IE bugs, or do all the other browsers in the world have the smae bugs???

Sorry, thought that would be funnier than it turned out to be, and either way I didn't think it was worth a new post.
</edit>

This post has been edited by BetaWar: 26 July 2008 - 10:56 PM

Was This Post Helpful? 0
  • +
  • -

#5 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4337
  • View blog
  • Posts: 12,137
  • Joined: 18-April 07

Re: Pure CSS vs Tables

Posted 26 July 2008 - 10:50 PM

Well there is a lot of buzz about them because like already mentioned they do tend to load a little faster, they are great for SEO and it can give you some very specific pixel level control.

Personally I don't think the browsers have come far enough to implement CSS in a standard way with one another so you find yourself fighting IE CSS bugs etc.

:)
Was This Post Helpful? 0
  • +
  • -

#6 didgy58  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 246
  • Joined: 23-October 07

Re: Pure CSS vs Tables

Posted 28 July 2008 - 09:03 AM

are we talking about creating a whole site using tables or just information that you believe should be outputted in tabulated form, for instance a tariff for a hotel. something like this i would layout in a table apart from that its all divs and css.

mainly due to the fact that i was told i should learn how to do it this way if i want to work in a web dev/design firm, so thats what i did, i have also heared along the lines that it also helps with SEO, but im not 100% sure about this, maybe someone here could elaborate. i bet martyr2 will know.

and i do wholy agree with martyr2 comment about browsers not being compatible enough/ or standard enough with each other, i would say that i spend about 30-40% of the time ironing out little bugs or tweeks for specific browsers. as for some strange reason a lot of the clients i seem to be getting are using ie 6 or safari version 1 or 2. and these seem to cause no end of trouble and its not like i can be rude and tell them to just update as they are paying, and they could always come up with "what if the market im aiming at is all using the same browser"

BetaWar what do you mean make the colums the same height with Divs, cant u just the height in css
#div {
height:300px;
}



or am i thinking the wrong thing here?

Dan
Was This Post Helpful? 0
  • +
  • -

#7 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1148
  • View blog
  • Posts: 7,153
  • Joined: 07-September 06

Re: Pure CSS vs Tables

Posted 28 July 2008 - 03:05 PM

Quote

BetaWar what do you mean make the colums the same height with Divs, cant u just the height in css
#div {
height:300px;
}


or am i thinking the wrong thing here?


That would generally work, but if you don't know how large the div will be (like it is holding your page content adn that content length changes from page to page) it wouldn't look the same/right depending on the page you are viewing. I may be wrong here, but I don't think setting a static height will do the trick.

<edit>
Okay, digdy I found a way to do what I was thinking of, but it requires you to use javascript (and thus javascript needs to be enabled).

Here it is (I also posted it in the snippets section)

<style>
body{
  margin: 0px;
  padding: 0px;
  text-align: center;
}
.holder{
  text-align: left;
  width: 740px;
  background: transparent;
  margin: auto;
  border: 1px solid #999;
}
.content{
  width: 588px;
  background: #eee;
  float: left;
  padding: 2px;
}
.menu{
  width: 150px;
  background: lightblue;
  float: left;
  padding: 2px;
}
</style>
<br><br>
<div class="holder" id="h">
  <div class="content" id="c">
	The main page content will go here.
<BR><BR><BR>
  </div>

  <div class="menu" id="m">
	Menu stuff here
  </div>
</div>
<br>

<script>
nid = document.getElementById("c");
id = document.getElementById("m");
id.style.height = nid.offsetHeight;
</script>


But I am still looking for a way t do this without js if possible.

</edit>

This post has been edited by BetaWar: 28 July 2008 - 04:42 PM

Was This Post Helpful? 0
  • +
  • -

#8 didgy58  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 246
  • Joined: 23-October 07

Re: Pure CSS vs Tables

Posted 29 July 2008 - 02:18 AM

im not sure if this is along the lines you are looking for

http://www.girendra....umns-using-css/

but they are creating equal colum divs in here without setting heights.
and no js
Was This Post Helpful? 0
  • +
  • -

#9 Trake  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 115
  • Joined: 29-June 07

Re: Pure CSS vs Tables

Posted 29 July 2008 - 02:49 AM

I work with html/css a lot as I am one of the web managers here building/maintaining lot of small to medium sites and a few larger ones where I work.
I was taught web design using divs and css so thats how I do it. But I do admit that there are a lot of little style bugs you have to overcome , especially in IE, and it takes time to fix them all but in the end you get a better split of design and content especially if you intend using the same design over more than 1 website or on other web applications etc.
Just recently though my company has had to rework a lot of our emails into tables as Outlook 2007 doesn't support css properly which really feels like a step backwards from Microsoft :(
But we do use 2 and sometimes 3 column designs with pure css/xhtml although of course we have .NET sites so we have masterpages etc to help since it makes no sense to reinvent the wheel
Was This Post Helpful? 0
  • +
  • -

#10 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Pure CSS vs Tables

Posted 29 July 2008 - 06:24 AM

View PostBetaWar, on 27 Jul, 2008 - 12:24 AM, said:

What I don't understnad is how people can expect website skins to look the smae without the use of tables in them. Table a look at most div based 2+ column websites. They have the content (or perhaps the menu) column longer than the others with a solid color bachground and think it looks nice?
Various places on the Web demonstrate how its possible to get the multi‐column appearance in cross‐browser‐compatible ways without using HTML/XHTML table elements.

View PostBetaWar, on 27 Jul, 2008 - 12:24 AM, said:

Perhaps I am mistaken, but I don't think there is a way to easily get all the columns to be the same height without using tables (and if anyone has a quick example of how to make the divs work like that I would be more than happy to take a look at it).
See above. If Web browser vendors would implement CSS2.1 properly, creating table‐less three column layouts would be a piece of cake:

<body>
	<div>Column 1</div>
	<div>Column 2</div>
	<div>Column 3</div>
</body>


html { height: 100%; }
body { display: table; width: 100%; min-height: 100%; }
body > div { display: table-cell; }


View PostBetaWar, on 27 Jul, 2008 - 12:24 AM, said:

Do you think it is better to use HTML tags whenever possible (including things like <center> and tables)? Or do you think it is best to try and go for the pure CSS approach? Why?
The latter: code clarity and neatness, ease of maintenance, accessibility, professionalism, and standards‐compliance.
Was This Post Helpful? 0
  • +
  • -

#11 Smurphy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 35
  • View blog
  • Posts: 367
  • Joined: 07-July 08

Re: Pure CSS vs Tables

Posted 01 August 2008 - 01:27 PM

Divs seem to be the way to go today. But really the debate lies with the coder. I know a profesional who swears by tables. I my self am an advocate of the mixing of tables/divs. Divs for large chunks and tables for the fine frames.
Was This Post Helpful? 0
  • +
  • -

#12 mocker  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 50
  • View blog
  • Posts: 466
  • Joined: 14-October 07

Re: Pure CSS vs Tables

Posted 01 August 2008 - 02:04 PM

You can make fixed height divs. That javascript is overengineering a solution to a problem that doesn't exist. Look into the min-height, max-height and overflow css properties.

Using css divs can make it a lot easier to separate the layout from the presentation than with tables. Tables are of course still very useful for tabular data. If you find yourself mixing and matching colspan and rowspans to get your table to not look like a table, you should probably be using divs.
Was This Post Helpful? 0
  • +
  • -

#13 godspeedphi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 18-August 08

Re: Pure CSS vs Tables

Posted 21 August 2008 - 09:26 AM

I have worked and continue to work on small to very large sites.
I have worked on sites with a focus on CSS or a focus on tables.

They both have advantages and disadvantages.

First off, as mentioned already, CSS creates a lot of issues when dealing with cross-browser compatibility. Specifically when dealing with IE. IE does not support CSS very well. Lots of padding issues. There are even differences in websites when using Firefox 2 or Firefox 3.

But, CSS gives you a great deal of flexibility. Using a centralized CSS file you can quickly and easily modify the entire site. When using tables you have to go through each page and change it, since the layout on each page can differ, sometimes greatly.

Also, sometimes you want content to stretch wider than the window's width. Tables can cause a headache since columns will shrink in order to compensate and bring the table to 100% width of the window. This is a strange issue.

All in all, it comes down to preference. Some companies and individuals really like tables. Others really like CSS.

I try to use CSS to format the layout of the site and use tables only in the right situation, e.g. when display records, block-like lists, etc.

-Tim
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1