Tableless design with CSS

March 7, 2006

As I have been more interested in client based development I haven’t been following the advancements in web design/development as closely as I should have. My next project for class is a web based application so I've been doing a bit of research into XHTML, and the current use of CSS. I must say the future is looking good!

The current trend (and why has it taken so long?) is to separate the mark-up (HTML) and the presentation (CSS). This means your HTML document should only contain the bare elements of page structure, this means the use of tags for headers, tags for paragraphs, tags for block elements, for inline elements and the use of tables only to display tabular data (data that should be presented in table form). Loading this on its own would display a pretty boring page but will include all the content required. Adding an external style sheet to this page allows the presentation to be modified (margins, font colours, faces, types etc) as well as specifying the layout of the page (withought using complex tables). This also means if any presentation changes are required to the website only one document needs to be edited, the style sheet (CCS) file. Without separating the content from the presentation an update would have to be made to every single page, often manual.

This is often referred to as 'Table less design' definitely a new concept as web designers have learnt to live with designing pages based on complex tables and spacer gifs. With the use of style sheets and keeping the content document as simple and structured as possible you can eliminate a great amount of unneeded mark-up, reducing page sizes, load on server, and complexity. Using this technique users can also choose their own preferred styles or create their own … I think my space.com user sites are generally not the best example of this but there it is common to embed your own CSS and HTML to your pages to override default settings.

A perfect example of table less design and the use of different style sheets can be seen here: http://www.csszengarden.com/. This site includes CSS resources and an excellent introduction to table less design.

Advertisements

2 Responses to “Tableless design with CSS”

  1. halcyon Says:

    hey mike good to see you useing a much better blog
    hows that rainlender project shaping up?
    what are you up too this weekend? our new flatmate amy is having her mini flatwarming

  2. elevate Says:

    Yeah I’m liking this, to tell the truth I havnt looked at it haha been using outlook 😛 , Will look into that though! Mini flatwarming sounds good! I’ll have to get some numbers off you too as it looks like I’ve lost my cellphone!


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: