Goodbye TABLE, Hello DIV

When I recently switched this blog to WordPress, I made another switch as well, to a table-free layout. Yep, this page is now a CSS-only page. There are no tables, and all layout, images and positioning are located in the CSS stylesheet.

Why? Several reasons:

  • Pages are smaller, so they load faster. The stylesheet is bigger than it used to be, but it only loads once and then is used by every page.
  • Future changes to the design and layout will be just a matter of redoing the stylesheet. Once the new stylesheet is published to my site, all affected pages are instantly updated. Cool…
  • Less overhead at the beginning of the document (setting up the table structure — especially the navigation bar) means search engines get to the page content sooner.
  • The stylesheet can be tailored for different display types. For example, someone printing the page can get a print-friendly layout, automatically.

But there are downsides to this change as well:

  • The page will not display well in really old browsers (IE 3 and earlier, NS4 and earlier). Few people use these browsers anymore, so I decided not to worry about it.
  • My older version of Dreamweaver (a professional-class Web editing tool) doesn’t display all the CSS styles correctly, so the templates that make up this blog were hard to edit. (That’s why the rest of my site still uses tables.) Springing for a current version of DW would solve much of that problem.