After my latest post about how to design a beautiful form using CSS, I received a lot of messages from some readers who accuse me to be a "CSS fanatic" :).
They asked to me why I spend my time coding an "unnatural" CSS structure instead of using a more simple <table> tag to design a form with labels and inputs text...
Ok, I admit it: I love CSS, but I am not a "fanatic"! I try only to find some interesting solutions about how to use them. In fact, in my defence, some weeks ago I wrote a post exactly about this topic (Table's anatomy: why tables are not so bad) after my friend Jason asked to me: "I want to use CSS instead of a table to display a matrix with some values. How can I do?"
My answer - shortly - was: In general, tables are not the devil and if used in the correct way (for example to display tabular data), can be more functional and simpler to design than CSS pseudo-alternatives.
How I said, in similar situations, I work with tables but oneslty if I can find an "elegant" alternative to design page elements "table-like" (for example a form with labels and input fields) using CSS instead of <table> tag I prefer using only CSS. I think the code is more clean and more flexible.
Then, tables or pure CSS code? Let me say: "It depens on..."
Probably a solution which attunes anyone will be using the new CSS3 Multi-Column Module, but we have to wait for a final release of CSS3 specifications and a full integration with all new generation browser. A typical Multi-Column structure with CSS3 can be designed with the following code:
div.myTable{
width:600px;
column-count:3;
column-width:200px;
}
div.myTable h1{column-span:all;}
width:600px;
column-count:3;
column-width:200px;
}
div.myTable h1{column-span:all;}
...where each <p> element into myTable layer will be a column with a width equal to 200px. You can define also an header, for example using <h1> tag like in this example:
...and HTML code is:
<div class="mytable">
<h1>Column headline</h1>
<p> ... First column: some content here... </p>
<p> ... Second column: some content here... </p>
<p> ... Third column: some content here... </p>
</div>
<h1>Column headline</h1>
<p> ... First column: some content here... </p>
<p> ... Second column: some content here... </p>
<p> ... Third column: some content here... </p>
</div>
How you can see, it's really more clear and less "expensive" than using <table> tag or a pseudo-table designed with CSS2.
About CSS3 Multi-Column I found an interesting post on A List Apart which I suggest to read, or you can also take a look here for another detailed explanation.
And now... are you a CSS fanatic? Leave your comment!
I am 
Agreed, I think CSS is the way to go. I have to say, your CSS pseudo-table looks nice, I gotta try it out.
You've got a good point there.
Tables are for tabular data, period. There's no proper alternative for that (I say proper and MEAN proper - you can, of course, make a FAKE table with CSS and some irrelevant HTML but that's semantically incorrect and simply stupid).
Tables are NOT for layout or lists or forms or anything like that. If you want stylized lists and forms - use CSS, that's what it's for.
I'm more of a "semantics fanatic" than "css fanatic" really.. though there's often very little or no difference at all :)
Very nice Antonio. I can't wait for CSS3 to be implemented. It will open up lots of possibilities.
I can say I'm another CSS fanatic. I not only find it easy to use, modify and totally change (when needed), but this doesn't mean I despise the use of tables at all.
A hello from Peru for you.
I have this argument all the time with my girlfriend. She uses CSS for forms as well.
People, forms *are* tabular data. Except that some of the data is missing and you have to enter it (like in a spreadsheet for example; spreadsheets are not tables?). The table element actually makes sense here.
CSS Fanatic sounds like being sick... I think sounds better Pro-CSS :)
I agree with you about tables are for tabular data.. that's the original
purpose of tables, isn't it?
Great blog :)
Greets!
Since I started building sites I have been a fanatic. I can't wait for the css3 spec to be widely adopted by the browsers. It offers so much more functionality!
It does certainly depend - if you want your site to be accessible or not, for screen readers.
I'd have to agree with teppo - I'm becoming more of a "semantics fanatic". ;)
@Covidiu: how can you possibly believe what you're saying? How are forms tables?
According to Wikipedia, "A table consists of an ordered arrangement of rows and columns."
Can you explain to me what in the Blogger comment form are the rows and what are the columns? How are these related?
@harmen janssen:
Suppose you have a form with personal information. Something like: first name, last name, address, telephone number, email, comments etc. I don't care how you code the form. My question is: when you display that data, do you use a table or not?
@Harmen Janssen: oh, and to answer your question: you don't have columns, you have rows. The table is turned 90 degrees counterclockwise. The labels are your “column headers”.
I made a little drawing to illustrate my point:
http://img84.imageshack.us/img84/7185/formpp4.png
CSS is the way to go...I use it almost exclusively except where HTML or PHP are needed. I even learned how to make drop down menus in CSS...way cool stuff. (Though I haven't had a chance to implement that yet.)
i dont think im a fanatic.. cause I suck at it.. :(
I think either divs or tables can be used for forms.
Personally, I prefer divs, as I often like the label to be positioned above the input. That doesn't make as much sense when laid out with a table.
The other reason is simply that the markup is a shorter.
@covidiu; To answer your question, no, I don't use tables to display a form. Other than believing it isn't appropriate, I also simply don't need them.
And your example is too easy. That way, I can create a table out of lists, paragraphs with headers, columns in a layout, et cetera.
I absolutely mean no offence, but that's very old-school thinking you're doing there.
@Covidiu: though your argument makes sense especially when we're dealing with large amounts of data with complicated structure, it would be quite far-stretched to call something as simple as a search form "tabular data". My point being that forms can be tabular data but that's not always so. And I do realize that people have argued on this matter for ages and there's no obvious "correct answer".
Anyway, I prefer pure forms with fieldset and label elements, formatting done in CSS. That's better solution considering accessibility too, since screen readers at least used to have pretty horrible support for tables and forms. I'm not really a regular user, so things might have improved :)
@Harmen Janssen: No, I don't think you can use tables for lists (you have a tree structure there, you don't have “headers”), or paragraphs with headers (the p and h* elements are better suited; depending on the actual content definition lists may be better suited), or layout columns (no tabular data, no headers). You say you don't need tables, but that's not what I ment. I ment that tables are more appropriate here *semantically* speaking. They make more sense than paragraphs (look at the examples in the article; come on, are forms composed of paragraphs?!) or other elements with little to no semantical value (spans, divs).
@Teppo: I know tables are probably not suited for any form.
No i am not a CSS fanatic. But i know using CSS style is better than table specially when you design a form.