La manière la plus courante d'écrire un tableau HTML avec des en-têtes verticaux?

Salut à tous cela fait un moment que je n'ai pas demandé quelque chose, c'est quelque chose qui me dérange depuis un moment, la question elle-même est dans le titre:

Quelle est votre façon préférée d'écrire des tableaux HTML avec des en-têtes verticaux?

Par en-tête vertical, je veux dire que le tableau a la <th>balise header ( ) sur le côté gauche (généralement)

En-tête 1 données données données en-
tête 2 données données données en-
tête 3 données données données

Ils ressemblent à ça, jusqu'à présent, j'ai proposé deux options

Première 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>
   

Le principal avantage de cette méthode est que vous avez les en-têtes à droite (en fait à gauche) à côté des données qu'il représente, ce que je n'aime pas cependant, c'est que les balises <thead>, <tbody>et <tfoot>sont manquantes, et il n'y a aucun moyen de les inclure sans casser le joliment placé ensemble des éléments, ce qui m'amène à la deuxième option.

Deuxième 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>
   

Le principal avantage ici est que vous avez une table html descriptif complet, les inconvénients sont que la représentation appropriée a besoin d' un peu de CSS pour les tbodyet theadbalises et que la relation entre les en- têtes et les données ne sont pas très claires comme je l' avais mes doutes lors de la création le balisage.

Donc, les deux manières rendent la table comme elle devrait, ici un pitcure:

Avec les en-têtes à gauche ou à droite si vous le préférez, alors des suggestions, des alternatives, des problèmes de navigateur?

Tout d'abord, votre deuxième option n'est pas tout à fait du HTML valide dans le sens où toutes les lignes (TR) d'une table doivent contenir un nombre égal de colonnes (TD). Votre en-tête a 1 tandis que le corps en a 3. Vous devez utiliser l'attribut colspan pour résoudre ce problème.

Référence: "Les sections THEAD, TFOOT et TBODY doivent contenir le même nombre de colonnes." - Dernier paragraphe de la section 11.2.3 .

Cela étant dit , la première option est à mon avis la meilleure approche car elle est lisible, que le CSS soit activé ou non. Certains navigateurs (ou robots d'exploration des moteurs de recherche) ne font pas de CSS et en tant que tel, vos données n'auront aucun sens car l'en-tête représentera alors des colonnes au lieu de lignes.

La première option ... Je pense que c'est la meilleure et la plus simple approche.

Honnêtement, option 1. Je vous suggère de regarder cet exemple de W3.org (lien ci-dessous). Je pense que cette méthode est la meilleure, car de cette façon vos titres seront également interprétés directement sur les lecteurs d'écran.

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

Si vous souhaitez afficher un élément de contrôle lié aux données (comme un répéteur asp) dans votre table, la première option ne sera pas possible. La deuxième option peut être utilisée comme suit.

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