Thursday, May 12, 2011

Webpage layout without tables

The HTML5 standard states unequivocally that tables should not be used for layout. Yesterday, I was working on a old website of mine that used tables for that purpose and decided to remove them to conform with the standard. Not being a very experienced web-designer, I thought it would be a simple matter of replacing a lot of table tags with divs and finding the right CSS properties. Evidently, this is much easier said than done.

Originally, my webpage two table columns. The first had the navigation sidebar, and the second had the main content of the page. I could not figure out how to get proper columns with just CSS and divs. Making the sidebar float: left worked except that then the content of the page started wrapping around the bottom of it. Of course, I couldn't find any CSS to get a float to take up the whole height of its container. In the end, I resorted to setting a left margin on the content wider than width of sidebar, which made the two pieces stay out of each other's way.

I'm curious as to what real web-designers say about this problem. There must be some trick I'm missing. It seems many sites, like python.org, are forced to resort to position: absolute tricks to get nice sidebars. I also wonder if the supposed problem with table layouts, that screen readers have trouble with them, could be alleviated by adding a role="layout" attribute to tables. It's a case of "practicality beats purity" if I ever saw one.

9 comments:

Irmen de Jong said...

I'm not a web designer myself but this no-table-for-layout thing gave rise to a gazillion of css-based layout "templates", if you will.

See for instance the examples on http://css-discuss.incutio.com/wiki/Three_Column_Layouts

Or css based grid systems like http://960.gs/

Maybe you can get some ideas from those? It took a while for me as well to get used to, if you come from a table based layout background.

Shane Hathaway said...

I always base column layouts on Matthew James Taylor's work:

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

CSS 2 makes columns very hard to do correctly. I hope CSS 3 provides a saner solution.

Tucanae Services said...
This comment has been removed by the author.
Tucanae Services said...

You should take a look at the nav, section and header tags for HTML5

Thomas Weigel said...

Why "forced to use"? position: absolute is perfectly valid HTML5/CSS coding.

HTML code should be semantic; CSS code should be visual.

With that said, you can avoid wrapping further down by setting widths:

[nav]sidebar[/nav]
[article]main text[/article]

css:

nav { width: 20%; float: left; }
article { width: 75%; float: right; }

However, I would personally do this:

nav { position: absolute; left: 0em; top: 0em; width: 15em; }
article { position: absolute; left: 16em; top 0em; }

Ken Whitesell said...

The way I've handled this situation is that I create _three_ divs. The first is the "outer" div that serves as a general container. In side that outer div are the two inner divs of unequal size - the thinner block on the left for the nav bar, and the thicker bar on the right for the content.

Chris Adams said...
This comment has been removed by the author.
Chris Adams said...

Floated elements will expand to contain their floated children. If you don't want to float everything, set `overflow: hidden` on the containing element:

<div style="overflow: hidden">
<div style="float: right">Look at me!</div>
</div>

A List Apart had a good CSS Floats 101 article recently; CSS float theory is old but still relevant, too

Nick Sloan said...

Don't be discouraged so easily. As a Python developer, you surely know that there are advantages to be gained by separating concerns... In this case the concerns are presentation vs structure.

You are jumping onto the CSS bandwagon late. On the upside, every problem you will come across has been solved ten times over already. You will have to spend time learning and doing under research into all of the tricks that have been discovered, but you will be better off for it in the long run.

You must know that the disadvantage of tables goes beyond semantics, so I'm hoping that your suggestion suggestion of just throwing a role attribute on the table wasn't a completely serious one.

Finally, consider who is actually reading your blog. I would bet that most have modern browsers. If that is the case, give the CSS3 flexible box layout a look.