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


95

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:

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

Réponses:


45

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.


Est-il vraiment nécessaire pour lui de régler le premier problème que vous avez mentionné? Puisque si vous n'ajoutez qu'une seule cellule, cela prend automatiquement le premier espace et le reste est ignoré?
LouwHopley

salut merci d'avoir mis en évidence le balisage invalide, je vais le corriger.
Tristian

@Nideo - J'ai ajouté une référence de la documentation HTML4 dans mon article qui indique clairement que THEAD, TFOOT et TBODY doivent contenir le même nombre de colonnes.
Francois Deschenes

@Triztian - Encore une chose. Le TFOOT doit être directement sous le THEAD (et avant les TBODY). Encore une fois, ceci est couvert dans la section 11.2.3 de la spécification HTML.
Francois Deschenes

1
@prodigitalson - L' scopeattribut ne ferait pas vraiment une grande différence dans ce cas. Si vous lisez à quoi ça sert, vous comprendrez. Cela signifie essentiellement que les colonnes that est l'en-tête de la ligne ou de la colonne qu'elle contient. Le problème est que son utilisation n'a pas de sens à moins de remplacer le <th>par un <td scope="row">.
Francois Deschenes



0

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>

-3

div.vertical {
  margin-left: -85px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  /* Safari/Chrome */
  -moz-transform: rotate(-90deg);
  /* Firefox */
  -o-transform: rotate(-90deg);
  /* Opera */
  -ms-transform: rotate(-90deg);
  /* IE 9 */
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: left;
}
<table>
  <thead>
    <tr>
      <th class="vertical">
        <div class="vertical">Really long and complex title 1</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 2</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 3</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example</td>
      <td>a, b, c</td>
      <td>1, 2, 3</td>
    </tr>
  </tbody>
</table>


3
Veuillez ajouter une explication sur la manière dont votre réponse aborde le problème identifié dans la question.
blurfus le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.