October 22nd, 2009
A div based layout uses a fraction of the overall markup that tables do. Well styled divs replace the need to put align, height, and width properties in your HTML, they eliminate table rows and cells that do nothing but contain a blank space, and they reduce the amount of nastily nested ending tags that often reside at the bottom of our pages. Essentially, tag soup becomes tag tartar.
- Less markup means smaller file size for faster loading.
- A higher content to markup ratio for improved Search Engine rankings results from div layouts. Additionally, search engines can better navigation and group content found in the divs and lists used in CSS design.
- Less code means fewer opportunities for coding errors.
Although frustrating and seemingly mired with problems at first, creating websites with divs and CSS actually takes far less time and effort than creating a table based site. As with any technology, you just need to take a little time to learn it.
- Being familiar with div based layouts can drastically decrease the amount of time spent marking up a design. It is, after all, less code to write.
- Using a CSS framework offers even further improvement. Creating the first draft of the latest project I worked on took less than 30 minutes.
- A review of the BluePrint framework can be found here: http://net.tutsplus.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/
- This article details and compares the work that goes into creating the same site in tables and in CSS in an unbiased and judicial manner: http://articles.sitepoint.com/article/tables-vs-css
- This blog post reaffirms my sentiments about CSS being difficult to learn at first but rewarding in the end. It also makes an excellent comparison to properly coding with CSS and properly coding in Java: http://mcarthurgfx.com/blog/article/tables-vs-css-really-
After having created dozens of sites both with and without tables I have found that with div and CSS layouts it is much easier to achieve a visual consistency throughout the site.
- It is difficult to get every page to appear the same when using deeply nested tables due to the fact that one missed td or one missed spacer row causes text and image margins to appear off.
- During the development process any change made to the table structure of one page needs to be replicated on others. This becomes cumbersome even after only a few pages have been created and often a change made on one page fails to make it to the other leaving inconsistent layouts between the pages.
- One needs only to begin typing after a <div> tag near the top of the page rather than finding the proper table row 150 lines and 6 indentations into the code when using divs and CSS.
A basic div consists only of <div> and </div> tag while a basic table consists of <table><tr><td></td> </tr> </table> . All of these tags become further complicated with nested tables which eventually create a behemoth JSP which is difficult to dissect. Once the time is taken to learn div layouts reading through the page markup is extraordinarily easy. Unfamiliarity with the technology is not legitimate grounds for dismissing it as div layouts with CSS only take a few weeks to learn.
- I once taught a back-end developer div layouts for some admin pages on a website. Having no CSS and div experience he picked it up in a few hours and was amazed and how much simpler the JSP became.
- Using a CSS framework and div layouts my team was able to create the basic layout and integrate into it some image generating back-end code in less than an hour.
Most will agree that the true power of CSS is in the way it allows a site to be redesigned or revamped without having to touch every single page in the site. Using a CSS driven div layout makes it possible to update the appearance of a site on a much more frequent basis without great effort.
- Although we go through painstaking detail to separate business and action logic in our Java, PHP, and .NET code we make no efforts whatsoever to separate content from layout in our page design. A well coded HTML page contains almost nothing but content while the CSS file contains all of the layout properties. Just as we create business, action, domain, and DAO classes for separation of work and easier maintenance in back-end code, we should do the same on our front-end.
- This article reviews the merits of CSS and comes to the conclusion that the separation of content from layout is the cornerstone of CSS: http://www.michaelthorn.co.uk/web-design-tables-versus-css.php
- In order to change the layout of a table based site one must edit each and every page since the formatting properties are on the page. When changing the layout of a CSS driven div layout, it is possible to achieve site-wide dramatic changes with a few minor changes to one CSS file.
- The classic example of this is: http://www.csszengarden.com/
Select a design under the “Select a design” section to watch the site change its appearance completely without altering the HTML markup whatsoever. This demonstrates how much change one can make by only altering a single CSS file when using a div layout.
- A great deal of DHTML simply consists of rewriting CSS rules on the fly. If the original HTML relies on tables instead of CSS for its formatting properties, this incredibly integral functionality of DHTML is rendered moot.
The battle cry of all of those who dismiss div layouts is that it is not well supported by browsers. This is a fair argument but it is also an argument whose legitimacy is diminishing over time.
- IE6, by far the most problematic browser, can be targeted with IE6 specific style sheets.
- Most browser inconsistencies actually arise from minor coding mistakes which some browsers forgive while others do not. Simply correcting these mistakes often fixes these problems.
- CSS resets eliminate all browser default styles meaning that as you start your actual development your site will render consistently.
- CSS Frameworks like BluePrint come already tested and guaranteed to render correctly in all major browsers, usually back to IE6.
- Tables themselves do not render consistently across all browsers and are actually often much more difficult to style since many of the table and table cell properties such as “align” and “bgcolor” are deprecated as of HTML 4.01 (source).
Many modern design techniques are far easier implemented with CSS div layouts than they are with a table structure. Tiled backgrounds, drop shadows, and rounded corners are just a few of the examples of prevalent design trends made much easier with CSS.
- This website, as well as many others like it, feature fantastic designs that can only be realized through CSS: http://cssremix.com/
With CSS3 on the horizon it is clear that all future advances in HTML markup are going to be done in a table-less CSS driven manner. Quite simply, there is a ton of new functionality being developed for CSS based layouts while nothing new is happening for tables. It is crucial to begin understanding CSS now as to not be completely left in the dust in the upcoming years.
- This article demonstrates some of the amazing CSS techniques on the near horizon: http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/