table, tr, td y th
Cree tablas básicas con filas, celdas de datos y celdas de encabezado.
table, tr, td y th es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Tablas HTML
Las tablas muestran datos organizados en filas y columnas. Utilícelas para datos tabulares, no para diseñar la estructura de la página.
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Alice</td>
<td>95</td>
</tr>
<tr>
<td>Bob</td>
<td>87</td>
</tr>
</table>Los elementos table, tr y td
Elementos fundamentales de una tabla:
<table>— contenedor de la tabla<tr>— fila de la tabla<td>— celda de datos de la tabla<th>— celda de encabezado de la tabla (negrita y centrada de forma predeterminada)
th frente a td
Utilice <th> para las celdas de encabezado, ya que tienen significado semántico:
<table>
<tr>
<th>Language</th> <!-- header: bold + centered by default -->
<th>Year Created</th>
<th>Type</th>
</tr>
<tr>
<td>HTML</td> <!-- data cell -->
<td>1991</td>
<td>Markup</td>
</tr>
</table>Estructura básica de una tabla
Una tabla mínima pero completa:
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Widget Pro</td>
<td>$49.99</td>
<td>In Stock</td>
</tr>
<tr>
<td>Widget Lite</td>
<td>$19.99</td>
<td>Out of Stock</td>
</tr>
</table>Bordes de tablas con CSS
De forma predeterminada, los navegadores muestran las tablas sin bordes. Añádalos con CSS:
table {
border-collapse: collapse; /* merge double borders into one */
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 0.75rem 1rem;
text-align: left;
}
th {
background-color: #f5f5f5;
font-weight: 600;
}Las tablas no sirven para diseñar la estructura
En la década de 1990, las tablas se utilizaban para diseñar la estructura de las páginas. Esto está obsoleto y resulta perjudicial:
- Los lectores de pantalla interpretan las tablas como datos; las tablas de diseño confunden a los usuarios
- Las tablas son poco flexibles en pantallas pequeñas
- CSS Grid y Flexbox sustituyeron todas las necesidades de diseño
- Utilice
<table>únicamente para datos tabulares reales
Tablas adaptables
Las tablas se desbordan en pantallas pequeñas. Envuélvalas para permitir el desplazamiento horizontal:
<div class="table-wrapper" style="overflow-x: auto;">
<table>
<!-- table content -->
</table>
</div>
/* Or use CSS: */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}Celdas vacías
Gestione las celdas vacías de forma intencionada:
<tr>
<td>Alice</td>
<td>95</td>
<td></td> <!-- Empty: renders blank -->
</tr>
/* CSS to style empty cells */
td:empty::before {
content: '—';
color: #999;
}Vista previa de thead y tbody
Las tablas deben utilizar <thead> y <tbody> para separar las filas de encabezado de las filas de datos; esto se tratará en la próxima lección:
<table>
<thead>
<tr><th>Name</th><th>Score</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>95</td></tr>
</tbody>
</table>col y colgroup para aplicar estilos a las columnas
Aplique estilos a columnas completas con <colgroup> y <col>:
<table>
<colgroup>
<col style="width: 200px; background: #f9f9f9;">
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
<tr>
<th>Name</th>
<th>Score</th>
<th>Grade</th>
</tr>
</table>Filas alternas con CSS
Alterne los colores de las filas para facilitar la lectura:
tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #e3f2fd;
}
/* nth-child(even) for even rows instead */Comprobación rápida
¿Cuál es la diferencia entre td y th en una tabla?
Repaso: table tr td th
Aspectos básicos de las tablas:
<table>— contenedor de la tabla<tr>— fila de la tabla<td>— celda de datos<th>— celda de encabezado (semántica y en negrita de forma predeterminada)- Utilice
border-collapse: collapsepara obtener bordes uniformes - Las tablas son solo para datos, no para diseñar la estructura de la página
Preguntas frecuentes
¿La lección «table, tr, td y th» es gratis?
Sí — el texto completo de «table, tr, td y th» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «table, tr, td y th»?
Cree tablas básicas con filas, celdas de datos y celdas de encabezado. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «table, tr, td y th»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- table, tr, td y th
- Estructura thead, tbody y tfoot
- colspan y rowspan para abarcar celdas
- Accesibilidad de tablas: scope, summary y caption