W3docs
es
Iniciar sesión

Tablas HTML

Las tablas HTML permiten organizar datos como texto, imágenes y enlaces en filas y columnas de celdas. ¡Prueba ejemplos de tablas HTML!

En HTML, puedes crear tablas para tu sitio web usando la etiqueta <table> junto con las etiquetas <tr>, <td> y <th>.

Las tablas HTML permiten mostrar datos (por ejemplo, imágenes, texto, enlaces) en columnas y filas de celdas. Las filas de una tabla se pueden agrupar en secciones de encabezado, pie y cuerpo mediante los elementos <thead>, <tfoot> y <tbody>, respectivamente.

En HTML5, podemos colocar <tfoot> antes o después de la etiqueta <tbody>. Deben ir después de cualquier elemento <caption>, <colgroup> y <thead>.

La mayoría de los atributos del elemento <table> no se utilizan en HTML5. Si deseas aplicar estilo a la apariencia de la tabla, puedes usar CSS en su lugar.

Tablas de datos vs. tablas de maquetación. Utiliza las tablas únicamente para datos tabulares, es decir, información que tiene una relación significativa entre filas y columnas. No uses tablas para maquetar una página (posicionar una barra lateral, una barra de navegación, etc.). Las tablas de maquetación confunden a los lectores de pantalla y dificultan el diseño responsivo. Para la maquetación de páginas, usa CSS Flexbox o Grid en su lugar.

Sintaxis

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

Ejemplo de la etiqueta HTML <table>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>
Pruébalo tú mismo »

Resultado

MonthDate
January10.01.2014
February10.01.2014

En el ejemplo dado, usamos la etiqueta <table> para crear una tabla. Luego, usamos la etiqueta <tr> para dividir la tabla en filas. La etiqueta <th> se usa para las celdas de encabezado de la tabla, donde se escribe el título; en otras palabras, la fila de la tabla se divide en encabezados. La etiqueta <td> se usa para las celdas de datos donde se escribe la información.

Agrupación de filas con <thead>, <tbody> y <tfoot>

Para tablas más grandes, puedes agrupar las filas en una sección de encabezado, una sección de cuerpo y una sección de pie de página usando los elementos <thead>, <tbody> y <tfoot>. Esto hace que el marcado sea más legible, te permite aplicar estilo a cada sección de forma independiente con CSS, y ayuda a los navegadores a repetir el encabezado y el pie cuando una tabla larga se imprime en varias páginas.

Ejemplo de agrupación de filas de tabla:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>$180</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Accesibilidad: encabezados y títulos

Las tablas pueden ser difíciles de seguir para las personas que usan lectores de pantalla, ya que una celda por sí sola ("$80") carece de significado sin saber a qué fila y columna pertenece. Algunas prácticas sencillas hacen que tus tablas sean comprensibles para todos.

Marca las celdas de encabezado con <th>. Una celda <th> se anuncia como encabezado, y los lectores de pantalla la usan para etiquetar las celdas de datos que se encuentran debajo o a su lado. Usar <td> para encabezados —o simular encabezados con texto <td> en negrita— elimina esa relación.

Añade un atributo scope. El atributo scope indica a la tecnología de asistencia si un encabezado se aplica a su columna o a su fila. Usa scope="col" para los encabezados de columna y scope="row" para los encabezados de fila. Esto es especialmente importante cuando una tabla tiene encabezados tanto en la parte superior como en el lado izquierdo.

Ejemplo de encabezados con el atributo scope:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <caption>Monthly savings</caption>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Savings</th>
      </tr>
      <tr>
        <th scope="row">January</th>
        <td>$100</td>
      </tr>
      <tr>
        <th scope="row">February</th>
        <td>$80</td>
      </tr>
    </table>
  </body>
</html>

Asigna un <caption> a la tabla. Un <caption> es un título para toda la tabla. Es el primer hijo del elemento <table> y se anuncia antes del contenido de la tabla, de modo que el usuario de un lector de pantalla sabe de qué trata la tabla antes de navegar por ella. Por defecto se muestra en la parte superior de la tabla; puedes moverlo con la propiedad CSS caption-side.

Ejemplo de una tabla con <caption>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
      caption {
        font-weight: bold;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <caption>Delivery schedule</caption>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.02.2014</td>
      </tr>
    </table>
  </body>
</html>

Extensión de celdas a múltiples filas y columnas

Es posible extender una celda a lo largo de varias filas o columnas. Normalmente, una celda no puede ocupar el espacio que está encima, debajo o al lado de otra celda, pero los atributos colspan y rowspan permiten que una celda ocupe el área de varias.

Si deseas que un único encabezado se extienda por dos o más columnas, usa el atributo colspan en la celda con el número de columnas que debe abarcar.

Ejemplo de la etiqueta HTML <table> con el atributo colspan:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th colspan="2">Month and Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Month and Date
January10.01.2014
February10.01.2014

Aquí, el único encabezado <th colspan="2"> se sitúa sobre las columnas Month y Date.

Lo mismo se puede hacer con las filas, usando el atributo rowspan. Una celda con rowspan="2" se extiende hacia abajo hasta la fila siguiente, por lo que la siguiente fila necesita una celda menos. Esto es útil cuando un valor se aplica a varias filas consecutivas.

Ejemplo de la etiqueta HTML <table> con el atributo rowspan:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td rowspan="2">10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
    </table>
  </body>
</html>
Pruébalo tú mismo »

Resultado

MonthDate
January10.01.2014
February(comparte la celda de arriba)

En este ejemplo, la celda 10.01.2014 usa rowspan="2", por lo que abarca tanto la fila de enero como la de febrero, y la fila de febrero solo necesita la celda Month.

Etiquetas relacionadas

  • <table> — el contenedor de la tabla
  • <tr> — una fila de la tabla
  • <th> — una celda de encabezado
  • <td> — una celda de datos
  • <caption> — el título de la tabla
  • <colgroup> — agrupa columnas para aplicar estilos

Práctica

Práctica
¿Qué atributo en una celda de encabezado indica a los lectores de pantalla que el encabezado etiqueta su columna?
¿Qué atributo en una celda de encabezado indica a los lectores de pantalla que el encabezado etiqueta su columna?
Práctica
¿Dónde debe colocarse el elemento caption dentro de una tabla?
¿Dónde debe colocarse el elemento caption dentro de una tabla?
Was this page helpful?