There is now a reason to use tables and css for layout, instead of divs and css.
Employers now prefer the table method. Our technical school instructors are now teaching this, instead of div and css.
It takes an average of four times as long to create a page using divs and css, compared to using tables and css. This is because the page author must fool around with the div settings until it works. The table always works the first time.
The employer prefers getting more pages per day, as opposed to getting pages that please the W3C.
Simple div structures work, but if the structure contains a list or a table, div messes it up. Then you have to play with height, width, margin, border, padding, and other properties, just to get the structure to hold together in all browsers.
As an example, I wanted to create a simple structure consisting of text on the left and a small table on the right, all surrounded by a border. I tried the following in sequence:
Making a surrounding div for the border:
- I could not get the table to go to the right and stay inside the border.
- It wanted to put the table under the text instead.
Make a surrounding div for the border, with two divs inside:
- The div for the border became small vertically, with both the text and the table sticking out below the bottom border.
Making a surrounding div for the border, two divs inside, and floating the table div right:
- I could not get the table to stay inside the border.
- The div assumed the height of the text.
- Text following the div rendered to the right of the text in the div.
Making a surrounding div for the border, floating the text div left, and the table div right:
- The text and table stayed inside the div.
- The table was to the right, but below the text.
- The beginning of the following p tag was inside the border, below the text div.
Making a surrounding div for the border, and floating both inner divs left:
- The text and table stayed inside the div, in the proper orientation..
- The beginning of the following p tag text appeared to the right of the table, inside the border.
Make a surrounding div for the border, with two divs inside, and displaying them as table cells:
- This worked in both IE and FF, until I tested it with W3C, and discovered a typo.
- When I fixed the typo, it worked in Firefox.
- After the typo was fixed, IE agains started making the div for the border small vertically, with both the text and the table sticking out below the bottom border.
After messing with this for an hour, I replaced the divs with a table, and had it working in 3 minutes.