Articles, Reports & Tips

Help separate style from content using CSS table structure in your design. Using table id and table data class.

"Table structure in design has stood the test of time because it is reliable and consistent in form and function."

As I read my own article defending table layout in design, I realize it should be pointed out that as time goes on, CSS structure and formatting is constantly playing a bigger roll in my work. This topic, being a happy medium involving table formatting using CSS and supports this statement.

*** Skip over my opinions and get to the piont. ***

There is a big push these days in most circles of the website authoring community to separate style, structure or appearance, from content, presentation or substance. This simply means leaving as much of the structural code out of the HTML (or whatever) as possible and importing it by means of another file such as cascading style sheets (CSS) or perhaps a server-side embedded scripting language such as PHP.

Most of this is brought on for the sake of creating some sort of web standards and aiding in handicapped and non-handicapped accessibility. And heaven knows that I am all in favor of it, most of it that is – I’m keeping tables in my designs.

As far as web standards go, it would be nice when developing a website to be able to analyze it in one browser and know that it will look the same in all the others, but this is far from the case. Web authors attempts to implement accessibility features (including some elements of CSS structure) are waisted time when developers of user agents (browsers) do not take advantage by implementing the use of these features.

As for accessibility, a properly laid out table structure can be just as accessible as any site using a pure CSS layout. I am not saying CSS layout does not work well in developing structure, because it does. I am saying that in regard to complex website layouts involving colspans & rowspans there are to many discrepancies in the different browsers to make it possible to come up with a consistent layout.

Anyone with any HTML or CSS experience can develop a simple CSS layout with a header, three columns and a footer. I know there are those better than I at designing complex CSS layouts and making them fairly consistent in most browsers, but I’m not there yet, and for now tables in design structure serves me well.

A large group of these website authoring communities maintain that pure CSS layout is the only way to go, as if those who still use tables are behind the times. This is simply not the case, and for now I am NOT one of them. Also, from the looks of 90 percent of sites on the web (including the big boys), table structure will be around forever; in fact, tables have been around forever. Table structure in design has stood the test of time because it is reliable and consistent in form and function.

However, we can separate style from structure in tables by using CSS and create a useful happy medium. So lets get on with it, shall we?

It’s quite simple and involves assigning ID’s to tables - <table id=”header”> - and CLASSES to columns - <td class=”time_date”>.

The table id and table data class are imported via and external style sheet by properties you declared within each id and class.

*** Click here to view image illustration ***

Note that if you need to use “cellspacing” markup within your table, you must still include it within the table declaration as there is no true CSS replacement for this attribute. I believe this is true for “summary” as well.

Like this: <table id=”header” cellspacing=”2″ summary=”">

Also, if you need “colspan” or “rowspan” markup within your table data declarations, you must include them as well.

Like this: <td class=”left” rowspan=”2″>

There are drawbacks to using this method. One of which is you may have problems with in-line text and image positioning if you declare “text-align” or “vertical-align” attributes in your table data classes . This can be fixed using relative positioning and floats. If you have too much trouble try formatting your table and table data normally in your HTML.

Subscribers to Articles, Reports and Tips can use the link below to download your free template. You will need your user name and password. This is a fully functional XHTML website template with all files included that you can use to learn about the topic we have been discussing. Play around with it, customize it and use it for whatever you wish.

Click here to download your template

If you are not a subscriber and you would like this template, simply subscribe using the form to the right, confirm your subscription via the email you receive, contact me and I will send your user name and password.

I hope this post has been of help to you, Tim

Tim Valentine
Access Website Design
AccessWebsiteDesign.com
Articles, Reports & Tips
AccessWebsiteDesign.info

This entry was posted on Saturday, June 16th, 2007 at 1:54 pm and is filed under Website Design.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.