5

I wish to layout two dimensional data in a HTML table, an example

      Cow  Horse
  Big   1    3
Small   5    7

I can easily achieve this with the following markup.

<table>
    <tr><th></th><th>Cow</th><th>Horse</th></tr>
    <tr><th>Big</th><td>1</td><td>3</td></tr>
    <tr><th>Small</th><td>5</td><td>7</td></tr>
</table>

However, I've been wondering whether this is possible with tbody and thead tags?

I've tried this, but the data just appears below the headers, which is kind of what I expect, but don't want.

<table>
   <thead>
     <tr><th></th><th>Cow</th><th>Horse</th></tr>
     <tr><th>Big</th><th></th><th></th></tr>
     <tr><th>Small</th><th></th><th></th></tr>
   </thead>
   <tbody>
     <tr><td></td><td>1</td><td>3</td></tr>
     <tr><td></td><td>5</td><td>7</td></tr>
   </tbody>
</table>

Result

      Cow  Horse
  Big   
Small   
        1    3
        5    7

Is this possible, or can thead only be used for headers at the top or side, but not both simultaneously. I can't find any examples of this problem online, perhaps I'm searching for the wrong thing.

Community
  • 1
  • 1
Adam
  • 35,919
  • 9
  • 100
  • 137
  • IMO you'll get same answer of last link you posted. K.I.S.S. `` contains header **rows**, if you change that then it's not `` any more (at least in concept). `` inside `` isn't a visual trick: both works and define meaning (so it's friendly to any browser and screen reader). – Adriano Repetti Apr 12 '14 at 07:04

1 Answers1

4

If you wish to use thead and tbody elements, then the former should contain the header rows and the latter all the other rows:

<table>
  <thead>
    <tr><th></th><th>Cow</th><th>Horse</th></tr>
  </thead>
  <tbody>
    <tr><th>Big</th><td>1</td><td>3</td></tr>
    <tr><th>Small</th><td>5</td><td>7</td></tr>
  </tbody>
</table>
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390