≡ Menu
jaced.com

Tables to tableless

I feel like I’m 28 again.

Back in the geek days when content wasn’t king, I did plenty of HTML table layouts that required down-to-the-pixel accuracy. Some of them were even experimental. For instance, the old jaced.com label.

Notice how the eye in that label graphic is a blinking animated gif, and was kept isolated to (duh) keep file size down. When I built this, after Photoshop, I sliced the whole composition up into a pan of brownies, isolating that eye, and then reassembled all the web images using HTML tables. There were some specific quirks to understand about tables, and if you didn’t spell things out clearly, the whole layout would go to shit. I would bang tables like this out in minutes.

Y2K came and went, and I never really got around to building the same types of complex layouts in tableless CSS. Mainly because I miraculously haven’t had the need to do so. But I’ve always wished I could just flip a switch in my head and convert all my table thinking to tableless thinking. Being able to take a PSD and convert it to markup will always be a useful skill, no matter what the current convention is. So,

ASSIGNMENT: CONVERT THAT TABLE LAYOUT TO A TABLELESS LAYOUT

Finally got around to it, using that vintage 1998 jaced.com label layout as the subject.

Ran into a couple bitchy/buggy parameters that save headaches once you know about ’em. Especially when working with images that demand no margins or borders. Namely:

display:block;

And here it is. Just the label part. The brownie CSS is in the HTML file itself. There’s probably more code in there than necessary, and it could be argued that assembling brownies is useless these days. But the point of the exercise was done to retrain brain to be ready to come up with a quick web solution for a complex graphic.

Studying the HTML table version’s code against that of the tableless version would make for an instructive “CSS for Graphic Designers” class. Maybe some day.

Comments on this entry are closed.