Tutorial for CSS table layout?

July 21, 2005 7:37 AM

What's the best way to migrate HTML tables to CSS?

My HTML layout skills are decidedly old school. I understand and use CSS for text formatting, but I don't use it for positioning. To allow some large, table-heavy HTML reports to render more quickly (and, hopefully, progressively), I'd like to switch to a CSS-based system. So, a couple questions...

- Is there a decent tutorial online for this?

- Have all the cross-browser implementation issues that kept me away from this initially been resolved? I'm not keen on maintaining separate code bases.

posted by mkultra to Computers & Internet (10 answers total)

Here's an excellent online tutorial.

If you do your homework beforehand, you can write CSS that will work fine in all the current major browsers. If you want it to regress nicely for really old browsers, that's harder but still possible. In any event, you don't have to maintain separate code bases, although your reports may not look quite as spiffy in one browser as they do in another.
posted by cerebus19 at 7:45 AM on July 21, 2005 [1 favorite]

One thing that will make it much easier: use IE7. It adds much better CSS support to internet explorer, and fixes several of IE's more prominent rendering bugs. It's a miracle for cross-platform compatibility, and allows you to write significantly cleaner HTML, if you're willing to really use its features.

Also, make sure that you're rendering in "strict" mode on IE (you activate this by including a doctype in your page).
posted by gsteff at 8:02 AM on July 21, 2005

Cross browser issues: these have certainly have not been resolved, and won't be in the near future. You will have to learn a multitude of hacks and workarounds, and even then you will never be able to achieve the pixel-perfect designs of a complex table-based layout.

I personally use a hybrid of table/css; tables for the very basic structure and then CSS for all the layout inside this.

Be prepared for a lot of frustration!
posted by derbs at 8:15 AM on July 21, 2005

First learn to make quick css boxes, then apply to multiple little boxes for amazing css table layouts
posted by webmeta at 9:03 AM on July 21, 2005

While CSS is worthwhile for page layout (and presentation in general), tables are still appropriate for tabular data (which it sounds like you have for these reports). I would, however, recommend well-formed tables for accessibility (such as for users with screen readers).

As for CSS-based layouts, floated elments are probably your best bet there (the alterantive is absolutely positioned elements, but you could end up painting yourself into a corner with elements overlapping one another). Along those, lines "Floatutorial" is an excellent tutorial on floated elements, including float-based layouts.

And, while not all browsers are compliant to the spec, they act close enough to the point where you can generally have a single code base with perhaps a few one-off workarounds/hacks within the CSS.

Lastly, you may find the CSS-discuss mailing list (and its corresponding wiki) helpful as well.
posted by Handcoding at 9:24 AM on July 21, 2005 [1 favorite]

You want to have your pages render more quickly and progressively. In some browsers, tables don't display until everything inside them has downloaded, so that's an immediate improvement with CSS.

I recommend developing and testing in browsers with good CSS support first, then applying fixes for Internet Explorer.

The Layout-o-Matic generates the basic framework for CSS layouts. Listamatic (by the same people who made Floatutorial) has tons of options for using CSS and lists for navigation. Zeroing out margins, paddings, and borders at the top of your style sheet reduces a lot of cross-browser issues. The CSS Zen Garden's impressive CSS-only layouts show the possibilities.

You will have to learn a multitude of hacks and workarounds

Please. Like there aren't hacks and workarounds with tables. Oh, there has to be a non-breaking space in an empty cell or it won't display properly in some browsers. Oh, the white space formatting of the HTML code affects the display in some browsers. Oh, I can leave off the closing tags in some browsers but not in others.

Most people who advocate sticking with tables have internalized all the required hacks and workarounds and have forgotten the pain of learning them.
posted by kirkaracha at 10:12 AM on July 21, 2005

Also, a handy tip for clearing floats, using CSS for tables.
posted by kirkaracha at 10:27 AM on July 21, 2005

As someone who started working on the Web in 1999, came from a design background and is now developing a 125+ page site with only CSS layout, I heartily suggest CSS. I think the biggest mind switch for me was to NOT worry about having precision and perfect matching between the browsers. You can write light effective CSS without much trouble that will look the same everywhere (or within a close enough tolerance). I found over the years that if I was applying too many hacks that I should really just rethink the design of the visuals / structure of the code (and again, this is coming from a graphic designer)...
posted by Slothrop at 11:19 AM on July 21, 2005

Max Design (Floatutorial and Listamatic) also have two tutorials that walk you through setting up a CSS-based template. Both are excellent.

Step-by-step guide to converting a tables-based site to liquid CSS layout.
posted by kirkaracha at 12:47 PM on July 21, 2005

Buy Eric Meyer on CSS. Project #1 is converting an existing site. Meyer is one of the oldest hands in CSS design, having written articles on the subject as early as 1997. He also wrote The Definitive Guide.
posted by ijoshua at 4:59 PM on July 21, 2005