How do I put the table headers above the table cells if they are in the same table row?

Question

I have a table like this:

<table>
  <tr>
    <th>Header</th>
    <td>Content</td>
  </tr>
  <tr>
    <th>Header</th>
    <td>Content</td>
  </tr>
</table>

How can I make the header actually float above the content cell without putting everything on a separate row? For instance:

Header
Content

Header
Content

Answer 1

Try this in your css:

td,th{display:block;}

Answer 2

You don't give a lot of information, but you might be better off using a Definition List, rather than a mangled table, depending on the semantics:

<dl>
    <dt>Header</dt>
    <dd>Content</dd>

    <dt>Header</dt>
    <dd>Content</dd>
</dl>

This will get you output that looks something like this:

Header
   Content

Header
   Content

It's then trivial to style via css, as the Headers are dt's and the Contents are dd's:

dt { font-weight: bold; font-size: 200%; }
dd { color: #999; }

See also:

• http://www.maxdesign.com.au/articles/definition/
• http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
• http://www.w3schools.com/tags/tag_dl.asp