Geek asks and answers

Is semantically suitable for a column header in HTML?

I have a table of information, but instead of a typical table, where the headers are on 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 aside:

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

Obviously, this allowed you to do 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 to do this anyway, but I really wanted to check if there was such a gap in semantics or something else. Is this the right way to do what I want?

+3
source share
1 answer

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

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

+7

More articles:


All Articles