Наиболее распространенный способ написания таблицы 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> теги отсутствуют, и нет никакого способа включить их, не нарушая nicelly размещены вместе элементы, которые приводят меня ко второму варианту.

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

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

Итак, в обоих случаях визуализируйте таблицу так, как она должна, здесь pitcure:

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