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.
Tabla de contenidos
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 decolgroup
.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 detbody
,thead
,tfoot
otable
.td
: representa a una celda regular. Sólo puede ser declarado como hijo detr
.th
: representa a una celda de encabezado. Sólo puede ser declarado como hijo detr
.
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.
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="default">
<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="default">
<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="default">
<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>
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.
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
, ytbody
) 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.