Salut à tous, ça fait un moment depuis que j'ai demandé quelque chose, c'est quelque chose qui a été me tracasse depuis un moment, la question est dans le titre:
Quelle est votre façon préférée de l'écriture de code HTML des tables qui ont des embases verticales?
Par vertical en-tête, je veux dire que le tableau a de l'en-tête (<th>) étiquette sur le côté gauche (en général)
1 en-tête de données de données de données
L'en-tête 2 données de données de données
L'en-tête 3 données de données de données
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 ce mode est que vous avez les en-têtes de droit (en fait, à gauche) à côté des données qu'il représente, ce que je n'aime pas, cependant, est que l' <thead>, <tbody> et <tfoot> tags manquants, et il n'y a aucun moyen de les inclure sans casser la nicelly placés ensemble des éléments qui me conduisent à 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 entièrement descriptif de la table html, les inconvénients sont que la représentation appropriée besoin d'un peu de CSS pour l' tbody et thead balises et que la relation entre les en-têtes et les données n'est pas très clair comme j'avais des doutes lors de la création de l'annotation.
Ainsi, les deux façons de rendre le tableau de la façon dont il devrait, ici un pitcure:
Avec les en-têtes sur le côté droit ou gauche si vous préférez, donc, des suggestions, des solutions de rechange, les problèmes de navigateur?
