More on Tableless design

I wasn’t picking on any specific project or vendor in my previous post. I just have noticed that people don’t go to remove the tables where they are easy to remove. For example, a simple two column layout is relatively easy to do using CSS. Also, I’ve noticed that tables get used a lot for indenting things. This is something that is also easily handled with CSS by altering the margin property. I’m not saying that sometimes laying things out in tables is less convoluted or the method that should be used. It just seems that tables are used for layout too often when there is a viable CSS solution (by viable I mean not overly complex and creates more potential accessibility issues). I consider several factors when I choose to lay things out in tables or using CSS.

1. How is the text meant to be read on the page
2. Numbers of columns needed
3. Alignment of text
4. Can this effect be achieved without nesting tables?
5. Will I want to put tabular data into one of the sections of my layout

For me the important things to do if you are going to use tables is to do simple ones that can be easily read by a screen reader, and to make sure you don’t nest tables. If you are using tables to create multiple column layouts and want to use CSS but don’t know how below are some examples on the web that I’ve used and modified.

• Layout Techniques: 3 Columns, The Holy Grail
• Layout Techniques: 3 Columns, All Fluid
• Layout Techniques: 2 Columns, ALA Style
• Layout Techniques: 4 Columns, All Fluid
• Three Column Layouts

Additionally A List Apart has some great tutorials if you are looking for help creating a particular layout. For those of you who are just starting to learn how to do this, honestly, I feel your pain. I haven’t done my layout and design work in the last 2 years. I’m doing some now and I’m having to revisit all my resources to get things right. Be patient and keep working away, you’ll get it right eventually.