HTML Forms - tables or CSS?

[mendhak]

When creating a data entry form for a website, would you continue using CSS for layout or would you use a table?

There are some that say it should be a table because a form is tabular data, but of an interactive nature. There are others who say that it should be created like all other pages with CSS for layout.

Let's hear your opinions and remember, you're still wrong about what you thought.

[Pino]

For me it totally depends on the output, if I'm doing a quick and functional Admin system for example. I might just use a table, however for front end stuff I've allways used CSS.

Why? Well to be honest I'm not sure why I suppose it just what I'm used to :-/

Pino

[gep13]

Hey,

I am with Pino on this one, I tend to use DIV's and CSS.

Is this just out of curiosity, or what's going on in the froggy head of yours?

Gary

[mendhak]

Well, I'm on the fence. I think forms are a very special case. Forms are interactive tabular data. But they're also presentation. They're both. I don't agree that it's an XOR between them. I think it's a case of us taking this "Don't use tables! Panic! Hair on fire" thing too far. The entire purpose in the first place was semantics.

With that in mind, there's also the fact that they are key-value pairs. Your label is the key, the input field is the value. It could therefore also be in a Definition List! (DL, DD, DT) A definition list is, after all, semantic. It's saying "Here is the key, here is the value, I'm a little teapot." And people do use that.

However, at its core level, the label and its input field are semantic in and of themselves! So if you want to be pedantic about this, you'd say that the label and its input element should not be inside anything else. They should be grouped up in fieldsets - as sets of related fields - and then have styles applied because fieldsets are block level (I think).

But that's not the case... HTML does mix semantics and layout. That is why I say that everyone is wrong.

Yes, I do overthink things sometimes... but with good reason. After all, who else but me would save you from inline ASP.NET code?

I'm therefore of the opinion that all ways of presenting forms are perfectly valid. You can use a table, you can use CSS, you can use DLs, you can use FIELDSETs, you can use the corpse of a jackrabbit if you want.

[kareninstructor]

Several good reasons for using CSS starting with maintainability of code/layout then we have better control when positioning elements. Using CSS can sometimes seem like a good deal of trouble yet once you understand CSS and how various browsers render (or not render) life gets easier.

[kareninstructor]

Well, I'm on the fence. I think forms are a very special case. Forms are interactive tabular data. But they're also presentation. They're both. I don't agree that it's an XOR between them. I think it's a case of us taking this "Don't use tables! Panic! Hair on fire" thing too far. The entire purpose in the first place was semantics.

With that in mind, there's also the fact that they are key-value pairs. Your label is the key, the input field is the value. It could therefore also be in a Definition List! (DL, DD, DT) A definition list is, after all, semantic. It's saying "Here is the key, here is the value, I'm a little teapot." And people do use that.

However, at its core level, the label and its input field are semantic in and of themselves! So if you want to be pedantic about this, you'd say that the label and its input element should not be inside anything else. They should be grouped up in fieldsets - as sets of related fields - and then have styles applied because fieldsets are block level (I think).

But that's not the case... HTML does mix semantics and layout. That is why I say that everyone is wrong.

Yes, I do overthink things sometimes... but with good reason. After all, who else but me would save you from inline ASP.NET code?

I'm therefore of the opinion that all ways of presenting forms are perfectly valid. You can use a table, you can use CSS, you can use DLs, you can use FIELDSETs, you can use the corpse of a jackrabbit if you want.

In regards to definition list, seems that many developers are unaware of them and that they are easy to use and formatted. Seems ordered and unordered list appear more mainstream for some reason over DL's.

[techgnome]

I don't see a problem with using table to control the layout of the form.... since that's just a small portion of the page. I tend to use CSS for page layouts... but for forms, I've got no qualms about using tables for that portion.

But seeing as how I'm wrong anyways, use your best judgement.

-tg

[JuggaloBrotha]

I use a GridView for data entry forms like that, it lets me display multiple records as needed and the inner templates can be skinned with css.

[Nightwalker83]

When creating a data entry form for a website, would you continue using CSS for layout or would you use a table?

I have been advised that it is a bad idea to use tables for layouts or anything else except data display (or splash pages). That being said I would use css because you will end up with a lot less coding hassles.