<th> for a column instead of row?

Question

Consider the following HTML:

<table>
    <tr>
        <td>Born</td>
        <td><time datetime="1986-11-05">5<sup>th</sup> November 1986</time></td>
    </tr>
    <tr>
        <td>Gender</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Sports</td>
        <td>Football<br />Tennis</td>
    </tr>
    <tr>
        <td>Teams</td>
        <td>Liverpool FC<br />Spain FC</td>
    </tr>
</table>

Is it possible to use <th> in reference to a column, rather than a row? I'd like the left column bold.

Answer 1

Yes, you can use <th> for cells in rows or columns.

<table>
    <tr>
        <th>Born</th>
        <td><time datetime="1986-11-05">5<sup>th</sup> November 1986</time></td>
    </tr>
    <tr>
        <th>Gender</th>
        <td>Male</td>
    </tr>
...

Answer 2

The spec clearly says that a th element can provide header information for a column or for a row (or group of columns or rows). The attribute scope=row can be used to explicitly say that the header cell is a row header.

Using th vs. td has a few implications. The functional implication is that user agents may treat th in a special way, giving the user access to data cells by corresponding header information. This applies mostly to speech-baser agents. For this to be meaningful, the th cell should really provide identifying information for the data row or data column. In this case, the condition is satisfied. So you could and should use th instead of td, quite independently of the desired rendering.

The other implications are that by default, th element content is rendered in bold face and horizontally centered. If this is not regarded as appropriate, you can easily override it in CSS (or even in HTML). In your case, if you want the content to be bold but left-aligned, use th { text-align: left; }. (Another, perhaps better, style is to right-align row headers: th { text-align: right; }. Centering may look odd.)