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?
la source
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">.La première option ... Je pense que c'est la meilleure et la plus simple approche.
la source
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
la source
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.
la source
la source