2012-02-16 5 views
20

¿Existe una forma válida de dividir las filas de una tabla en secciones, con una etiqueta que identifique esa sección?Divida las filas de la tabla HTML en las secciones etiquetadas

Por ejemplo, algo así como el código de abajo, pero con una cabecera o un título al comienzo de cada TBODY (Parece encabezado/pie de foto sólo se les permite en la parte superior de una mesa)

<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> 

Respuesta

4

Mi forma preferida de hacer algo por el estilo es utilizar un <TH> que se extiende (colspan) a través de una fila completa.

2

lo general la gente use una fila adicional y use colspan para abarcar todas las columnas.

En su caso: <tr><td colspan = "7">...</td></tr>

57

HTML5 specification no dice que solo puede haber una sección <TBODY>. Tu código está bien. Un ejemplo más:

<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> 
+3

esto es una respuesta mejor que la que actualmente está marcado como una respuesta - si el abarca varias columnas o no –

+0

... más de una '' - nunca consideró esta. gracias. esta definitivamente debe ser la respuesta marcada. – cheshireoctopus

+1

OP dijo "con una etiqueta que identifica esa sección". Jugué tu código y no hay indicación visual de que las últimas dos filas estén juntas. ¿Me estoy perdiendo de algo? –

Cuestiones relacionadas