CSS vs Tables. Can we talk about that?
Starting to create a web-page brings in your mind this question: Tables or CSS? We should think the advantages or disadvantages that a layout offers to us.
TABLE-based layouts
I used to create web-pages based on table layouts. I couldn’t imagine another way to group the components and keep them closed. Some web designers are still using tables because there are simple to implement, being able to create your design visual is really quick. WYSIWYG (What You See Is What You Get) editors like Frontpage and Dreamweaver are used by many developers.
The hardest step that should be reached is to have a website compatibility with most common browsers. The amount of browsers like Internet Explorer, Netscape, Opera and Mozilla and the several versions of each on the market, makes our job more difficult. For example we may have a perfect design in Opera but Internet Explorer may show gaps in page that should not be there, wrong positioning of cells or others. This is unpleasant for the designer because may work a lot for fixing that problems. Other times there are tricks discovered and posted on forums, websites. Using WYSIWYG may over load the code with unnecessary tags and so appears the problems to be fixed.
CSS-based layouts
CSS has been used for text formating like: width, color, font, etc., but now it is used for layouts too. CSS-based layouts is flexible in positioning components in a web-page. Using tags like <div>, <span> keep the code easy to read. If we have something like this:
<div class="containerText"> Here is a simple example!</div>
It is easier to figure that we will have a container with some text. Modern browsers are flexible and whether standards are used shouldn’t be problems. For example the hover text effect comes in IE6 with problems. Read this full article about fixing hover in IE.
Being able to format your tags using CSS offers flexibility and classes well organized.
Advantages of using CSS
- Quick changes - if we want to make a change in the document it is easy using CSS because we have to edit in one place;
- Page size - the HTML page size is much smaller, page using CSS are loading lot faster than the traditional tables ones;
- Maintenance - easier maintenance and update;
- Search Engines - search engines robots appreciate code based on CSS;
- Accessibility - having separated the style from code is accessible for visitors who may be interested only for the content;
- Less code - as we use for example same class at different location code will become smaller and more accessible;
Example:
Let’s have an example. Below I put some HTML code to show the difference between these layouts. In both cases I coded this:
Table based layout
<table width="500" height="176" border="0"> <tr><th width="250" bordercolor="#00FF33" bgcolor="#FFCCFF" scope="col"> <p>Left Side </p><p><img src="/whitefl.jpg" width="150" height="153"></p> </th> <th width="250" bgcolor="#99FFFF" scope="col"> <p>Right Side </p> <p><img src="/whitefl.jpg" width="150" height="153"></p> </th> </tr> </table>
CSS based layout
<div id="content"> <div class="leftSide" align="center"> <p align="center">Left Side </p> <img src="whitefl.jpg" ></div><div class="rightSide" align="center"> <p align="center">Right Side</p> <img src="whitefl.jpg"> </div> </div>
#content{ width: 500px;}.leftSide{
width: 250px;
float: left;
background-color:#FFCCFF;
}.rightSide{
width: 250px;
float: right;
background-color:#99FFFF;
}
p{
font-weight:bold;
}
If we simple want to have the text written with red we simple edit the CSS file by adding color:#FF0000;
Conclusion
Tables should only be used in few cases where we don’t want to mess with CSS. In this cases, should be taken care and testing in common browsers is required. Web developers should use CSS positioning and formatting as much as possible. Anyways, lots of things cant be done with tables. Nice things always comes out good with CSS 
3 Comments for “CSS vs Tables. Can we talk about that?”
Post a comment
RSS/XML
May 4th, 2008 at 6:59 pm
In your example the table version is only 349 bytes while the css version is 428 bytes. Also if you remove the unnecessary \”width=\”150\” height=\”153\”\” and \”/\” before the image file name, the table version is 297 bytes. This is 31% smaller than the css versions 428 bytes.
May 4th, 2008 at 7:15 pm
Also, it has been my experience that the implementation of css varies more between browsers than tables. I’ve noticed quite a lot of wikipedia pages where things are displayed right on top of each other in firefox.
May 4th, 2008 at 11:57 pm
yes you are right, in this case the table one is smaller but this is just a sample of a really small piece of code. Usualy pages a re big and a class is used in more than one place, so defining it once and using it worth.
The CSS implementation may differ in some browsere but usually if you stick with the standards, there is not that big difference