Tables + CSS (and captioning an image)

June 16, 2008

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.

http://www.aurora-il.org/table_test.htm

the always wonderful, alistapart.
http://www.alistapart.com/articles/practicalcss/

Advertisements

Online workshop XML in Libraries

May 21, 2008

Nifty little online workshop about XML in Libraries — very well organized and easy to follow. Covers the basics of XML to writing XML, with lots of exercises.
http://infomotions.com/musings/xml-in-libraries/


MS Expression vs. Dreamweaver

February 3, 2007

This is a little bit old but still a good short overview of the new MS Expression Web Designer (think a much improved version of FrontPage):

http://webstandards.raquedan.com/?p=107


CSS generator for tables

January 2, 2007

Until IE becomes more standards compliant and all browsers began adhering strictly to the w3c coding standards, it will be nearly impossible to create one set of coding that renders beautifully across the various browsers. Many people do use one style sheet, but then include code specifically to work around junky IE. Anyhow, until that time, tables are still not such a bad idea for positioning of content and data.

This website generates css code for tables, which is kind of a nifty idea.
http://www.spectrum-research.com/V2/projects_table_generator.asp

For more information about cross browser compatibility:
http://en.wikipedia.org/wiki/Cross-browser
and crosscheck:
http://thefrontside.net/crosscheck