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.
On forms
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.
On tables
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.
A table’s caption
basically acts as a heading for the table.
thead
, tbody
, and 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 thead
or tfoot
element is used, one (or more) tbody
element(s) must be used. Only one thead
and tfoot
element can be used in a table, but there is no restriction on tbody
elements. MDN adds: The tfoot
must appear after any caption
, colgroup
, thead
, tbody
, or 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 row
or col
to define whether they are row or column headings. They can also be given a value of rowgroup
or colgroup
if they relate to more than one row or column.
While the tr
element makes it possible to style whole rows, it is more difficult to apply a style to an entire column. The colgroup
and col
elements may solve the problem, but they are not (are they?) supported by all browsers.
References
1. MDN on input
2. Andy Budd, CSS Mastery: Advanced web standards solutions (2006)
Remaining references are linked to in the text.