Debate Table based or CSS based Layouts

[Fortinbra]

We are trying to update an ASP.NET 2.0 application so that it no longer requires IE to be in Compatibility mode. We'd also like it to be browser independent. There is debate in our office as to the pros and cons of changing from our insanely complex nested table approach (10 levels of tables deep) to a more streamlined block layout using CSS. I'm for the change to CSS, and using block elements and adding semantics to the page, separating layout from content. However, I have coworkers who are severely against changing things if they don't need to be.

What is the community opinion of this type of change, Tables vs. CSS?

[twiss]

CSS, definetely. Tables are meant for presenting data, CSS for layout. Every layout should be perfectly possible with CSS, it's simpler, it's easier to make changes to a layout if you use CSS (also with javascript).

[Fortinbra]

That's exactly my point. I did read online about the two hells of UI coding. Table hell, which is what I'm currently in the 9th circle of, and Div hell, what I'd like to avoid as well. They recommend semantic approach, and taking advantage of CSS's inheritance structure. Only using tags for what they are intended for, meaning only using DIV as dividers or section delimiters, and only using tables for tabular data.
http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

[twiss]

Well, html5 is indeed a good step away from using div's and nothing else. I don't, however, think you need to be afraid of using a div if you can't think of another element that's better named, nobody will eat you :)

[almostbob]

there is no debate, tables take too much code to display the same information, small is beautiful

[Fortinbra]

Ok, then please assist me in my interoffice debate. We all agree that our website (web application) using WAY too much bandwidth. and being as our pages average 3000+ lines of code (as indicated by Visual Studio line counts), I can see an easy answer to the problem. Getting rid of our insanely nested tables. I counted on one page at least 10 levels of tables.

[almostbob]

imagine the table without all the html to define the table,

<table bla bla bla>
<tr bla bla bla>
<td bla bla bla>
CONTENT
</td>
<td bla bla bla>
CONTENT
</td>
<td bla bla bla>
CONTENT
</td>
<td bla bla bla>
CONTENT
</td>
<td bla bla bla>
CONTENT
</td>
<td bla bla bla>
CONTENT
</td>
</tr>
</table>

or

<div class='tableclass'>content content content content content content</div>

with a few lines of css in an external file referenced by every file in the site and dl once, defining the layout of 'tableclass'
there isnot any comparison
there is a lot of effort to fix the code, but it must be bloody difficult to maintain now

[Fortinbra]

Our next meeting regarding this is on Monday, so I'll find out then if I can start migrating our many many pages over to a CSS streamlined system. Our next update isn't until the fall, so I have almost 6 months to make the changes. The drawback is that we are using custom AJAX tools in ASP.NET 2.0, and can't upgrade to the newer versions because those AJAX tools break in a horribly fiery way. Aside from those areas, I'll have my work cut out for me.

[teedoff]

lol It's awesome that you're finally wanting your coworkers to catch up to modern web design standards, but yes you do have your work cut out!

You may, if you haven't already, want to read this article on why tables for layouts are bad. You could even present this to your coworkers as well.

Not only as almostBob said, does it require tons more code, but as you have seen it's a nightmare to manage. Good luck!

[almostbob]

Remember, dinosaurs may have another brain in their tails, so when the table-saurs in the office bit__ about the changes, you may have to kick em in the pants as well as slap them up the side of the head

finally changed table layout to a css layout year back, was doodling with it for a year prior

originally
6200 static table-layout pages months to update, the typical 'frontpage' site

now
1 css template
1 sql db ~30 tables couple100K items
3 folders full of images and video, referenced by the scripts (I have NO idea what they are, I just stick the SD card in the slot and tell the script the property address)
3 includes for differing scripts
4 php files to process the db
2 php files for updates
=600000+ dynamic pages

layout changes, piece of cake
language changes, piece of cake,
data changes, piece of cake

[Fortinbra]

Ours will be quite a bit more work. I'm gonna create 1 CSS file, but we already have a DB will over 100+ tables, and a C# class in our ASP.NET app associated with each table, More stored procedures than you can shake a stick at. And over 100 pages that are dynamically populated from the database. The application is over 5 years old, and the legacy app that it is based from is over 10 years old. We have huge issues with data redundancy, integrity, and overall performance. But I can only do so much in the time I'm given, so I'm going with UI first, then a DB schema refresh, and then a code update. I'd like to move us to ASP.NET MVC, but that's too big a change according to the boss.

[Dragennd]

CSS all the way ^_^ use http://mastersofzi.110mb.com for a reference hehe... Can even try rounding the edges if you so dearly wanted to but you get the idea.

[almostbob]

just finished reading a part of the msdn technet on migrating to asp.net
no wonder the dinos think its too hard