CSS Table Less Format and HTML Table Base Format, Which One You Prefer


I have been doing extensive research on net regarding people's opinion on building website using CSS div based format over HTML table based format and have found that there is a lot more improvement in terms of page size, load time and search engine positioning after switching to CSS div based format.

CSS is syntactic, it's fast and lightweight. Compared to HTML, developing a site in CSS table less format is more systematic. The clarity of the code in CSS makes you feel much in control where as in HTML table based format we just go on pumping the tables into the design leading to more complex and cluttered html code. CSS is definitely more of an efficient way to code, as the style sheet is loaded once and cached, versus loading the table code with every page.

Depends on how complicated website design is I would recommend CSS over HTML. In CSS the basic principle is to use div tags as containers to hold different elements instead of table cells. Assigning an id or class to those div allows you to add styles and to position them using an external style sheet instead of over and over again in each td. Many times instead of going for 100 percent CSS table less development people use partial CSS div based and partial HTML table based procedure. For eg They use a table for holding things in place and assign ids or classes to the tds for styling, which is still better than a purely table based design with inline styles.

As far as code goes, we all know now that CSS generates less code and it is search engine friendly but it has certain limitations and problem, often it is because of browser incompatibility. I've seen lots of website layouts done with CSS, where the content breaks the layout and boxes overlap each other, making certain parts of the content unreadable. Such things are easily manageable using tables where as CSS would require multiple "hacks" to produce the desired outcome.

Redesigning a CSS div based site is much easier and less time consuming than HTML table based site. This is because CSS designs have separate files for content and visual data including web page structure whereas table based designs mix layout information with content in the same file. Table based HTML sites heavily relay on spacers (transparent gifs) to control blank spaces within the sites, where as this can be easily achieved using margins and padding in CSS layout.

Although CSS based design appears to be simpler, neat and tidy you need to spend significant amount of time learning the rules of the CSS. This comes through practice only. If you want to make pure CSS div based designs, be prepared to invest time in learning. No matter how seasoned developer or designer you are, be prepared to hunt down the bugs relentlessly for endless hours.

Web developers must consider their clients preference before finalizing the format. If the client is more concerned about standards and wants to be sure not to use any deprecated strings in their webpage then CSS div based design is the best option.

Finally we can say let the war continues between CSS div based and HTML table based design to our benefit. In the mean time designers and developers can add on more knowledge and practice with both tables and CSS and become more versatile to handle any situation.


Leave a Reply