Most common way of writing a HTML table with vertical headers?

What's your preferred way of writing HTML tables that have vertical headers?

By vertical header I mean that the table has the header (<th>) tag on the left side (generally)

Header 1 data data data
Header 2 data data data
Header 3 data data data

They look like this, so far I've come up with two options

First Option

<table id="vertical-1">
    <caption>First Way</caption>
    <tr>
        <th>Header 1</th>
        <td>data</td><td>data</td><td>data</td>
    </tr>
    <tr>
        <th>Header 2</th>
        <td>data</td><td>data</td><td>data</td>
    </tr>
    <tr>
        <th>Header 2</th>
        <td>data</td><td>data</td><td>data</td>
    </tr>
</table>

The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don't like however is that the <thead>, <tbody> and <tfoot> tags are missing, and there's no way to include them without breaking the nicelly placed together elements, which lead me to the second option.

Second Option

<style type="text/css">
    #vertical-2 thead,#vertical-2 tbody{
        display:inline-block;
    }
</style>
<table id="vertical-2">
    <caption>Second Way</caption>
    <thead>
        <tr>
            <th colspan="3">Header 1</th>
        </tr>
        <tr>
            <th colspan="3">Header 2</th>
        </tr>
        <