Search This Blog

Monday, June 16, 2008

Tables + CSS (and captioning an image)

For those of you who use CSS in web design (or have been following its evolution), you may remember the battle cry of "tables are dead" from a few years ago, which was soon followed by rallying cry "Long live tables!"

According to the thinking (and gurus) at the time, EVERYTHING that could be done with a table could be done with div layout and a little creativity. In spite of the fact that tables can easily resolve some very tricky problems and can be styled with CSS, tables are still kind of a dirty word in web design.

I've had a few attempts to go tableless; some very successful, some not so successful. My least successful tableless adventure, happened in 2005. As part of a class project, I decided to create a tableless and very graphics heavy website. The tableless part was easy until I decided to embed flash. Without a table to control the size output, there was no way to force IE and firefox to render the flash movie the same. Believe me, I searched high and low. Nope, not doable. Because the "lesson" or project challenge that I was supposed to be learning was tableless layout, I was stuck with a website that doesn't render perfectly in IE and firefox (although to be honest, most people couldn't see the problem).

A table would have been the easy answer. Although I shy away from tables, I do find they still have value in web design, as I re-discovered just recently.
For the magazine (and the pacercms dev group), I've been working on the rss feed output. The original feed outputted the summary (the first feed image), but my goal is to output the whole magazine in a readable format, including images, links, and proper line breaks.

The easiest way to fold the images into a rss feed is through an embedded image (as in my new version of the feed). However, with an embedded image, there is no easy way to caption it. Sure, alt tags and names can provide popup and additional info, but I need to be able to easily and visibly include copyright info, author info, etc. AND have it show up in the feed in context, not at the bottom or top of each item.

Tables to the rescue! Using the caption tag, I am able to add both a caption and locate it below the text (actually, in my case, an image). I am also able to style the table so that it renders the same in each article: the placement will be the same, the padding will be the same, etc.

I can't believe how easy this is and I also can't believe that I had forgotten how useful tables are.

the always wonderful, alistapart.

No comments: