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

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

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

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

Данные данных данных заголовка 1
Данные заголовка 2 данных

Данные заголовка 3 данных

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

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

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

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

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

   
        <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 и что связь между заголовками и данными не является очень ясный, поскольку у меня возникли сомнения при создании разметки.

---

Таким образом, оба способа отображают таблицу, как это должно быть, здесь ядро:

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