Scarcely a week goes by without a post in a web design forum somewhere on the lines of ..”how do I do this in css” or “..how do I replace this table with css”.
CSS purists all over the web have been promoting the idea that tables are bad for so long now that some people think they’re breaking the law or worse if they use a <table> tag in their website.
Well, I’ve got news for them – you are still allowed to use tables!
Tables vs CSS
This is not a css vs tables rant, and I am certainly not advocating a return to the nested table and spacer gif nightmare of years gone by, just a plea for common sense. A lot of people seem to think you have to use one or the other, but in fact CSS and tables can be used together.
Much of the effort put into designing css only layouts involves using the “float” property to produce columns. While that is simple enough to achieve on a basic level, coming up with a method that produces equal height columns no matter which has the most content, where the footer stays below the columns, and which works correctly across all browsers has taxed experts for years.
People are still coming up with new variations using all sorts of esoteric methods and hacks, such as negative margins, to do what a simple table has always been able to do.
Tabular Data
It is often said that tables were designed for presenting tabular data only and shouldn’t be used for anything else. Well, its been said before – the world is full of things which were originally designed for one purpose, but which people found could be used for an entirely different purpose. The internet was designed for sharing scientific data – does that mean we shouldn’t use it for anything else?
In any case – what is data? If you ask me, data might be something like a product picture, description, price, “buy now” button, or menu, article, advertisement. Tabular data is surely data in which there is a unique relationship between one set of data and another e.g. all the data on one row refers to a particular product. Again, that surely could include price, description, picture, etc.
Block Level Elements
HTML consists mainly of block level elements and inline elements. Block level elements are containers or boxes that start and end with a new line, such as a paragraph, table or a div. Inline elements can be placed in the middle of a line of text – such as bold or italic (although elements can be changed from inline to block and vice-versa with CSS).
A <div> is the name given to a generic container, a single box. A <table> is the name given to a box which is divided into rows and columns. It seems to me that if you want a part of your website divided into columns, it makes more sense to use the element which is meant to be divided into columns, the TABLE, rather than trying to construct a series of columns out of separate containers (DIVs)If you want to connstuct
Search Engine Friendly?
It has been said that CSS layouts are more search engine friendly and are leaner and quicker to download. While this is certainly true when compared to old-style nested table layouts, it is not necessarily the case – table layouts with external style sheets for styling can be just as lean as CSS only layouts; is there any great differance between these two:
Typical css layout:
<div id="header"></div>
<div id="container">
<div id="leftcolumn"></div>
<div id="centrecolumn"></div>
<div id="rightcolumn"></div>
</div>
<div id="footer"></div>
is this much different?
<div id="header"></div>
<table id="container">
<tr>
<td id="leftcolumn"></td>
<td id="centrecolumn"></td>
<td id="rightcolumn"></td>
</tr>
</table>
<div id="footer"></div>
Conclusion
If you want to construct your multicolumn layout using only divs, then feel free to do so. Likewise if you want to lay out a form using CSS. But if you would rather use the HTML element designed for being divided into rows and columns, or your boss or customer are breathing down your neck and the CSS just won’t work the way you want it to – remember – there is no law against using a table.
Add to document.write(“Del.icio.us”) | DiggThis | Yahoo! My Web
Technorati: .
Tony Depledge is a freelance web designer and website publisher. More articles and information on web design, hosting, e-commerce and internet marketing at Depledge Design
