I'm going to try to convert my site layout from tables to CSS... anyone have tips?

I know that the web is moving away from using tables for layout and I want my site to be mostly CSS layout.

There are a few places where I've had to use tables to get what I wanted, but for the main page (header, three columns, footer) I want it to be done in CSS.

Before I undertake this endeavor, does anyone have any advice/tips? Anyone gone before me and want to share their experience?

Has anyone done this successfully before?

This Zenner apparently has:

http://www.zen-cart.com/forum/showthread.php?t=192076

Since the few tables that are used in Zencart work OK, it seems like a lot of work for little reward, though.

The OP in that thread apparently had a functional reason for changing his listings from table to div - he wanted a different (non-tabular) layout. The existing product listing tables are functionally tables (information laid out with meaningful relationships between elements vertically and horizontally), and there is nothing theoretically or practically wrong with them unless you want a different kind of arrangement. In that case, installing Column Layout Grid from Free Addons will give a div layout, and there are extensions to that available for other listings.

The one major layout table provides left/center/right columns, and if you want to change that to divs, you will need to be good with CSS to apply complicated, tricky fixes to completely replicate the column layout reliably in all circumstances. In other words, it's a bunch of work for no visible benefit. If you only care about modern browsers (including IE9 and newer), you can easily get the layout using display: table; and display: table-cell; CSS properties on #contentMainWrapper and the columns, but then you need to apply CSS/javascript fixes to get older IE (IE8-) to play nice.

There are some templates in Free Addons (the Apple Zen series for one, I believe) which do have a div structure for the columns, so if that is important to you, start with one of those rather than trying to reinvent the wheel.

Correction: IE8 does support display: table; and display: table-cell; - it was some other very useful and long-established CSS property that is only supported by IE9 and newer.

I have used these properties (with a couple of IE6/7 hacks) for the next version of Ezpages Footer Columns, in final documentation phase, to simplify its structure and improve its reliability over the div styles used previously.

gjh42:

There are some templates in Free Addons (the Apple Zen series for one, I believe) which do have a div structure for the columns, so if that is important to you, start with one of those rather than trying to reinvent the wheel.

I'm just trying to keep the site up with the times, and the modern way of thinking is that it's wrong to use tables for layout...

Apple Zen looks cool, but it says that having left sideboxes is impossible, and I need a three column layout. I can't stuff all of my sideboxes to the right column.

I think the presence of that one very useful layout table will not cause any of your customers or reviewers to question your competence or hesitate about buying your products, which is the most important test for deciding whether to take on a new project. This would in actuality be solely for your own satisfaction.

If you really want to try it, I would suggest the display: table; properties rather than the old workaround of floated divs; this will actually be using modern CSS instead of decade-old workarounds. If you are concerned about IE6/7 support (it will totally fail in those browsers), remember that they are the major reasons for the stock table's continued existence, and add whatever hacks or javascript fixes you need for them.

WebKat

I understand your ideas and drive behind staying current with web development and design. We did the same thing 4 years back, dropped tables for everything (layout and tabular data). I have spent agonizing hours trying to recreate a table from a ton of divs, just not to have a table.

We have stopped that practice. Working with clients that has more tabular data caused us to reconsider, especially when the client was going to edit the data.

And that brings me to Zen Cart. Zen Cart's design layout is created with CSS. Their tabular data (product, price ect) is done with tables. I have been working creating new templates for our clients and its amazing what you can do with design while leaving the tables in there.

Just my 2 cents.

Yeah, I guess I could leave the tables in. One of my EZPages actually has a table in it, too. I'm just trying lately to be a good girl and not use tables for layout. It would be a major pain in the ######## to switch.

I am totally supportive of not using new tables for layout of non-tabular data. You SHOULD leave the tables for product listings and the like (unless you want a non-tabular layout for them) because they really ARE tables and the <table> markup is meaningful.