Tableless design is something that every designer should know how to do. I've vowed to create all apps without the use a single table and have learned a lot good xhtml / css along the way. The most valuable lesson for me was gaining a basic understanding of the css float attribute.


Reply to this post to share your css tips for going tableless.

Post your table and I'll show you how to do it with less actually code using divs.

The internet will be a better place for it.

Here is an example of using tables. This is the output from photoshop after slicing up an image. Below it will be the same thing after I converted to tableless design.




Going tableless means less code in your html. It is easier for text based browsers to understand and puts all the definitions in an external style sheet. This means removing the need to edit your html later on. Using this method allows you to edit your style sheet instead.






Now isn't that much nicer.


Here is the css required.





You can see this code live in action here. I've used it to for designing a form. And inserted form elements in between the div tags.

http://laweightlosssurgery.com/bmic.html

I too have been migrating away from tables. Its amazing how much code you can get ride of using a CSS and DIV based layout. I am doing it in hopes that I can increase Search Engine Ranking on google. In a few days I am launching my first major CSS / DIV site. If I get good feedback from the search engines, I will let you all know.

I'd be interested to see if removing tables from design would actually effect SEO and how. Do you have any thoughts or evidence on why/how it would?

I just finsihed a site for a client using Divs and CSS. I am now just waiting on the client to give me the thumbs up so I can move it to the production server ( on HMS of course ) I will know pretty soon how well it works. There will be a definite advantage being that by using absolute positioned DIVs I can get important stuff towards the top of the page, and keep navigation code at the bottom of the page. Even though I have read plenty of stuff that states search enignes ignore the HTML markup. I still believe it can make a difference especially with keyword density. I have also fed keywords into my page names, and used H1 H2 and H3 tags. The site isn't the prettiest thing, but if it gets good SEO I will be happy.

This has been proven to work. By using elements designed for layout (div's), there's much less markup. By moving your styles to an external container (CSS files), that markup is removed too. This causes content and keyword density to increase, at times exponentially.

As far as absolute positioning, I'm a firm believer in using it sparingly. I do use it, and often, but never to the extent that you are. This is because absolute positioning isn't rendered to any true standard per different browser engines.

BUT... I am still very interested in knowing how this turns out for you. Please keep us updated