Elemento table

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 table representa una tabla. Éstas permiten a los autores representar información tabulada en un documento. En lo que respecta al código, una tabla consiste básicamente de un grupo de filas que contiene, cada una, a un grupo de celdas.

Un elemento table actúa únicamente como el contenedor donde otros elementos pueden ser declarados. Estos elementos son:

  • caption: Provee un título para la tabla.
  • colgroup: agrupa columnas temáticamente.
  • col: aplica atributos comunes y estilos a una o más columnas. Sólo puede ser declarado como hijo de colgroup.
  • tbody: representa a un cuerpo de la tabla.
  • thead: representa la sección de encabezado de la tabla.
  • tfoot: representa la sección de pie de la tabla.
  • tr: representa una fila. Puede ser declarado como hijo de tbody, thead, tfoot o table.
  • td: representa a una celda regular. Sólo puede ser declarado como hijo de tr.
  • th: representa a una celda de encabezado. Sólo puede ser declarado como hijo de tr.

Cuando las tablas son complejas o difíciles de comprender, los autores deberían proveer indicaciones con el fin de ayudar a los usuarios en la interpretación de los datos. Esta información puede ser presentada en el texto circundante, en el elemento caption o en el elemento figcaption, si la tabla es parte de un elemento figure. De cualquier modo, se alienta a los autores a reorganizar sus tablas de manera de no necesitar explicaciones, siempre que esto sea posible.

Las tablas han sido históricamente utilizadas para organizar la distribución de los elementos de un sitio web. Esta práctica es no reglamentaria y puede llevar a algunos navegadores (como los navegadores de voz) a obtener resultados confusos en su intento de extraer información tabulada.

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

Ejemplos

En el siguiente ejemplo crearemos una tabla muy básica con los elementos table, tr (filas) y td (celdas). Aquí podrás ver la estructura más básica de una tabla (un grupo de filas que contienen, cada una, a un grupo de celdas).

<table class="egt">
  <tr>
    <td>Nueva York</td>
    <td>1 h 51 min</td>
  </tr>
  <tr>
    <td>Allentown</td>
    <td>1 h 11 min</td>
  </tr>
  <tr>
    <td>Reading</td>
    <td>1 h 12 min</td>
  </tr>
</table>
Nueva York 1 h 51 min
Allentown 1 h 11 min
Reading 1 h 12 min

Ahora que hemos aprendido el concepto básico, intentemos mejorar nuestra tabla agregando celdas de encabezado. Las celdas de encabezado harán que nuestra información sea más legible al proveer pistas acerca de la organización de la tabla. En este caso particular, los encabezados estarán en la primera fila de la tabla.

<table class="egt">
  <tr>
    <th>Destino</th>
    <th>En auto</th>
    <th>En tren</th>
    <th>En bicicleta</th>
  </tr>
  <tr>
    <td>Nueva York</td>
    <td>1 h 51 min</td>
    <td>1 h 22 min</td>
    <td>8 h 53 min</td>
  </tr>
  <tr>
    <td>Allentown</td>
    <td>1 h 11 min</td>
    <td>-</td>
    <td>6 h 9 min</td>
  </tr>
  <tr>
    <td>Reading</td>
    <td>1 h 12 min</td>
    <td>-</td>
    <td>5 h 40 min</td>
  </tr>
</table>
Destino En auto En tren En bicicleta
Nueva York 1 h 51 min 1 h 22 min 8 h 53 min
Allentown 1 h 11 min - 6 h 9 min
Reading 1 h 12 min - 5 h 40 min

Ahora estamos listos para dividir las celdas de nuestro ejemplo anterior en tres secciones: el cuerpo (tbody), el encabezado (thead) y el pie (tfoot). La sección de encabezado estará compuesta por la primera fila, donde se encuentran actualmente todas las celdas de encabezado. Para el pie, agregaremos una nueva fila con los tiempos promedio. Todas las celdas restantes serán parte del cuerpo de la tabla.

Asimismo, agregaremos un elemento caption a la tabla, que en este caso brindará solamente un título. Recuerda que este elemento puede también ser usado para proveer explicaciones que ayuden a comprender mejor la información de tablas complejas.

<table class="egt">
  <caption>Tiempo necesario para viajar desde Philadelphia</caption>
  <thead>
    <tr>
      <th scope="col">Destino</th>
      <th scope="col">En auto</th>
      <th scope="col">En tren</th>
      <th scope="col">En bicicleta</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nueva York</td>
      <td>1 h 51 min</td>
      <td>1 h 22 min</td>
      <td>8 h 53 min</td>
    </tr>
    <tr>
      <td>Allentown</td>
      <td>1 h 11 min</td>
      <td>-</td>
      <td>6 h 9 min</td>
    </tr>
    <tr>
      <td>Reading</td>
      <td>1 h 12 min</td>
      <td>-</td>
      <td>5 h 40 min</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Promedio</th>
      <th>1 h 24 min</th>
      <th>1 h 22 min</th>
      <th>6 h 54 min</th>
    </tr>
  </tfoot>
