Самый распространенный способ написания таблицы HTML с вертикальными заголовками?

Привет всем, прошло много времени с тех пор, как я спрашивал что нибудь,это то, что меня беспокоило какое-то время, сам вопрос в заголовке:

Какой у вас предпочтительный способ написания HTML-таблиц с вертикальными заголовками?

Под вертикальным заголовком я подразумеваю, что таблица имеет заголовок ( ) тег слева (обычно)

заголовок 1 данные данные данные
заголовок 2 данные данные данные
заголовок 3 данные data data

Они выглядят так, пока я придумал два варианта

Первый вариант

   
    <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>
   

Основным преимуществом этого способа является то, что у вас есть заголовки справа (фактически слева) рядом с данными, которые он представляет, что мне не нравится, так это то, что теги , и отсутствуют, и нет возможности включить их, не нарушая аккуратно размещенных вместе элементов, что привело меня ко второму варианту.

Второй вариант

   
        <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>
   

Основным преимуществом здесь является то, что у вас есть полностью описательная html-таблица, недостатки - это правильное представление требует небольшого количества CSS для тегов tbody и thead и что связь между заголовками и данными не очень ясна, поскольку у меня были сомнения при создании разметки.

Итак, оба способа визуализируют таблицу так, как она должна, вот небольшая ошибка:

С заголовками слева или справа, если вы предпочитаете, так что какие-либо предложения, альтернативы, проблемы с браузером?