First of all, thanks for a good question!
This is obviously a form, not a table. The layout of it doesn't really matter, the point of a table is to designate that you are displaying data that lends itself to tabulate (think of it as a composite of simple lists.) Your use case here is to gather input, it doesn't matter whether its layout kind'a sort'a looks like a form.
Of course, none of this matters if you don't really care about semantics; in which case I say use whatever you want. In any event there are plenty of examples and frameworks out there that'll do what you want, but it's not particularly difficult to do by yourself either. And in fact, it can be very much like laying out a table, if you so wish. I'll walk you through it.
(tl;dr)
First, some markup:
<form>
<label><span>Name:</span><input name="name" type="text"></label>
<label><span>Surname:</span><input name="surname" type="text"></label>
<label><span>Age:</span><input name="age" type="text"></label>
<label><span>Job:</span><input name="job" type="text"></label>
</form>
This is not particularly tricky markup. I've not added any classes as you can see, and I'll get to that in a second. But first, I wanted to show you, without any extra markup, how to turn this into a layout like that you requested:
form {
display: table;
}
label {
display: table-row;
}
label > * {
display: table-cell;
}
label > :first-child {
text-align: right;
padding-right: 10px;
}
That's it really. By using css and the table, table-row and table-cell headers for the display values, it's dead simple to create a table like layout without having to sacrifice semantic markup. This css doesn't change the semantics or accessibility of your form, it just provides clues to the browser how it should lay things out. Now, you also asked about adding a header to this. Changing the markup to the following, will unfortunately not really work:
<form>
<div>
<span>Field</span><span>Value</span>
</div>
<label><span>Name:</span><input name="name" type="text"></label>
<label><span>Surname:</span><input name="surname" type="text"></label>
<label><span>Age:</span><input name="age" type="text"></label>
<label><span>Job:</span><input name="job" type="text"></label>
</form>
This is because our styling rules doesn't include any selectors for the div. Now, there are a number of ways this could be fixed, with various different pros and cons. You'll probably run into people that have one thing or another to say about best practices in this area, but honestly it mostly comes down to what works for you. I'd say so long as you keep the markup accessible for humans and robots alike – this does mean trying to stay semantic and make use of microformats, amongst other things – then adding whatever extra cherries on top to get the job done is A-OK!
Anyway, here's one way of doing it, to get your creative juices flowing. First, the markup:
<form>
<div class="form-row">
<span>Field</span><span>Value</span>
</div>
<label class="form-row"><span>Name:</span><input name="name" type="text"></label>
<label class="form-row"><span>Surname:</span><input name="surname" type="text"></label>
<label class="form-row"><span>Age:</span><input name="age" type="text"></label>
<label class="form-row"><span>Job:</span><input name="job" type="text"></label>
</form>
And then the css:
form {
display: table;
}
.form-row {
display: table-row;
}
.form-row > * {
display: table-cell;
}
.form-row > :first-child {
text-align: right;
padding-right: 1em;
}
As you can see all that had to change was that we introduced the class form-row to classify our content such, and replaced the label selectors in the css with .form-row. Now there are plenty of ways to go with this and I hope you take some time to play around with it, because there's plenty to learn (semantics, microformats, css practices etc.)
Hope this helps!
