There's a good discussion going on over at Web Graphics challenging web designers to format their forms with CSS as opposed to tables. I've actually been meaning to write about this subject on this site and the discussion over there is a good catalyst.
At silverorange, we've been moving toward table-free layouts over the past year. Some sites we've done recently have been almost entirely CSS designed and some others have been hybrid layouts. However, forms is one area where we are still using tables every time. Why? Because even if they aren't semantically correct, tables work extremely well for laying out form inputs and field titles.
The few examples of CSS designed forms I've seen use fixed widths to determine the alignment of the field titles to the inputs. That works fine except when anyone resizes their fonts and you must also specify a precise width for each form you design as the title lengths are all different. Is there a way to specify the width of a <div> as a variable value? I don't care precisely how wide my <div> is, I just want all of my field title <div>s on one page to be the same width. For example, <div style="width: n;">. Has this been discussed as part of the CSS3 specification? Or maybe people have better suggestions...
Comments
Egor Kloos - January 28, 2004 11:13 am
Yes, I've found this to be a pain also. Tables do work very well although they're not semantically correct when used for layout. CSS does kind of drop the ball when it comes to HTML form elements. You can fix the size of the form but seeing as a form is such a part of the site interaction this at the very least sould be more flexible. So unless stylesheets can solve this it looks like Tables are still a viable option.
Johnny Rukavina - January 28, 2004 12:06 pm
Pardon my ignorance, but what is meant by "not semantically correct"?
Daniel Burka - January 28, 2004 1:02 pm
<p style="margin-top: 0">Not ignorance at all Johnny, I should have explained. Many HTML coders are trying to move toward (or back to) using tags that make sense for what they were intended to be used for. That is, using bullet lists where appropriate, using header tags like <h1> for actual titles, etc. It sounds simple, but for a long time, many designers have been just making their code look right, but not neccissarily with the appropriate code to do so. For instance, you can make a title look like a title by formatting your text to be big and bold, but by using proper header tags like <h1> your code means something to people (or search engine bots) who can't see the formatting. Using the right tag for the purpose means your code is semantically correct. Even unformatted, its basic intention is still clear.</p><p>Tables were originally intended to be used for displaying tablular data (like tables of numbers) and not for formatting at all. Advocates of style sheet design are moving away from using tables to format their designs and are trying to return tables to their original purpose.</p>
Egor Kloos - January 28, 2004 1:10 pm
Well, it's quite simple. HTML uses certain words for tags (namespace) to create a structure for a document. H1, FORM, IMG and TABLE. All these tags have a purpose and should contain a certain type of content. A H1 tag contains the most important header of the document. A TABLE tag contains tabular data, that's is what it's for. Semantics.
Read more on Web Semantics.
oh, btw. I've created a tableless form that will scale with window and text size. Well more or less. Judge for yourself
Kevin Lawver - January 28, 2004 1:42 pm
AOL Search (http://search.aol.com) has used CSS for its search form for almost a year. It makes the page smaller (although there are too many divs currently), and the ID's make it easy to style the form. It also looks "right" in all modern browsers without any style hacks. It may not stay that way forever, but it's that way now, and I like it.
Daniel Burka - January 28, 2004 2:24 pm
That's great that AOL is using CSS Kevin, but the real challenge is formatting more complex forms. This type of form for example is where the difficulty lies.
Steven Marshall - January 28, 2004 4:25 pm
Call me "Mister Silly" if I'm missing something, but doesn't specifying your forms "absolutely" in ems solve the problem of sizing, since 1 em (should) always equal the user's default font size?
So, for example, 1 em = 12px on my machine, but on a vision-impaired user's system, 1 em might be = 30px, for example...
padawan - January 28, 2004 6:37 pm
If you consider the table to be a tabular list of questions and answers, is that really a semantic sin?
Egor Kloos - January 30, 2004 3:50 pm
Personally I don't consider TABLE's for tabular a list questions and answers but just purely for data.
Jonathan Hedley - February 6, 2004 7:39 am
I think a good argument could be made for using tables to layout forms in a semantic web.
Two table data cells in a table row (a label followed by an input widget) are obviously semantically linked, whereas sibling divs aren't necessarily.
Additionally, the fact that there are <input> nodes on a page is going to inform a semantic agent a lot more than a div's class-name or layout size.