Tablas en HTML

Agrupación de filas

HTML provee tres elementos que pueden ayudar a los autores a organizar la información presentada en una tabla. Éstos son: thead, para agrupar las filas que presentan infromación de encabezado; tfoot para contener a las filas que representan un pie o resumen; y tbody, para representar un bloque de filas que consiste en un cuerpo de datos.

La idea en este método de agrupación es muy directa, así que procedamos con el siguiente ejemplo. La tabla siguiente organiza información de cuentas bancarias para Anthony y Leone. Para este propósito, tiene un bloque de encabezado compuesto por dos filas de celdas de encabezado, un pie que resume la información en la forma de un balance, y un bloque de filas que conforma el cuerpo de la tabla.

<table class="egt">
  <thead>
    <tr>
      <th></th>
      <th colspan="2">Anthony</th>
      <th colspan="2">Lione</th>
    </tr>
    <tr>
      <th scope="col">Fecha</th>
      <th>Entrada</th>
      <th>Salida</th>
      <th>Entrada</th>
      <th>Salida</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>15/07</th>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$0</td>
      <td>$0</td>
    </tr>
    <tr>
      <th>28/07</th>
      <td>$0,00</td>
      <td>$100,00</td>
      <td>$100,00</td>
      <td>$0,00</td>
    </tr>
    <tr>
      <th>09/08</th>
      <td>$0,00</td>
      <td>$50,00</td>
      <td>$0,00</td>
      <td>$80,00</td>
    </tr>
    <tr>
      <th>22/08</th>
      <td>$40,00</td>
      <td>$0,00</td>
      <td>$0,00</td>
      <td>$110,00</td>
    </tr>
    <tr>
      <th>25/08</th>
      <td>$0,00</td>
      <td>$20,00</td>
      <td>$0,00</td>
      <td>$0,00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Balance</th>
      <td colspan="2">$20,00</td>
      <td colspan="2">$10,00</td>
    </tr>
  </tfoot>
</table>
Anthony Lione
Fecha Entrada Salida Entrada Salida
15/07 $200,00 $50,00 $0 $0
28/07 $0,00 $100,00 $100,00 $0,00
09/08 $0,00 $50,00 $0,00 $80,00
22/08 $40,00 $0,00 $0,00 $110,00
25/08 $0,00 $20,00 $0,00 $0,00
Balance $20,00 $10,00

Los cuerpos de las tablas tienen dos particularidades: primero, que puede haber más de un cuerpo en una misma tabla; y segundo, que el elemento tbody puede ser omitido cuando la tabla tiene solamente un cuerpo. De las tablas que encajan en el segundo caso se dice que tienen un cuerpo implícito.

Cuando una tabla tiene múltiples cuerpos, cada cuerpo debe agrupar filas que están temáticamente relacionadas. En el siguiente ejemplo, la misma tabla presentada anteriormente ha sido reestructurada para contener dos cuerpos, uno por cada mes. Estos grupos temáticos son meramente semánticos, pero les agregaremos algunos estilos solo para hacer que los grupos sean visibles.

Los autores deben evitar agrupar filas con fines estilísticos. Tales prácticas contituyen un mal uso de los elemento thead, tbody y tfoot.

<table class="egt">
  <thead>
    <tr>
      <th></th>
      <th colspan="2">Anthony</th>
      <th colspan="2">Lione</th>
    </tr>
    <tr>
      <th scope="col">Fecha</th>
      <th>Income</th>
      <th>Outcome</th>
      <th>Income</th>
      <th>Outcome</th>
    </tr>
  </thead>
  <tbody style="background: rgba(128, 255, 0, 0.3); border: 1px solid rgba(100, 200, 0, 0.3);">
    <tr>
      <th>15/07</th>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$0</td>
      <td>$0</td>
    </tr>
    <tr>
      <th>28/07</th>
      <td>$0,00</td>
      <td>$100,00</td>
      <td>$100,00</td>
      <td>$0,00</td>
    </tr>
  </tbody>
  <tbody style="background: rgba(255, 128, 0, 0.3); border: 1px solid rgba(200, 100, 0, 0.3);">
    <tr>
      <th>09/08</th>
      <td>$0,00</td>
      <td>$50,00</td>
      <td>$0,00</td>
      <td>$80,00</td>
    </tr>
    <tr>
      <th>22/08</th>
      <td>$40,00</td>
      <td>$0,00</td>
      <td>$0,00</td>
      <td>$110,00</td>
    </tr>
    <tr>
      <th>25/08</th>
      <td>$0,00</td>
      <td>$20,00</td>
      <td>$0,00</td>
      <td>$0,00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Balance</th>
      <td colspan="2">$20,00</td>
      <td colspan="2">$10,00</td>
    </tr>
  </tfoot>
</table>
Anthony Lione
Fecha Income Outcome Income Outcome
15/07 $200,00 $50,00 $0 $0
28/07 $0,00 $100,00 $100,00 $0,00
09/08 $0,00 $50,00 $0,00 $80,00
22/08 $40,00 $0,00 $0,00 $110,00
25/08 $0,00 $20,00 $0,00 $0,00
Balance $20,00 $10,00

Prev12345Próx