CODEWITHSUNDEEP
htmlformshtml-tablehtml-lists
Alex KeySmith
Alex KeySmith

Reputation: 17101

HTML Tables vs Lists for form inputs

Everyone knows that you should be only using tables for semantic purposes, to markup tabular data.

I personally use ordered lists to markup form inputs.

However I have seen arguments pro using tables to markup forms, the argument being that you are inputting tabular data.

I think this is only true in very specific circumstances, where the data inputted would be naturally outputt/represented as a table. However I'm guessing this has a downside that it makes the (very useful) label tag redundant, as the table th tags should (in theory) represent the column titles.

I suppose what I'm trying to say is that I think tabular forms have their downsides, but I'd be interested in knowing what the community thinks of the pro's and cons of using lists vs tables for inputs.

The reason I bring this up, is that the w3 specs do not offer guidance (from what I can find) on marking up forms. As far as I can tell, lists should be used mostly unless the inputted data really fits tabular data (e.g. your inputting into a Google spreadsheet).

This has the danger of turning into a battleground, so please consider before posting and perhaps it may make a good wiki page demonstrating where best to use each.

-thanks Alex.

Upvotes: 4

Views: 1462

Answers (2)

albert
albert

Reputation: 8153

use form controls and form elements for forms. don't use either tables or lists. if your form is that you complex you can nest fieldsets and even forms in html5.

examples

http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box http://line25.com/wp-content/uploads/2011/form/demo/index.html off top of my head. those don't even implement the minimum controls/elements though. need fieldset, label, and legend

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

My rule: if it has grid-like properties and the rows and columns contain logically associated data, then it's a table.

Upvotes: 5

Related Questions