Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it semantically correct to have a HTML Form set out in a Table?

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.

like image 796
Richard Avatar asked May 26 '11 13:05

Richard


People also ask

Can you put a form in a table HTML?

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).

What is semantically correct HTML?

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.

Is form semantic element?

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.


2 Answers

============

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/

like image 63
Jibou Avatar answered Nov 09 '22 10:11

Jibou


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/

like image 45
mathijsbrand Avatar answered Nov 09 '22 11:11

mathijsbrand