web-dev-qa-db-fra.com

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

Bonjour tout le monde, ça fait longtemps 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 manière préférée d'écrire des tableaux HTML avec des en-têtes verticaux?

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

En-tête 1 data data data
En-tête 2 data data data
Header 3 data data data

Ils ressemblent à ceci, jusqu'à présent, je suis venu avec 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’elles représentent. Ce que je n’aime pas, c’est que les balises <thead>, <tbody> et <tfoot> sont manquantes et qu’il n’ya aucun moyen de les inclure. sans casser les éléments joliment placés, ce qui me conduit à 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 un tableau html entièrement descriptif, les inconvénients étant que la représentation correcte nécessite un peu de CSS pour les balises tbody et thead et que la relation entre les en-têtes et les données n’est pas très claire car j’avais des doutes. lors de la création du balisage.

Donc, les deux sens rendent la table comme il se doit, ici une pitcure:

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

htmlcssdatatablesemantic-markup
82
Tristian

Tout d’abord, votre deuxième option n’est pas un code HTML valide en ce sens que toutes les lignes (TR) d’un tableau doivent contenir un nombre égal de colonnes (TD). Votre en-tête en contient 1 et le corps en 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 la meilleure approche à mon avis car elle est lisible, que CSS soit activé ou non. Certains navigateurs (ou robots d'exploration de moteurs de recherche) ne font pas de CSS et, en tant que tel, vos données n'auront aucun sens, l'en-tête représentant alors des colonnes plutôt que des lignes.

41
Francois Deschenes

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

5
Philemon philip Kunjumon

Honnêtement, l'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 ainsi 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

1
Dmitri Chebotarev

Si vous souhaitez afficher un élément de contrôle lié aux données (comme asp repeater) 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>
0
Barry Guvenkaya