NOTE: This article is theoretical - CSS tables are not supported by the browsers yet, and cannot be used. I wrote this article to make a few points and to expose people to lessons learned in software development: that grids are an excellent way to layout user interfaces.
Stefan
-
Grid layout patterns are commonly used in creating software interfaces - in web design we call them ‘tables’.
But today HTML table based layout is generally frowned upon because:
- HTML tables render/display content in a fixed format/style that might not display properly in certain types of browsers.
- Tables semantic meaning is thought to represent tabular data - like a spread sheet. Thus using them for page level layout is just wrong … gosh darn it!
There are other reasons why some web designers will say HTML tables suck:
- HTML tables cause code to be bloated and thus pages will take longer to download.
- HTML tables will make your website less search engine friendly.
- HTML tables will make your websites less accessible.
The last 3 points are myths and should be ignored - I covered that in other articles.
That being said, the first point about tables imposing a fixed format/style (where formatting and structure are intertwined - that’s bad,) is very real and very important. It is so important in fact, that I will do what I can to avoid table based layout despite the extra work and problems this can cause.
It’s a terrible shame
Using a grid/table to create UI’s is intuitive, too bad that table based layouts are so controversial … but there maybe is a light at the end of the web UI tunnel: CSS table layouts.
What the heck are CSS tables?
From the W3C:
‘The CSS table model is based on the HTML 4.0 table model, in which the structure of a table closely parallels the visual layout of the table.’
Now in English:
CSS tables are just a set of CSS attributes that you can apply to (probably) div tags to create a ‘table’. Check out this code snippet and things should clear up:
<div class=”table”>
<div class=”row”>
<div class=”cell”>
<p>Yallow!</p>
</div>
</div>
</div>
This is an official W3C specification, I’m not inventing anything here!
So why invent CSS tables when we have HTML tables?
The answer is simple young grasshoppers: to gain the advantage of table based layout while avoiding the problems (mentioned above) with HTML tables:
- HTML tables format content in a fixed structure that might not render properly in certain browsers.
- Tables semantic meaning is thought to represent tabular data - like a spread sheet. Thus using them for page level layout is just wrong.
CSS tables can’t be used in any browser today, so why mention them?
I have two reasons why I wrote this article:
- To educate people of this long term possibility and maybe to start stirring things up - it would nice to have this web design tool.
- To make a point about grid based layouts: they have merit and should be considered.
Stefan Mischook
Stefan: I love your articles and over the past year of striving to be a web designer, including classes at the local University, the information you provide us novices has taught me a great deal. However, why give me worthless information? We are being hammered with new ways to make web design comply with the “gods” of the Internet (W3C) - IF ONLY, the current browsers would recognize these new concepts. It seems to me, as long as the major browsers continue to jockey over whose the “king” of browsers and deliberately find ways to make it more difficult for us who design for the Internet, nothing will ever work properly. The browser “kings” are certainly not interested in helping us be standards’ compliant - they just like tinkering with their toys.
I don’t purport to know any of these answers, but it sure is annoying trying to do a good job for your clients and make the rest of the world happy, too. What’s the old saying, “You can make some of the people happpy. . ”
Okay, I’ve vented - feel better - just keep the good stuff coming. Thanks.
@CNS,
I agree 100% - my position on the silliness of Web Standard zealotry is well documented …
Regarding this article:
My main goal was to show how using tables for page layout is more than reasonable in web design … contrary to what some people might argue.
The third item above, as it is worded, may be a myth. A table is not ‘less accessible’ to an impaired person. But, once they are into the rendered document, the journey becomes much more painful for them (vs. using block level elements for structure).
If I am understanding correctly tables are supported by a great deal more browsers than CSS. If this is true, then why whould anyone use CSS for something as pivital as a pages layout just because a table can shft the positioning slightly? It seems to me that the cons are outweighing the pros too much to at this point to make a dramatic swich to CSS (as for me).
I’m not saying this is my firm belief, it’s just a my understanding at this point and I would gladly accept any sort of corrections to it.
If you ask me what i see here i’ll tell you:
- I see that nothing here makes any sence. Please review all W3C recommendations and write your articles again.
I’ll leave you all with a few words. If you are against webstandars, it’s probaly you don’t now anything of webstandards. Better you study a litte.
@Mark Johnson,
“because a table can shift the positioning slightly? ”
That is not the issue with tables. As I stated in the article, the major problem with tables is that tables impose a fixed presentation, or in other words, a format to web page.
In the end, I think using CSS layouts are the way to go if at all reasonably possible.
@Hurtado,
“I see that nothing here makes any sence.”
If you need help, all you have to do is ask.
“Please review all W3C recommendations and write your articles again.”
No need, being someone who has writen software in about 7 languages, HTML, CSS and web page design is simple by comparison to say Java - just one of the languages I use.
“If you are against webstandars”
Why would you say that? Where have I ever said I was against the Web Standards - that’s just silly.
No I’m not against the Web Standards, but I am against people blindly following a specification and I’m against people spewing a bunch of tripe.
Specification change as do all technologies - the Web Standards are not perfectly implemented (in the browsers) and a knowledgeable/experienced developer realises this and codes accordingly.
@andy snyder,
If you design tables properly, they can be made to work reasonably well for the disabled.
Here are some tips:
1. Add the table summary attribute to your tables to describing the content/purpose of the table:
<table summary="Sales data for August">
2. Use table header tags and give each hearder a CSS ID. Allows screen readers to read the header and data information in a more logical order.
3. Use ‘headers’ attribute on each cell. The ‘headers’ attribute allows you to define the content of each cell:
<td headers = ”name">Stefan</td>
<td headers = ”age">35</td>
And the screen reader should read the table like so:
name: Stefan, age: 35
I’m a little disappointed by this entire thread. I appreciate Stefan’s article because it does what we all do at some point… speculate on what is coming and how it can make our jobs easier.
Further, the course of the “discussion” after the article seems a bit ridiculous, and Stefan is right; the web standards aren’t “standards” because not one browser maker has implemented them 100% correctly, nor have they updated their browsers to complete what wasn’t finished in the initial releases. I personally loathe the FACT that I have to either maintain two separate pages or use a dynamic scripting language to identically display the same code in different browsers… seems stupid to me.
Even the “platform independent” technologies don’t live up to spec… in many, many situations Flash/ActionScript behaves differently for different plugins; it makes no sense WHATSOEVER that the runtime on your computer does not work exactly the same as the player in the browser plugins. And let’s not forget that we have tell JavaScript how to interact with the various document models when it’s not really rocket science to conceive of passing JS what you want and letting the JS engine handle the appropriate modelling (IE vs. NS)… No takers on that one?
Anyway, I appreciate the article Stefan, though I’ll admit that It seems like almost just as much code to use CSS tables as it would regular HTML tables. Thanks for sharing.
@Kelvin:
“seems like almost just as much code to use CSS tables as it would regular HTML tables.”
Actually I would go a step further and say HTML table code is cleaner and less verbose. That said, I think the major advantage that CSS tables would bring to the plate is the separation of structure from presentation while still being able to leverage grid layouts.
In essence CSS tables would give us tables without any of the negatives … do keep in mind I don’t buy the less code bloat argument.
Comment about Flash plugin: at least in that case (unlike with the browsers,) the user can easily download a functional version of the plugin - not the case with the browsers.
Thanks.
I thought that one of the reasons to use CSS rather than html tables for layouts is to enable you to repurpose the copy into a different style etc for other purposes like for disabled viewers with a single click of a button?
Hi Steph,
Thanxs for the glimps into the future. I agree that the CSS tables look like they could bloat a page quickly. But the up side would be true cross platform compatibility (think wireless handhelds and small displays). Beside, tables are hard (i.e. fixed or static) and CSS is soft (can easily be changed and manipulated) so this concept of CSS tables will likey take 2 to 3 years before it is a tool that we can really use, but wow, what tool.
Note to the doom sayers of CSS and browser compatibility: FIREFOX!
Why do so many people forget there were browser wars in the early and mid 90’s. IE has not always been the top dog and, IE will likely fall to the way side as better products become more widely addopted. Really think about it Firefix is going to beat IE using the same core concept that IE used to beat down NS; make it better and give it away for free. Simple no?
One last note: we usee CSS to control all aspects of tables used for content presentation. It takes some extra work, but the control that we have over tabled sites is mind blowing. Mix in as much as possible and use tables only when needed and you can create some great hi-breed sites with real seperation of content and presentation. But like with all other things, you need to know HOW to use the tool available, it just takes time.
“FireFox is going to beat IE using the same core concept that IE used to beat down NS; make it better and give it away for free. Simple no?”
One difference, Microsoft had Windows as a vehicle to push IE - something that FireFox does not have. And NS4 was so bad that IE was a really needed, but this is not the case with IE6 vs. FireFox.
…
Yes, IE6 has rendering bugs and the FF plug ins are cool, but most people don’t care what browser they use. I think IE (for the next few years at least) will dominate.
I’m neither a professional web designer, a geek, nor a web-standards wonk, just a struggling seat-of-the-pants webmaster. Over a year ago, at the instigation and encouragement of Stefan and others, I began the conversion of my rather large website to CSS. I still haven’t completed the job (some pages are so seldom-revised that they are low priority, others would be beyond my positional-CSS abilities), though it’s about 70% done and all new pages are done in CSS. I’m solidly sold on CSS, because of the clean pages, the ability to edit everything swiftly and easily using only a simple text app, and the capability to fine-tune the appearance of the entire site using style sheets.
CSS tables would be a boon! Perhaps the basic table structure is a tad more verbose than HTML, but when HTML tables have to repeat designations for every single cell, that’s REAL code-bloat. CSS tables would reference the style sheet for non-default font specs — at most you’d need a class or ID reference for non-conforming cells. I agree that much of the response to this thread has been on the thoughtless side.
CSS isn’t perfect — the non-intuitive “inheritance” and the agonies of positioning make me want to hoot and screech sometimes — but it’s nevertheless the only sane way to design pages that one may wish to edit and revise occasionally. I hold with those who feel that a page should be intelligible and readable when viewed as source code — just one look at a page generated by Microsoft FrontPage should convince anyone of that! ;-D
I think one thing we’re all forgetting here is that ultimately, the end user rules supreme. As designers, programmers, hobbyists, etc., we all have to be concerned ultimately with what the end user will see. That said, the only real way to control this, AS OF TODAY, is with a hybrid CSS/HTML tables mix. I know, I know, they both don’t work fully or completely up to wc3 spec on all mainstream browsers, but that’s the best way to get the job done today.
What do I mean? Simple: CSS is either too loose or too strict. HTML tables require too much code if the table is long and you’re not using styles. The best way to manage this is a marriage of the two using IDs and classes.
Simple.
I definitely agree with Slideri812 in that the separation of content and presentation is key to portability, and I look forward to its practical application (I use my PocketPC phone EXTENSIVELY while away from my lappy).
Cheers!
I’d just like to say that I’ve been using tables and CSS layouts for around the same amount of time, so I expect I have a similar depth of knowledge of both, and I really do think that tables are far easier to use, more predictable across different browsers and don’t provide the same amount of problems by having features that are unsupported in various browsers.
Perhaps if the ‘table’ tag was named ‘grid’, purists wouldn’t have such a problem with using it.
As a side note, Firefox does seem to implement the CSS tables as described above.
Great article. Very informative. We are working on starting to code this way.
John,
http://www.blog.sellitbuyit.ca