HTML form in tables or not.

Question

Before anyone closes this question or complains ... I looked at the entire StackOverFlow website, but could not find anything direct regarding tables and forms.

I have a form that contains at least 20 to 35 labels and text fields in different categories. Therefore, there will be too much for each element to start using CSS.

For some reason, I like to use tables to align all the fields with their respective labels, as some labels will be larger than others (ie "Name" is a bigger word than "Age") , and therefore the layout will be distorted. And I can’t start applying css for each shortcut and text field (about 20 each ... which is 40 individual css rules).

If someone cannot give me some tricks, I will be grateful.

I know CSS is good for forms, but what about very large forms?

Answer 1

As long as you use the cascade to your advantage, there is nothing wrong with CSS for forms.

In fact, I recommend using table .

Just set some basic rules ...

 input { padding: 3px; float: right; } 

Then handle exceptions in your rules ...

 input#age { float: none; } 

Answer 2

Forms are not tabular data, simple forms just look like they do.

CSS is great for long forms. You have styles for most data. Then more specific styles for short data bits and / or long data bits, etc. Do not put everything individually.

Answer 3

try using UL and LI instead of a table, as described in the next article Click to see article

It also provides CSS.

Answer 4

You do not need 40 separate CSS rules. You can have one rule for all labels and one for all text fields.

BUT, saying that this is such a layout where you have two columns of material, and you want all the materials in column 1 (labels in this example) to be aligned with each other, and all the contents in column 2 (text boxes), aligned with each other while maintaining line alignment - well, that's exactly what works great for a good table.

I am a big supporter of CSS, and I believe that the abuse of tables (like page layout) is evil, evil, evil, but I would definitely go with tables on that.

Answer 5

At the end of the day, it all depends on preferences and functionality. My personal preferences are divs / CSS. The cascading nature of CSS, clean code, etc.

But hey, if you like tables - shout it from the roof!

Answer 6

You can use jQuery Masonry .

As far as I can see, it will reach the required layout, and all you have to do is add the classes and one line of JS code.

Answer 7

You can create good, accessible forms using CSS without too many CSS rules (for the alignment part, anyway). You just need to set the width of all the labels - with one rule - and determine how they interact with the input elements. There's a good article at http://www.websiteoptimization.com/speed/tweak/forms/ (only the first one I found, I'm sure there are many others).

Answer 8

For an IMO form, I would rather use a table to clean it. Use CSS for your website layout. But then again my opinion ...