Etiqueta HTML <table>

La etiqueta <table> define una tabla HTML. Es un contenedor para los elementos que construyen las filas, celdas y encabezados de la tabla, mostrando datos tabulares — información que tiene una relación significativa entre filas y columnas.

Esta página explica cómo estructurar una tabla correctamente, cómo hacerla accesible para los lectores de pantalla y qué propiedades CSS reemplazan los antiguos atributos de presentación que ya no son válidos en HTML5.

Estructura de la tabla

Una tabla se construye a partir de varios elementos que trabajan en conjunto:

<tr> define una fila de tabla.
<th> define una celda de encabezado — su texto aparece en negrita y centrado de forma predeterminada.
<td> define una celda de datos.
<caption> proporciona un título a la tabla.
<thead>, <tbody> y <tfoot> agrupan las filas de encabezado, cuerpo y pie de página.
<colgroup> permite aplicar estilos a columnas completas.

Agrupar filas con <thead> y <tbody> va más allá del marcado ordenado: indica al navegador (y a las tecnologías de asistencia) cuál es la fila de encabezado. También permite que el cuerpo se desplace mientras el encabezado permanece fijo, y permite aplicar estilos distintos a las filas de encabezado y de cuerpo.

Consejo

Usa <th> para cualquier celda que etiquete una fila o columna. Su principal valor es la accesibilidad: los lectores de pantalla anuncian el encabezado al leer una celda de datos, de modo que un usuario que no puede ver la cuadrícula sigue sabiendo qué significa cada valor. Como ventaja adicional, las celdas de encabezado aparecen en negrita y centradas de forma predeterminada, y ayudan a los motores de búsqueda a comprender la estructura de la tabla.

Sintaxis

La etiqueta <table> va en pares. El contenido se escribe entre las etiquetas de apertura (<table>) y cierre (</table>).

Ejemplo de la etiqueta HTML `<table>`:

Etiqueta HTML <table>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Upcoming release dates</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
        <tr>
          <th scope="row">July</th>
          <td>15.07.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Hacer las tablas accesibles

Una cuadrícula con formato visual es fácil de escanear con la vista, pero un lector de pantalla anuncia las celdas una a la vez. Estas características le proporcionan el contexto que necesita:

<caption> es el nombre accesible de la tabla. Colócalo como primer hijo de <table>. Los usuarios de lectores de pantalla lo escuchan al llegar a la tabla, de modo que saben de qué tratan los datos antes de explorarlos.
<th scope="col"> marca una celda como encabezado de toda su columna; <th scope="row"> la marca como encabezado de su fila. Con esto en su lugar, un lector de pantalla puede anunciar "Month: June" en lugar de simplemente "June", vinculando cada valor a su etiqueta.

Para tablas complejas — donde una celda se relaciona con encabezados que no están simplemente en la parte superior de su columna o al inicio de su fila (por ejemplo, encabezados que abarcan varias columnas) — scope no es suficiente. Usa el patrón headers/id: asigna a cada <th> un id único y luego lista los ids relevantes en el atributo headers de cada <td>.

<table>
  <caption>Quarterly revenue by region</caption>
  <thead>
    <tr>
      <th id="region">Region</th>
      <th id="q1">Q1</th>
      <th id="q2">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="europe" headers="region">Europe</th>
      <td headers="europe q1">120</td>
      <td headers="europe q2">150</td>
    </tr>
  </tbody>
</table>

Atributos

Peligro

Los atributos de la etiqueta <table> no son compatibles con HTML5. Para dar estilo a las tablas usa las propiedades de CSS que se enumeran a continuación.

Atributo	Valor	Descripción	Propiedad CSS
align	left center right	Define cómo debe alinearse la tabla con respecto al texto circundante. No compatible con HTML5.	margin
bgcolor	rgb(x,x,x) #xxxxxx colorname	Define el color de fondo de una tabla. No compatible con HTML5.	background-color
border	1 0	Define el tamaño del marco que rodea la tabla. No compatible con HTML5.	border
cellpadding	pixels	Define el espacio entre la pared de la celda y el contenido de la celda. No compatible con HTML5.	padding
cellspacing	pixels	Define el espacio entre celdas. No compatible con HTML5.	border-spacing
frame	void above below hsides lhs rhs vsides box border	Define qué lado del marco que rodea la tabla debe mostrarse. No compatible con HTML5.	border-style border-width
rules	none groups rows cols all	Define qué partes de los bordes interiores deben ser visibles. No compatible con HTML5.	border (Usa esta propiedad en combinación con las etiquetas HTML thead, tbody, tfoot, col o colgroup).
width	pixels	Define el ancho de una tabla. No compatible con HTML5.	width

La etiqueta <table> también es compatible con los Atributos globales y los Atributos de evento.

Reemplazar los atributos antiguos con CSS

Los atributos de presentación anteriores (border, cellpadding, cellspacing, align, bgcolor, etc.) están obsoletos en HTML5. Da estilo a la tabla con CSS. Este ejemplo reproduce una tabla con bordes, relleno y centrada sin ningún atributo obsoleto:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        /* width="80%" + align="center" */
        width: 80%;
        margin: 30px auto;
        /* cellspacing="0" — collapse the double borders */
        border-collapse: collapse;
        /* bgcolor on the table */
        background-color: #f9f9f9;
      }
      th,
      td {
        /* border="1" */
        border: 1px solid #666;
        /* cellpadding="10" */
        padding: 10px;
        /* align="left" inside cells */
        text-align: left;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Styled with CSS, not attributes</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Una correspondencia rápida de los atributos más comunes con sus equivalentes en CSS:

border → border
cellpadding → padding en <th>/<td>
cellspacing → border-spacing, o border-collapse: collapse para eliminar los espacios
align → margin (tabla) o text-align (celdas)
bgcolor → background-color
width → width

No uses tablas para diseño de página

Una <table> solo debe contener datos tabulares — contenido con relaciones reales entre filas y columnas. No la uses para posicionar regiones de la página como barras laterales, navegación o columnas de texto. Las tablas de diseño confunden a los lectores de pantalla (que intentan anunciar relaciones entre encabezados y celdas que no existen) y son rígidas y difíciles de hacer responsivas.

Para el diseño de página, usa CSS moderno en su lugar:

CSS Grid para diseños bidimensionales (filas y columnas) — el reemplazo natural para estructuras de página en cuadrícula.
Flexbox para diseños unidimensionales, como una fila de tarjetas o una barra de navegación.

Consulta las plantillas de diseño HTML para obtener estructuras listas para usar.

Práctica

¿Cuál afirmación sobre los elementos de tabla HTML es correcta?

El elemento td define una celda de datos, el elemento th define una celda de encabezado y tr define una fila.El elemento th se usa para crear una nota al pie en la parte inferior de la tabla.El elemento td es la única forma de insertar imágenes en una página web.El elemento caption debe colocarse después de la etiqueta de cierre de la tabla.