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

Hi all it's been a while since I've asked something, this is something that has been bothering me for a while, the question itself is in the title:

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>
                <tr>
                    <th colspan="3">Header 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>row 1</td>
                    <td>row 1</td>
                    <td>row 1</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">Footer</td>
                </tr>
            </tfoot>
        </table>
   

The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the tbody and thead tags and that the relation between the headers and data isn't very clear as I had my doubts when creating the markup.

So, both ways render the table how it should, here a pitcure:

With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?