I’ve been working on some websites lately, and I’ve been pleasantly surprised by how efficient <div /> is compared to <table />. In the example below, my home page condensed from over 80 lines of code to a mere 29. Of course, this was aided by better use of CSS, but I feel that it was easier to use CSS once I had divs in. There are some things that table do better though, and for me it is the vertical-text align. Trying to center align some text vertically involves creating multiple nested divs, alignment of the first inner div to 50% of the outer div, and then alignment of the second inner div to go up 50% of the text! Nonetheless, it’s a sacrifice worth making. See below for before and after screen shots.

Before: Tables, 80+ lines of code

After: divs, 29 lines of code

In theory, I suppose I could discount the meta tags to get an even lower line count.