Tablas

Para datos en filas y columnas (horarios, precios, comparativas), nunca para maquetar.

<table>: La tabla.

<caption>: El título de la tabla.

<tr>: Una fila de la tabla.

<th>: Una celda de encabezado de una columna o de una fila.

  • Para datos en filas y columnas (horarios, precios, comparativas), nunca para maquetar. Una tabla accesible tiene título y celdas de encabezado.
  • Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
  • Esencial. La tabla. Dentro, filas (<tr>) con celdas de encabezado (<th>) o de datos (<td>).
  • Esencial. El título de la tabla. Va justo después de <table>; los lectores de pantalla lo leen al llegar a la tabla.
  • Agrupa las filas de encabezado de la tabla.

Introducción

Para datos en filas y columnas (horarios, precios, comparativas), nunca para maquetar. Una tabla accesible tiene título y celdas de encabezado.

Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.

<table>

Esencial. La tabla. Dentro, filas (<tr>) con celdas de encabezado (<th>) o de datos (<td>).

<caption>

Esencial. El título de la tabla. Va justo después de <table>; los lectores de pantalla lo leen al llegar a la tabla.

<thead>

Agrupa las filas de encabezado de la tabla.

<tbody>

Agrupa las filas de datos. Si no lo escribes, el navegador lo crea solo.

<tfoot>

Agrupa las filas de pie: totales, resúmenes.

<tr>

Esencial. Una fila de la tabla.

<th>

Esencial. Una celda de encabezado de una columna o de una fila. scope dice a qué encabeza: col o row.

Valores: scope, colspan, rowspan

<td>

Esencial. Una celda de datos. Con colspan y rowspan ocupa varias columnas o filas.

Valores: colspan, rowspan

<colgroup>

Agrupa columnas para darles estilo de una vez (solo admite fondo, borde y ancho).

<col>

Una columna dentro de <colgroup>. Es un elemento vacío; span abarca varias.

Referencia de HTML
06

Tablas

Para datos en filas y columnas (horarios, precios, comparativas), nunca para maquetar.

Código del tema: <table>

📘 Teoría

Introducción

1

Para datos en filas y columnas (horarios, precios, comparativas), nunca para maquetar. Una tabla accesible tiene título y celdas de encabezado.

2

Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.

<table>

Esencial. La tabla. Dentro, filas (<tr>) con celdas de encabezado (<th>) o de datos (<td>).

<caption>

Esencial. El título de la tabla. Va justo después de <table>; los lectores de pantalla lo leen al llegar a la tabla.

<thead>

Agrupa las filas de encabezado de la tabla.

<tbody>

Agrupa las filas de datos. Si no lo escribes, el navegador lo crea solo.

<tfoot>

Agrupa las filas de pie: totales, resúmenes.

<tr>

Esencial. Una fila de la tabla.

<th>

1

Esencial. Una celda de encabezado de una columna o de una fila. scope dice a qué encabeza: col o row.

2

Valores: scope, colspan, rowspan

<td>

1

Esencial. Una celda de datos. Con colspan y rowspan ocupa varias columnas o filas.

2

Valores: colspan, rowspan

<colgroup>

Agrupa columnas para darles estilo de una vez (solo admite fondo, borde y ancho).

<col>

Una columna dentro de <colgroup>. Es un elemento vacío; span abarca varias.

🕹️ Practica

Referencia interactiva Ejemplos editables: Tablas Abrir en pantalla completa

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com