Menu
We all know that it is wrong to use a Table as a layout aid.
I often use tables to structure forms. Is this semantically correct?
I am wondering about this as it is logical for a form to be in a table layout (at least the forms that I create), as all the fields have labels that correspond to the expected input into the fields.
The data obtained is then definitely semantically correct displayed in a table.
But is it the same for the form?
I have a feeling that it is a matter of opinion, but I am interested to hear people's reasoning behind their opinions.
796
You can have a form inside a table cell. You cannot have part of a table inside a form. Use one form around the entire table. Then either use the clicked submit button to determine which row to process (to be quick) or process every row (allowing bulk updates).
Semantic HTML is the correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance. Semantically correct HTML helps search engines, screen readers, and other user devices determine the significance and context of web content.
What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form> , <table> , and <article> - Clearly defines its content.
============
EDIT : Thanks @Will Martin. Actually, I checked, it would seem that using table to structure form IS semantically correct as it is displayed on w3c standards document. See here : http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
============
I've read an article (unfortunately in french) yesterday that was basically saying that you shouldn't use table to structure forms. (http://www.alsacreations.com/article/lire/1209-display-inline-block.html)
It doesn't say why not but it says that you should use the display:inline-block. Be carefull though, display:inline-block is a great parameter but it has drawbacks when browsing IE7-6 (not surprisingly).
Read this article (in english) that explains 'inline-block' => http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
63
The web standards project has made a full tutorial on the why and how to avoid tables in html forms. It's a very easy read and answers all your questions:
http://www.webstandards.org/learn/tutorials/accessible-forms/
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
