Elemento tbody

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento tbody contiene a un bloque de filas (tr) que representaa a la sección del cuerpo de una tabla (table). Este elemento puede ser útil para especificar qué filas proveen información de contenido en la tabla, en contraste con aquellas que son parte del encabezado (header) o el pie (footer).

Pueden declararse múltiples cuerpos en una sola tabla, como una forma de separar temáticamente las filas de contenido.

El elemento tbody debe ser declarado luego de cualquier otro elemento de la tabla, con la excepción de tfoot.

En versiones previas del estándar, el elemento tbody tenía varios atributos de presentación que han sido eliminados en HTML5. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplos

Nuestro primer ejemplo consiste en una tabla (table) con un solo tbody que contiene a todas las celdas de datos. Asimismo, declararemos una sección de encabezado (header).

<table class="egt">
  <thead>
    <tr>
      <th>Cliente</th>
      <th>Operación</th>
      <th>Monto</th>
      <th>Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jhon Doe</td>
      <td>Depósito</td>
      <td>$2,500.00</td>
      <td>$2,500.00</td>
    </tr>
    <tr>
      <td>Mark Finn</td>
      <td>Depósito</td>
      <td>$5,000.00</td>
      <td>$5,000.00</td>
    </tr>
    <tr>
      <td>Sam Smith</td>
      <td>Depósito</td>
      <td>$3,000.00</td>
      <td>$3,000.00</td>
    </tr>
  </tbody>
</table>
Cliente Operación Monto Balance
Jhon Doe Depósito $2,500.00 $2,500.00
Mark Finn Depósito $5,000.00 $5,000.00
Sam Smith Depósito $3,000.00 $3,000.00

En el siguiente ejemplo crearemos una tabla con sus filas temáticamente organizadas en tres cuerpos, cada uno para un cliente distinto.

<table class="egt">
  <thead>
    <tr>
      <th>Cliente</th>
      <th>Operación</th>
      <th>Monto</th>
      <th>Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jhon Doe</td>
      <td>Depósito</td>
      <td>$2,500.00</td>
      <td>$2,500.00</td>
    </tr>
    <tr>
      <td>Jhon Doe</td>
      <td>Extracción</td>
      <td>-$1,000.00</td>
      <td>$1,500.00</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Mark Finn</td>
      <td>Depósito</td>
      <td>$5,000.00</td>
      <td>$6,500.00</td>
    </tr>
    <tr>
      <td>Mark Finn</td>
      <td>Extracción</td>
      <td>-$1,000.00</td>
      <td>$5,500.00</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Sam Smith</td>
      <td>Depósito</td>
      <td>$3,000.00</td>
      <td>$8,500.00</td>
    </tr>
    <tr>
      <td>Sam Smith</td>
      <td>Extracción</td>
      <td>-$2,500.00</td>
      <td>$6,000.00</td>
    </tr>
  </tbody>
</table>
Cliente Operación Monto Balance
Jhon Doe Depósito $2,500.00 $2,500.00
Jhon Doe Extracción -$1,000.00 $1,500.00
Mark Finn Depósito $5,000.00 $6,500.00
Mark Finn Extracción -$1,000.00 $5,500.00
Sam Smith Depósito $3,000.00 $8,500.00
Sam Smith Extracción -$2,500.00 $6,000.00

En el ejemplo anterior no puedes ver la diferencia entre un cuerpo y los otros. Sin embargo, las filas en cada tbody están igualmente siendo agrupadas en el código. Para reflejar este agrupamiento cuando el documento es representado, los autores pueden usar hojas de estilo para proveer bordes o cambiar el color de fondo de los cuerpos.

Atributos

Atributos específicos

align

La alineación horizontal del texto en todas las celdas afectadas. Existen cinco valores posibles (insensibles a mayúsculas/minúsculas):

  • left: el texto se alinea a la margen izquierda. Este es el valor predeterminado para celdas de datos (td).
  • center: el texto es centrado. Este es el valor predeterminado para celdas de encabezado (th).
  • right: el texto se alinea a la margen derecha.
  • justify: el texto es justificado o alineado a ambas márgenes.
  • char: el texto se alinea a un carácter específico. Se utiliza en conjunto con el atributo char.

Este atributo se ha vuelto obsoleto en HTML5 y, por lo tanto, su uso ya no es válido. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<tbody align="center">

char

Un carácter que actuará como eje para la alineación del texto. Está pensado para trabajar junto con el atributo align cuando presenta el valor "char". En otras situaciones será completamente ignorado.

Este atributo se ha vuelto obsoleto en HTML5 y su uso es consecuentemente inválido. Se aconseja a los autores reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<tbody align="char" char="c">

charoff

Un desplazamiento, desde la primera aparición del carácter de alineación (especificado en el atributo char) y en la dirección del texto. El carácter resultante de este cálculo será el eje para la alineación del texto.

Para que este atributo sea considerado, el valor del atributo align debe ser "char" y el atributo char debe estar presente.

Este atributo es considerado obsoleto por HTML5 y su uso ya no es recomendado. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<tbody align="char" char="t" charoff="7">

valign

La alineación vertical del texto en todas las celdas afectadas. Existen cuatro valores posibles (insensibles a mayúsculas/minúsculas):

  • top: el texto se alinea a la margen superior.
  • middle: el texto es centrado verticalmente.
  • bottom: el texto se alinea a la margen inferior.
  • baseline: todas las celdas en una fila con esta misma alineación deberían tener su primera línea de texto en una línea base común.

Este atributo es obsoleto de acuerdo con el estándar HTML5 y, por lo tanto, inválido. Se aconseja a los autores evitar su uso y reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<tbody valign="top">

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.