On forms and tables
Disclaimer: This page only exists because my grey cells are full. Whenever something new comes up, my brain has to throw out old memories to free up some space. And information on HTML forms and tables seems to have drained off at some point. I simply cannot remember it all. Consequently, I return to this collection of bits and pieces whenever the need arises. So there.
In the back of my mind
The information below has been shamelessly copied from a plethora of sources. Well, a few, at least. And before its gone: The quotes may dissonant slightly with their sources. A readability thing, really.
Do not use the
placeholder attribute instead of
label; its purposes are different.
label describes the role of the
form (i.e. it indicates what kind of information is expected), and the
placeholder is a hint about the format that the content should take. There are cases in which the
placeholder is never displayed to the user, so the form must be understandable without it.
Up front: Many table elements are not required but will add useful information to people with screenreaders.
Applied to the table tag, the
summary attribute was earlier used to describe the content of a table. Now, however, it is deprecated. Use e.g. the
caption element instead.
caption basically acts as a heading for the table.
tfoot break a table into logical sections. For instance, all the column headings can be placed inside the
thead element, providing a means of separately styling that particular area. If a
tfoot element is used, one (or more)
tbody element(s) must be used. Only one
tfoot element can be used in a table, but there is no restriction on
tbody elements. MDN adds: The
tfoot must appear after any
tr element. This is the requirement as of HTML5.
Row and column headings should be marked up as
th rather than
td, although if something is both a heading and data it should be left as a
td. Table headings can be given a
scope attribute of
col to define whether they are row or column headings. They can also be given a value of
colgroup if they relate to more than one row or column.
tr element makes it possible to style whole rows, it is more difficult to apply a style to an entire column. The
col elements may solve the problem, but they are not (are they?) supported by all browsers.
1. MDN on
2. Andy Budd, CSS Mastery: Advanced web standards solutions (2006)
Remaining references are linked to in the text.