Anne van Kesteren

Tables in HTML

Expressing data in tables can be quite useful. For instance, see my comparison of sXBL and XBL 2.0 or my Tour du Mont Blanc overview. Such data expressed in a table consists of a set of header and data cells. The issue is how to associate data cells with header cells. For typical tables and a typical data cell you just look upwards and to the left for header cells (ignoring RTL issues for the moment, if there are any that is), but things can get slightly more complicated. For these cases HTML4 provides a scope attribute and in case all else fails a headers attribute. The former is based on the structure of the table and the latter lets you directly link a data cell to several header cells using ID values. When writing tables it would be far more convenient however if you didn’t need to include these attributes (much like you can omit </td>, </tr>, <tbody> et cetera).

Omitting these attributes is also likely what the majority of authors will do, when they are not busy abusing table for layout purposes, so having good algorithms in place to determine header cells has some advantages. James Graham wrote a table inspector tool that tells you which headers are associated with which data cells for a given algorithm (HTML4, HTML5 and an experimental algorithm). Actually, thanks to Ben Millard there is a fourth algorithm called "smart colspan" which would make my usage of scope in the Tour du Mont Blanc table superfluous. Based on the fact that the header spans the entire first row of a rowgroup it implicitly becomes the rowgroup header according to this algorithm as I understand it. The biggest problem moving forward is categorizing all the use cases and making sure it works ok everywhere. We don’t want to optimize the wrong things. (It should be noted that Ben Millard is probably on top of that with his Collections of Interesting Data Tables.)