Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it bad design to use table tags when displaying forms in html?

Tags:

I keep hearing that div tags should be used for layout purposes and not table tags. So does that also apply to form layout? I know a form layout is still a layout, but it seems like creating form layouts with divs requires more html and css. So with that in mind, should forms layouts use div tags instead?

like image 633
fuentesjr Avatar asked Sep 20 '08 21:09

fuentesjr


People also ask

Is it bad practice to use tables in HTML?

HTML tables were originally intended to be used for presenting tabular data, not for layout. The World Wide Web Consortium (W3C®) discourages use of tables for layout because they are striving for a web in which content and structure are completely separate from presentation.

Can we use table in form in 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).

Is table tag outdated?

table tag isn't deprecated (you can look at the html spec). What you've heard of is probably tableless layouts, because tables should not be used for positioning elements on the page.

Which HTML tag is used to display the data in the table form?

HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.


2 Answers

Yes, it does apply for form layouts. Keep in mind that there are also tags like FIELDSET and LABEL which exist specifically for adding structure to a form, so it's not really a question of just using DIV. You should be able to markup a form with pretty minimal HTML, and let CSS do the rest of the work. E.g.:

<fieldset>     <div>          <label for="nameTextBox">Name:</label>          <input id="nameTextBox" type="text" />     </div>     ... </fieldset> 
like image 142
Tim Booker Avatar answered Oct 05 '22 17:10

Tim Booker


I think it's a myth that forms are "difficult" to layout nicely with good HTML and CSS. The level of control that CSS gives you over your layout goes way beyond what any clunky table-based layout ever would. This isn't a new idea, as this Smashing Magazine article from way back in 2006 shows.

I tend to use variants of the following markup in my forms. I have a generic .form style in my CSS and then variants for text inputs, checkboxes, selects, textareas etc etc.

.field label {    float: left;    width: 20%;  }    .field.text input {    width: 75%;    margin-left: 2%;    padding: 3px;  }
<div class="field text">    <label for="fieldName">Field Title</label>    <input value="input value" type="text" name="fieldName" id="fieldName" />  </div>

Tables aren't evil. They are by far the best option when tabular data needs to be displayed. Forms IMHO aren't tabular data - they're forms, and CSS provides more than enough tools to layout forms however you like.

like image 41
David Heggie Avatar answered Oct 05 '22 15:10

David Heggie