Diviser HTML de lignes de table dans les articles étiquetés

Est-il un moyen valable de diviser une table de lignes dans les sections, avec une étiquette permettant d'identifier cette section?

Par exemple, quelque chose comme le code ci-dessous, mais avec un en-tête ou de la légende au début de chaque TBODY (qui Ressemble à une en-tête/sous-titres sont uniquement autorisés dans le haut de tableau)

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH>  <TH>Manager</TH> </TR>
</THEAD>
<TBODY>
<TR> <TD>Monday</TD>    <TD>09/11/2000</TD> <TD>Kelsey</TD>  </TR>
<TR> <TD>Tuesday</TD>   <TD>09/12/2000</TD> <TD>Lindsey</TD> </TR>
<TR> <TD>Wednesday</TD> <TD>09/13/2000</TD> <TD>Randy</TD>   </TR>
<TR> <TD>Thursday</TD>  <TD>09/14/2000</TD> <TD>Susan</TD>   </TR>
<TR> <TD>Friday</TD>    <TD>09/15/2000</TD> <TD>Randy</TD>   </TR>
<TR> <TD>Saturday</TD>  <TD>09/16/2000</TD> <TD>Lindsey</TD> </TR>
<TR> <TD>Sunday</TD>    <TD>09/17/2000</TD> <TD>Susan</TD>   </TR>
</TBODY>
<TBODY>
<TR> <TD>Monday</TD>    <TD>09/18/2000</TD> <TD>Melody</TD>     </TR>
<TR> <TD>Tuesday</TD>   <TD>09/19/2000</TD> <TD>Christiane</TD> </TR>
<TR> <TD>Wednesday</TD> <TD>09/20/2000</TD> <TD>Symphony</TD>   </TR>
<TR> <TD>Thursday</TD>  <TD>09/21/2000</TD> <TD>Starflower</TD> </TR>
<TR> <TD>Friday</TD>    <TD>09/22/2000</TD> <TD>Miko</TD>       </TR>
<TR> <TD>Saturday</TD>  <TD>09/23/2000</TD> <TD>Cleo</TD>       </TR>
<TR> <TD>Sunday</TD>    <TD>09/24/2000</TD> <TD>Alyx</TD>       </TR>
</TBODY>
<TBODY>
<TR> <TD>Monday</TD>    <TD>09/25/2000</TD> <TD>Dancing Star</TD> </TR>
<TR> <TD>Tuesday</TD>   <TD>09/26/2000</TD> <TD>Dawn</TD>         </TR>
<TR> <TD>Wednesday</TD> <TD>09/27/2000</TD> <TD>Josh</TD>         </TR>
<TR> <TD>Thursday</TD>  <TD>09/28/2000</TD> <TD>Ryan</TD>         </TR>
<TR> <TD>Friday</TD>    <TD>09/29/2000</TD> <TD>Mary Kay</TD>     </TR>
<TR> <TD>Saturday</TD>  <TD>09/30/2000</TD> <TD>Hallie</TD>       </TR>
<TR> <TD>Sunday</TD>    <TD>10/01/2000</TD> <TD>Paul</TD>         </TR>
</TBODY>
</TABLE>

InformationsquelleAutor Yarin | 2012-02-16

html html-table

8

Ma façon préférée de faire quelque chose comme ça est d'utiliser un <TH> qui s'étend (colspan) à travers une rangée complète.

InformationsquelleAutor Niet the Dark Absol
75

Spécification HTML5 n'est pas en disant: il peut être un seul <TBODY> section. Votre code est OK. Un exemple de plus:

HTML:
```
<table>
<thead>
<tr>
<th>Fruits</th>
<th>Vitamin A</th>
<th>Vitamin C</th>
</tr>
</thead>		
<tbody id="section1">
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
</tbody>
<tbody id="section2">
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
<tr>
<th>Bananas</th>
<td>76 ui</td>
<td>10.3 mg</td>
</tr>
</tbody>
</table>
```
- c'est une meilleure réponse que celle qui est actuellement marquée comme une réponse est de savoir si ou de ne pas le <th> s'étend sur plusieurs colonnes ou pas
- ...plus d'un <tbody> - jamais considéré cela. je vous remercie. cela devrait certainement être marqués réponse.
- L'OP a déclaré: "avec une étiquette permettant d'identifier la section". J'ai bricolé vous code et il n'y a aucune indication visuelle que les deux dernières lignes appartiennent ensemble. Ai-je raté quelque chose?
- Vous pouvez définir le style de votre tbody éléments avec CSS ou vous pouvez également ajouter un th élément au début de chaque tbody et de style que de façon appropriée.
- Concernant les étiquettes, ce que l'accessibilité?
InformationsquelleAutor Martin

En réponse à Alexandre Suraphel la question sur Martin pour la réponse, oui, l'OP voulait avoir une étiquette d'identification. Voici une manière de, combinant quelques-uns des aspects de plusieurs réponses, pour le faire. (Notez que j'ai fourni mes propres étiquettes, comme l'OP n'a pas spécifier ce que les étiquettes qu'ils auraient utilisé.)

CSS:

td {
border-left: 0;
border-top: 0;
border-bottom: 0;
border-right: 0;
}
table {
border: none;
border-collapse: collapse;
}
.grouplabel {
background: blue;
color: yellow;
border: 1px solid blue;
border-radius: 5px;
}

HTML:

<table>
<thead>
<tr>
<th>Fruits</th>
<th>Vitamin A</th>
<th>Vitamin C</th>
</tr>
</thead>
<tbody id="section1">
<tr class="grouplabel"><th colspan="3">Local</th></tr>
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
</tbody>
<tbody id="section2">
<tr class="grouplabel"><th colspan="3">Imported</th></tr>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
<tr>
<th>Bananas</th>
<td>76 ui</td>
<td>10.3 mg</td>
</tr>
</tbody>
</table>

InformationsquelleAutor hlongmore

2

Généralement les gens utilisent une ligne supplémentaire et l'utilisation colspan à s'étendre sur toutes les colonnes.

Dans votre cas: <tr><td colspan = "7">...</td></tr>

InformationsquelleAutor Diodeus - James MacFarlane
2

Utilisation colspan et pour quelque raison que si vous n'êtes pas sûr du nombre de colonnes que vous avez besoin de fusionner/span (généré dynamiquement colonnes) puis utiliser:
```
<tr><td colspan = "100%">...</td></tr>
```
InformationsquelleAutor Syed

Vous devez vous connecter pour publier un commentaire.