</table>
Tiempo necesario para viajar desde Philadelphia
Destino En auto En tren En bicicleta
Nueva York 1 h 51 min 1 h 22 min 8 h 53 min
Allentown 1 h 11 min - 6 h 9 min
Reading 1 h 12 min - 5 h 40 min
Promedio 1 h 24 min 1 h 22 min 6 h 54 min

Un par de cosas pueden ser notadas en el ejemplo anterior. Primero, la posibilidad de omitir al elemento tbody y declarar las filas del cuerpo directamente dentro del elemento table. De este modo, el cuerpo de la tabla estaría presente de manera implícita y lo conformarían todas las celdas que no formen parte del encabezado o del pie.

Y Segundo, la importancia y conveniencia de la información provista en el elemento caption. Puedes ver fácilmente como esta pequeña descripción puede ayudar a los usuarios en la comprensión de los contenidos de la tabla.

Antriormente, HTML5 permitía que tfoot anteceda al cuerpo en el código, dejando en manos de los navegadores su reubicación al final de la tabla durante la representación. Esta conducta ya no es válida, y tfoot debería siempre ir luego de cualquier otro elemento de la tabla.

Atributos

Atributos específicos

summary

Un resumen del propósito/estructura de la tabla. Se supone que la información en este atributo expanda los contenidos del elemento caption. Los resúmenes deberían ser tan cortos, precisos y descriptivos como sea posible, ya que son clave a la hora de ayudar a personas con discapacidades en la interpretación del contenido de la tabla.

Este atributo se ha vuelto obsoleto en HTML5. Los autores deberían abandonar su uso en favor del elemento caption o de descripciones en el texto alrededor de la tabla.

Ejemplo

<table summary="Lista de usuarios registrados en el sitio web desde el 10-05-11 al 10-05-12">

width

Un valor que indica el ancho deseado para toda la tabla, en píxeles o como un procentaje relativo al espacio horizontal disponible. Los navegadores pueden adaptar este valor de acuerdo a la disponibilidad del espacio.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<table width="80%">

frame

Un valor que indica qué lados del marco alrededor de la tabla serán dibujados. Los valores posibles, insensibles a mayúsculas/minúsculas, son:

  • void: ningún lado. Este es el valor por defecto.
  • above: el lado superior únicamente.
  • below: el lado inferior únicamente.
  • hsides: los lados superior e inferior únicamente.
  • vsides: los lados izquierdo y derecho únicamente.
  • lhs: el lado izquierdo únicamente.
  • rhs: el lado derecho únicamente.
  • box: los cuatro lados.
  • border: los cuatro lados.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<table frame="box">

rules

Un valor que indica qué reglas deben ser dibujadas entre las celdas de una tabla. Los valores posibles, insensibles a mayúsculas/minúsculas, son:

  • none: sin reglas. Este es el valor por defecto.
  • groups: las reglas serán dibujadas entre los grupos de filas (thead, tfoot, y tbody) y de columnas (colgroup) únicamente.
  • rows: las reglas serán dibujadas entre las filas únicamente.
  • cols: las reglas serán dibujadas entre las columnas únicamente.
  • all: las reglas serán dibujadas entre todas las filas y columnas.

El atributo rules ha sido eliminado del estándar HTML5 por ser meramente visual. Los autores deberían reemplazarlo con hojas de estilo.

Ejemplo

<table rules="groups">

border

Un número de píxeles que definen el ancho que el borde de la tabla tomará.

El atributo border se ha vuelto obsoleto en HTML5 por ser meramente visual. Los autores deberían reemplazarlo con hojas de estilo.

Ejemplo

<table border="2">

cellspacing

Un número de píxeles que indica el ancho del espacio a ser dejado entre las celdas. También hace referencia al espacio entre el borde de la tabla y las celdas adyacentes.

Este atributo ha sido eliminado del estándar HTML5 debido a su naturaleza visual. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<table cellspacing="5">

cellpadding

Un número de píxeles que indica el ancho del espacio a ser dejado entre el contenido de una celda y su borde.

Este atributo ha sido eliminado del estándar HTML5 debido a su naturaleza visual. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<table cellpadding="10">

align

La alineacióin horizontal de la tabla. Existen tres valores posibles (insensibles a mayúsculas/minúsculas):

  • left: la tabla se alinea a la margen izquierda. Este es el valor por defecto.
  • center: la tabla es centrada.
  • right: la tabla se alinea a la margen derecha.

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

<table align="center">

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.