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.

Why?

Job performance!

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.

I'm not exactly the best student but I've exerted more effort (than usual) in studying how divs behave and I am more comfortable (efficient) working with divs than with tables.

Even if I didn't have that advantage and it's easy to construct a page from scratch (from tables), trying to change the design or structure of a site based on tables is like college without coffee and pizza. Pure hell.

The table's boon (easy to command/ 'bend to your will') is also it's bane:
It's easier to manipulate because there isn't anything much to manipulate. You just tell it to hold some columns, rows, have a background, have paddings, borders, and margins. Be a certain height or width.

Everything is fixed.

Whereas, divs are so much more flexible. Can you imagine what wordpress would be like if it used tables to display its content? Will there be that much diversity to the designs and structures available to us? Can we switch the positions of the body, menu, and other parts of the page with just one CSS file if designs were based on tables?

Maybe. But it won't be that easy. Something about switching the actual contents of each column/row/cell. (I suspect this is the reason why Wordpress is more popular than Joomla)

We seem to agree on that point: Table is quick the first time. But the internet isn't made to be static. It's supposed to change. Constantly. And those tedious table updates are going to add up in the future. Sacrificing the ability to maintain the site smoothly for the swiftness of setting-up is a tempting lure. But it causes a lot of headaches for later.


They've been teaching tables for years. Some people are hoping that this trend will die soon. Because it's wrong. You have these fresh graduates who can make table-based sites quickly and don't have the patience to work with divs because they don't see results quickly as compared to tables. However, just because something is quick and easy doesn't mean it's right.

It's our job as web designers or developers to give it our best shot. Learn about divs. Do not get sucked into a comfort zone.

We REALLY should keep up with the standards. It's part of our job. If we can't do it, then maybe we should pause, re-learn, and have another go at life.

If you're working in an IT company that keeps up to date, than you will have a programmer working alongside with a designer, so the programmer won't have to worry about this and just follow the guidelines of the designer.

I keep thinking I have it mastered, but then I go to use it, and it sneaks out and does something else. Or it works on one browser and not another. The worst thing is when a browser update makes the site change the way it displays.

No, because I don't use it.

I'm not talking about designing an entire page with tables, but positioning two or three stubborn elements that refuse to go into the right places with divs. If there is a real table (a worksheet of numbers) on the page, the divs go crazy.

I am talking about positioning a photo to the right of each paragraph of text, and having all of the photos, and all of the right margins of the texts lined up perfectly.

And I don't WANT the positions of things to change. I want the page to scroll if the window is too small.

Maybe that's why the divs don't work. I had several pages that worked on every browser, until I upgraded to IE7. Then I had to rewrite the pages again to work on IE7.

I don't want everything to change constantly. That's one of the things I do not like about the Internet. Every time I go back to a page to get information, they changed it, and I have to hunt for the info all over again.

What updates? I'm not publishing a newspaper. I'm presenting educational material that does not change.

It' the tedious div updates I have to make whenever a browser upgrade makes the pages I did write with divs malfunction.

They went BACK to teaching tables.

They did this because the EMPLOYERS are sick of employees wasting time failing to get divs to work and rewriting pages after browser upgrades make them fall apart. Employers are not accepting the graduates who are taught divs.

The method they are teaching involves using a table for a row of items that need to be kept together in a horizontal row, not the entire site. Table is a reliable way to do this. Div is totally unreliable at doing this. (If you know how to do this in a way that survives window resizes, different resolutions, and browser upgrades without using pixels or other absolute measures, please tell the rest of us.)

Unfortunately, the employer is not going to like wasting his money while the employee learns to make the pages work again after a browser upgrade messes the whole site up. The employer wants the site up and running. He does NOT want the site to be the most elegantly crafted, at the cost of it malfunctioning every time a standard changes or a browser is upgraded. It costs him money.

Part of the problem is that they won't leave the standards alone. Things that work today fail tomorrow.

I have already had to rebuild my entire private web site of 200+ pages three times, because they won't leave the standards alone:

1. Converting to xhtml and css, conforming to the W3C verifier (most of the time spent changing tags to lowercase, adding closing li tags, and converting br & hr tags to self closing form).

2. Making the site position objects relatively and removing formatting tables where practical (many of the pages were made before css styles were available, when table was necessary to make page margins).

3. Fixing things that changed when Firefox changed to version 2 and IE changed to 7 (mostly the divs that started malfunctioning when they contain tables), while simultaneously fixing a bunch of things the W3C validator started flagging that it allowed before (mostly unescaped quote marks and ampersands in the text).

I may have to redo things again, because I just found out that pt is not the relative font size style (em is).

Tell me how many man-hours are wasted every time the standards change again, or a browser upgrade makes things fall apart.

Interesting read, thanks for that.

I always use tables and have never found the time to adopt css. But then I've only created web-pages in frontpage.

:-P

I agree, I'm just starting out in web design, at the moment i'm using div's however i admit i find them generally hard to control.

Thanks for the read

Can someone write a set of rules that always works for divs?

The IT companies here want to hire only one employee for both.

I have over 600 pages on my site php generated from sql tables and includes
changing layouts of all takes about a minute,
changing layout of one page only, takes much longer than changing all of them

This would be the CSS standard... ;-)

Unfortunately, because of the ever changing way the browsers implement the standard, this would be very hard to do. If they would all comply it would be easy.