HTML form using <table> or <div>

I read that, in HTML, it is better to display non-tabular data using the ` tag instead of the tag. I have a website that is displaying a lot of things as tables, because I like the look of it.

Here's what it looks like:

Screenshot

Here are the CSS and HTML for the table:



table{width:100%; border-collapse:collapse; table-layout:auto; vertical-align:top; margin-bottom:15px; border:1px solid #CCCCCC;}
table thead th{color:#FFFFFF; background-color:#666666; border:1px solid #CCCCCC; border-collapse:collapse; text-align:center; table-layout:auto; vertical-align:middle;}
table tbody td{vertical-align:middle; border-collapse:collapse; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
table thead th, table tbody td{padding:5px; border-collapse:collapse;}
table tbody tr:nth-child(odd){color:#666666; background-color:#F7F7F7;}
table tbody tr:nth-child(even){color:#666666; background-color:#E8E8E8;}

.table_sign_up{width:600px;}
.table_sign_up th:nth-child(1){width:200px;}
.table_sign_up th:nth-child(2){width:400px;}
.table_sign_up input[type="text"] {width:380px;}

::-webkit-input-placeholder{color: #B0B0B0;}
::-moz-placeholder{color: #B0B0B0;}
:-ms-input-placeholder{color: #B0B0B0;}
:-moz-placeholder{color: #B0B0B0;}

Your Info

Volunteers under 14 should be accompanied by an adult.



Info Needed
Enter It Here





E-Mail Address







First Name







Last Name







Cell Phone







Shirt Size




Extra Small
Small
Medium
Large
Extra Large
2XL
3XL





How did you hear about this race?




The race e-mailed me
My volunteer group told me
marathonvolunteers.com
craigslist.org
idealist.org
volunteermatch.org
createthegood.org
allforgood.org
eventbrite.com
marathonvolunteers.com
Facebook Ad

Specification

In the HTML specifications you can find the following:


The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.

From w3.org "11.1 Introduction to tables"

So, technically it's fine to have form elements within a table.

Layout

Your layout definitely looks tabular. As mentioned in the comments, you even have a heading for each columns. So from that point it's fine, too.

Markup

Two things that can be improved in your markup:

Form element

You don't have a `-element currently. You can wrap the whole table into a form:

Or you can make use of the HTML5 option, to link elements to a form, even if they aren't children of the form:

See w3.org: 4.10.18.3 Association of controls and forms

Link between label and form-element

Currently there's no connection between your labels and the actual input. Use a ` element to create a link between those two. The advantage is also, that if somebody clicks the label the input will be focussed:

    E-Mail Address

    

Screenreader

Using form elements in a table is fine for screenreader as well. However, you should keep those things in mind:


Forms should be clear and intuitive. They should be organized in a logical manner. Instructions, cues, required form fields, field formatting requirements, etc. should be clearly identified to users. Provide clear instructions about what information is desired. If any form elements are required, be sure to indicate so. Make sure that the order in which form elements are accessed is logical and easy. This can sometimes be problematic if tables are used to control layout of form items.

From webaim.org "Creating Accessible Forms: Ensure Forms are Logical and Easy to Use"

As your form is very simple, this shouldn't be a problem. If your form grows or becomes more complex, e.g you use labels to address multiple inputs, here's a good read, where tables are used for the layout: Advanced Form Labeling: Handling Multiple Labels

To sum it up, you're approach is fine, and it's even better than the other one, where "Info Needed" and "Enter It Here" aren't associated with the columns in any way.

StackExchange Code Review Q#156394, answer score: 6