Is this a table? [duplicate] - html

Question

This question already has answers here:
Best practice for making web forms
(6 answers)
Closed 9 years ago.
A classical piece of web development mantra is: "Only use tables for tabular data". This has its roots in the elder days, when tables were abused for every possible layout task imaginable.
While I too hold to this rule whenever possible, there are now and then layout tasks which I just cannot solve without a table - or tasks that straddle on the boundary between "tabular data" and "non-tabular data". This is one of them.
The situation is a totally classical one:
Name: […]
Surname: […]
Age: […]
Job: […]
The […] are meant to be textboxes. Is this tabular data? Should I use a table for arranging these labels and textboxes or some unholy mashup of <div>s and <span>s? The table would make it easier to provide the proper vertical alignments and help lining up labels of unknown widths. But would it be "proper", or just another "hack that floats my boat"?
And what if we look at it like this?
Field | Value
---------------
Name: […]
Surname: […]
Age: […]
Job: […]

Answer 1

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!

Answer 2

Tabular-data describes a collective form of definite information. A form is not "tabular-data", it is interactive and not even really information for the visitor of the website, rather, it is information that (usually) gets sent, therefore it's fair to consider it incorrect to view changeable forms as "tabular-data." (Then again, it really depends on the usage, but I'm assuming you mean forms as in the practical and semantic purpose).
As far as a practice for styling forms, I usually tend to use divs and ul li combinations, as a form element is in fact a list of information. It even comes with (very limited, but still) some formatting options such as fieldset, legend, etc. I would consider looking into those as well.
Then there's the other side of the force (not necessarily the dark side, just, the alternative side) where semantics, while they matter, shouldn't be turned into a religious discipline. If tables work for forms, then so be it. You cannot apply a single set of semantic rules to every single situation. I've found myself saying this a lot, lately, but I'll say it again, every situation is different.

Answer 3

Well, using table or not depends, but if you are going to design a form, using table element is not the only thing which can design it perfectly, if you want, simply use an ul element with label and see how flawlessly you design the same thing without table or div
Demo
ul {
margin: 50px;
}
ul li {
margin-bottom: 10px;
font-family: Arial;
}
ul li label {
display: inline-block;
width: 100px;
}
Infact you can use float on the li by assigning a fixed width to your ul element, this will result in a two column form, increase the width and make it three, so you don't need table here.

Answer 4

The example you provided does not require a table... And not does resort into an "unholy mashup" of divs.
<div>
<label for="x"></label>
<div class="value">
<input id="x" type="text">
</div>
</div>
<!-- rinse, repeat -->
CSS:
label {
min-width: 8em; /* or whatever makes sense */
display: inline-block;
text-align: right;
}
.value {
display: inline-block;
}

Answer 5

While I too hold to this rule whenever possible, there are now and
then layout tasks which I just cannot solve without a table
Table elements have some pretty cool layout properties, and yes, there are times that those properties are needed. In these cases, CSS has the ability to set elements to display like various table elements, while keeping your code semantically correct as you would not actually using tables elements.
This includes properties such as display: table; display: table-cell;, display: table-row;
In terms of your example.. Tabular data is used to display information to a user.. placing inputs or textareas inside of a table would not be semantically correct. However, if you were to have that same format, with pre-existing data just being displayed, I would say that a table would be acceptable.
That format layout can be made with css fairly easily, using anything from floats, display: inline-block; or the table display properties mentioned above.