Najpopularniejszy sposób pisania tabeli HTML z pionowymi nagłówkami?

Cześć, minęło trochę czasu odkąd o coś zapytałem, to jest coś, co mnie od jakiegoś czasu niepokoi, samo pytanie jest w tytule:

Jaki jest Twój preferowany sposób pisania tabel HTML z pionowymi nagłówkami?

Przez nagłówek pionowy rozumiem, że tabela ma nagłówek (<th> tag ) po lewej stronie (ogólnie)

Nagłówek 1 Dane Dane Dane
nagłówka 2 Dane Dane Dane
nagłówka 3 Dane Dane Dane

Wyglądają tak, do tej pory wymyśliłem dwie opcje

Pierwsza opcja

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

Główną zaletą tego sposobu jest to, że masz prawo nagłówki (faktycznie lewej) obok danych, które reprezentuje, co mi się nie podoba, że jednak jest <thead>,<tbody> i <tfoot>znaczniki brakuje, i nie ma sposobu, aby włączyć je bez zerwania ładnie ułożone razem elementy, które doprowadziły mnie do drugiej opcji.

Druga opcja

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

Główną zaletą jest to, że masz w pełni opisowego tabeli html, wady są, że właściwa reprezentacja potrzebuje trochę CSS dla tbodyi theadznaczników i że relacja między nagłówkami i danych nie jest jasne, jak miałem wątpliwości przy tworzeniu znaczniki.

Tak więc oba sposoby renderują tabelę tak, jak powinna, tutaj kwestia:

Z nagłówkami po lewej lub prawej stronie, jeśli wolisz, więc masz jakieś sugestie, alternatywy, problemy z przeglądarką?

Po pierwsze, druga opcja nie jest do końca poprawnym kodem HTML w tym sensie, że wszystkie wiersze (TR) w tabeli powinny zawierać równą liczbę kolumn (TD). Twój nagłówek ma 1, podczas gdy treść ma 3. Powinieneś użyć atrybutu colspan, aby to naprawić.

Odniesienie: „Sekcje THEAD, TFOOT i TBODY muszą zawierać taką samą liczbę kolumn”. - Ostatni akapit sekcji 11.2.3 .

Mając to na uwadze , pierwsza opcja jest moim zdaniem lepszym podejściem, ponieważ jest czytelna niezależnie od tego, czy mam włączony CSS, czy nie. Niektóre przeglądarki (lub roboty wyszukiwarek) nie wykonują CSS i jako takie sprawią, że Twoje dane nie będą miały sensu, ponieważ nagłówek będzie wtedy reprezentował kolumny zamiast wierszy.

Pierwsza opcja ... myślę, że jest to lepsze i prostsze podejście.

Szczerze, opcja 1. Proponuję spojrzeć na ten przykład z W3.org (link poniżej). Myślę, że ta metoda jest najlepsza, ponieważ w ten sposób Twoje nagłówki będą również interpretowane bezpośrednio na czytnikach ekranu.

https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only

Jeśli chcesz pokazać element sterujący powiązany z danymi (jak repeater ASP) w tabeli, pierwsza opcja nie będzie możliwa. Drugiej opcji można użyć w następujący sposób.

<asp:Repeater ID="hours" runat="server">
    <HeaderTemplate>
    <table id="vertical-table">
        <thead>
            <tr><th colspan="0">hours:</th></tr>
            <tr><th colspan="1">Monday</th></tr>
            <tr><th colspan="1">Tuesday</th></tr>
            <tr><th colspan="1">Wednesday</th></tr>
            <tr><th colspan="1">Thursday</th></tr>
            <tr><th colspan="1">Friday</th></tr>
            <tr><th colspan="1">Saturday</th></tr>
            <tr><th colspan="1">Sunday</th></tr>
        </thead>
        <tbody>
    </HeaderTemplate>
    <ItemTemplate>
            <tr><td><%# Container.DataItem %></td></tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
    </table>
    </FooterTemplate>
</asp:Repeater>