espacio - tablas en html5

Divide las filas de la tabla HTML en secciones etiquetadas

Question

¿Hay una forma válida de dividir las filas de una tabla en secciones, con una etiqueta que identifique esa sección?

Por ejemplo, algo como el código a continuación, pero con un encabezado o título al inicio de cada TBODY (Parece que el encabezado / títulos solo se permiten en la parte superior de una tabla)

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

Answer 1

En general, las personas usan una fila adicional y usan colspan para abarcar todas las columnas.

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

Answer 2

En respuesta a la pregunta de Alexander Suraphel sobre la respuesta de Martin, sí, el OP quería tener una etiqueta de identificación. Aquí hay una forma de hacerlo, combinando algunos de los aspectos de varias respuestas. (Tenga en cuenta que he suministrado mis propias etiquetas, ya que el OP no especificó qué etiquetas habrían utilizado).

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

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

Answer 3

Mi forma preferida de hacer algo así es usar un <TH> que se extienda ( colspan ) en una fila completa.

Answer 4

Use colspan y, por alguna razón, si no está seguro de cuántas columnas necesita fusionar / expandir (columnas generadas dinámicamente), use:

<tr><td colspan = "100%">...</td></tr>

Answer 5

La especificación de HTML5 no está diciendo 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>