Question

I have a table of information, but instead of the typical table where the headings are across the top:

Foo | Fnord | Fizzy | Buzz
----|-------|-------|-----------------
  42| Yes   | No    | Mr. mann
  13| Yes   | Flarg | Colonel Mustard
   1| Plum  | No    | Ms. Scarlet

I would like to put it down the side:

Foo   | 42       | 13              | 1
Fnord | Yes      | Yes             | Plum
Fizzy | No       | Flarg           | No
Buzz  | Mr. Mann | Colonel Mustard | Ms. Scarlet

Evidently it's allowed by doing something like

<table>
    <tr><th>Heading 1</th><td>Data 1</td></tr>
    <tr><th>Heading 2</th><td>Data 2</td></tr>
</table>

So I plan on doing it anyway, but I did want to check if this had any sort of break in semantics or anything else. Is this the correct way to do what I want?

Was it helpful?

Solution

There is nothing wrong about doing this. To make it more accessible, add the scope="row" attribute on the TH tags which tells assistive technologies that the header is infact for the row (not the column).

See example 1 here: http://www.w3.org/TR/WCAG20-TECHS/H63

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top