html - Table vertical header?

Question

How can I make the table header appear on the left side of the table as a column instead on the top as a row? I have this markup:

<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

Answer 1

Just use <th> as the first element in the row. Then add the scope attribute, which has no visual impact, but you could use it e.g. in CSS.

<table>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>b</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>d</td>
    </tr>
  </tbody>
</table>

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