Aprende a crear tablas HTML desde lo básico hasta técnicas avanzadas. Domina los elementos table, tr, td, th, accesibilidad, diseño responsivo y cuándo usar tablas apropiadamente.
Entender cuándo usar tablas es crucial para crear sitios web semánticos y accesibles.
Perfecto para datos tabulares:
Ejemplo de uso apropiado de tabla:
<!-- Correcto: Mostrar datos estructurados -->
<table>
<caption>Reporte de Ventas Trimestrales 2024</caption>
<thead>
<tr>
<th>Trimestre</th>
<th>Ingresos</th>
<th>Crecimiento</th>
</tr>
</thead>
<tbody>
<tr>
<td>T1</td>
<td>$125,000</td>
<td>+15%</td>
</tr>
<tr>
<td>T2</td>
<td>$143,750</td>
<td>+18%</td>
</tr>
</tbody>
</table>
Evita las tablas para:
Ejemplo de uso inapropiado de tabla:
<!-- Incorrecto: Usar tabla para diseño -->
<table>
<tr>
<td>
<nav>Navegación aquí</nav>
</td>
<td>
<main>Contenido principal aquí</main>
</td>
<td>
<aside>Barra lateral aquí</aside>
</td>
</tr>
</table>
<!-- Correcto: Usar CSS Grid o Flexbox -->
<div class="layout">
<nav>Navegación aquí</nav>
<main>Contenido principal aquí</main>
<aside>Barra lateral aquí</aside>
</div>
<table>, <tr>, <td>, <th>Entender los elementos fundamentales de las tablas es esencial para crear tablas bien estructuradas.
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
</tr>
<tr>
<td>Dato 4</td>
<td>Dato 5</td>
<td>Dato 6</td>
</tr>
</table>
<table> - El elemento contenedor para toda la tabla
<tr> - Elemento de fila de tabla
<th> - Celda de encabezado de tabla (automáticamente en negrita y centrada)
<td> - Celda de datos de tabla
<table>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Stock</th>
<th>Calificación</th>
</tr>
<tr>
<td>Laptop Pro</td>
<td>$1,299</td>
<td>15</td>
<td>4.8/5</td>
</tr>
<tr>
<td>Mouse Inalámbrico</td>
<td>$29</td>
<td>87</td>
<td>4.5/5</td>
</tr>
<tr>
<td>Hub USB-C</td>
<td>$79</td>
<td>23</td>
<td>4.2/5</td>
</tr>
</table>
Atributo Scope:
<table>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Edad</th>
<th scope="col">Ciudad</th>
</tr>
<tr>
<th scope="row">Juan Pérez</th>
<td>28</td>
<td>Madrid</td>
</tr>
<tr>
<th scope="row">Ana García</th>
<td>34</td>
<td>Barcelona</td>
</tr>
</table>
Los títulos y resúmenes mejoran la accesibilidad de las tablas y proporcionan contexto para los usuarios.
El elemento <caption> proporciona un título o descripción para la tabla:
<table>
<caption>Métricas de Rendimiento de Empleados - T3 2024</caption>
<tr>
<th>Empleado</th>
<th>Ventas</th>
<th>Calificación Cliente</th>
<th>Objetivos Cumplidos</th>
</tr>
<tr>
<td>Sara Jiménez</td>
<td>$45,000</td>
<td>4.9/5</td>
<td>105%</td>
</tr>
<tr>
<td>Miguel Chen</td>
<td>$38,500</td>
<td>4.7/5</td>
<td>98%</td>
</tr>
</table>
caption {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
text-align: left;
color: #333;
}
/* Posicionamiento del título */
caption {
caption-side: top; /* Por defecto */
/* caption-side: bottom; */
}
Nota: El atributo summary está obsoleto en HTML5. Usa <caption> o texto circundante en su lugar:
<!-- Forma antigua (obsoleta) -->
<table summary="Esta tabla muestra datos de ventas trimestrales">
<!-- Nueva forma -->
<table>
<caption>
Datos de Ventas Trimestrales
<p>Esta tabla muestra cifras de ingresos y porcentajes de crecimiento para cada trimestre de 2024</p>
</caption>
<!-- contenido de la tabla -->
</table>
La fusión de celdas te permite crear diseños de tabla más complejos expandiendo celdas a través de múltiples columnas o filas.
<table>
<tr>
<th colspan="3">Reporte de Ventas 2024</th>
</tr>
<tr>
<th>Trimestre</th>
<th>Ingresos</th>
<th>Crecimiento</th>
</tr>
<tr>
<td>T1</td>
<td>$100,000</td>
<td>+10%</td>
</tr>
<tr>
<td>T2</td>
<td>$120,000</td>
<td>+20%</td>
</tr>
<tr>
<td colspan="2">Ingresos Totales</td>
<td>$220,000</td>
</tr>
</table>
<table>
<tr>
<th>Departamento</th>
<th>Empleado</th>
<th>Cargo</th>
<th>Salario</th>
</tr>
<tr>
<td rowspan="3">Ingeniería</td>
<td>Juan Smith</td>
<td>Desarrollador Senior</td>
<td>$95,000</td>
</tr>
<tr>
<td>Sara Wilson</td>
<td>Desarrolladora Frontend</td>
<td>$75,000</td>
</tr>
<tr>
<td>Miguel Johnson</td>
<td>Ingeniero DevOps</td>
<td>$85,000</td>
</tr>
<tr>
<td rowspan="2">Marketing</td>
<td>Lisa Brown</td>
<td>Gerente de Marketing</td>
<td>$70,000</td>
</tr>
<tr>
<td>Tom Davis</td>
<td>Creador de Contenido</td>
<td>$55,000</td>
</tr>
</table>
<table>
<tr>
<th colspan="4">Panel de Rendimiento de la Empresa</th>
</tr>
<tr>
<th rowspan="2">Métricas</th>
<th colspan="3">Trimestres</th>
</tr>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
<tr>
<td>Ingresos</td>
<td>$150K</td>
<td>$175K</td>
<td>$200K</td>
</tr>
<tr>
<td>Beneficio</td>
<td>$45K</td>
<td>$52K</td>
<td>$65K</td>
</tr>
</table>
Para tablas complejas, usa elementos semánticos para mejorar la estructura y accesibilidad.
<thead>, <tbody>, <tfoot><table>
<caption>Resumen Financiero Anual</caption>
<thead>
<tr>
<th scope="col">Categoría</th>
<th scope="col">T1</th>
<th scope="col">T2</th>
<th scope="col">T3</th>
<th scope="col">T4</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Ingresos</th>
<td>$125,000</td>
<td>$143,750</td>
<td>$165,313</td>
<td>$190,110</td>
<td>$624,173</td>
</tr>
<tr>
<th scope="row">Gastos</th>
<td>$87,500</td>
<td>$100,625</td>
<td>$115,719</td>
<td>$133,077</td>
<td>$436,921</td>
</tr>
<tr>
<th scope="row">Beneficio</th>
<td>$37,500</td>
<td>$43,125</td>
<td>$49,594</td>
<td>$57,033</td>
<td>$187,252</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Margen de Beneficio</th>
<td>30%</td>
<td>30%</td>
<td>30%</td>
<td>30%</td>
<td>30%</td>
</tr>
</tfoot>
</table>
<colgroup> y <col><table>
<caption>Comparación de Productos</caption>
<colgroup>
<col>
<col span="2" class="price-columns">
<col class="rating-column">
</colgroup>
<thead>
<tr>
<th>Producto</th>
<th>Precio Regular</th>
<th>Precio Oferta</th>
<th>Calificación</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$999</td>
<td>$799</td>
<td>4.5/5</td>
</tr>
<tr>
<td>Tablet</td>
<td>$599</td>
<td>$499</td>
<td>4.2/5</td>
</tr>
</tbody>
</table>
.price-columns {
background-color: #f0f8ff;
}
.rating-column {
background-color: #fff8dc;
text-align: center;
}
Hacer las tablas accesibles asegura que todos los usuarios puedan entender y navegar tus datos efectivamente.
1. Usar Encabezados de Tabla Apropiadamente:
<table>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Departamento</th>
<th scope="col">Salario</th>
</tr>
<tr>
<th scope="row">Juan Pérez</th>
<td>Ingeniería</td>
<td>$75,000</td>
</tr>
</table>
2. Proporcionar Títulos Claros:
<table>
<caption>
Información de Salarios de Empleados
<span class="sr-only">
Esta tabla contiene nombres de empleados, departamentos e información salarial
</span>
</caption>
<!-- contenido de la tabla -->
</table>
3. Usar Etiquetas ARIA Cuando Sea Necesario:
<table aria-label="Desglose de presupuesto mensual">
<tr>
<th id="categoria">Categoría</th>
<th id="presupuestado">Presupuestado</th>
<th id="real">Real</th>
<th id="diferencia">Diferencia</th>
</tr>
<tr>
<td headers="categoria">Vivienda</td>
<td headers="presupuestado">$1,200</td>
<td headers="real">$1,150</td>
<td headers="diferencia">-$50</td>
</tr>
</table>
Para tablas con múltiples niveles de encabezados:
<table>
<caption>Datos de Ventas por Región y Trimestre</caption>
<thead>
<tr>
<th rowspan="2" id="region">Región</th>
<th colspan="4" id="trimestres">Trimestres 2024</th>
</tr>
<tr>
<th id="t1" headers="trimestres">T1</th>
<th id="t2" headers="trimestres">T2</th>
<th id="t3" headers="trimestres">T3</th>
<th id="t4" headers="trimestres">T4</th>
</tr>
</thead>
<tbody>
<tr>
<th id="norte" headers="region">Norte</th>
<td headers="norte t1">$125K</td>
<td headers="norte t2">$143K</td>
<td headers="norte t3">$165K</td>
<td headers="norte t4">$190K</td>
</tr>
<tr>
<th id="sur" headers="region">Sur</th>
<td headers="sur t1">$98K</td>
<td headers="sur t2">$112K</td>
<td headers="sur t3">$128K</td>
<td headers="sur t4">$145K</td>
</tr>
</tbody>
</table>
/* Texto solo para lectores de pantalla */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Saltar navegación de tabla */
.skip-table {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-table:focus {
position: static;
width: auto;
height: auto;
}
Transforma tablas HTML básicas en presentaciones de datos visualmente atractivas y profesionales.
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: Arial, sans-serif;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f8f9fa;
font-weight: 600;
color: #333;
text-transform: uppercase;
font-size: 0.9em;
letter-spacing: 0.5px;
}
tr:hover {
background-color: #f5f5f5;
}
/* Colores alternos en filas */
tr:nth-child(even) {
background-color: #f9f9f9;
}
.modern-table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-width: 400px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.modern-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.modern-table th,
.modern-table td {
padding: 12px 15px;
}
.modern-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.modern-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.modern-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.modern-table tbody tr:hover {
background-color: #f1f1f1;
transform: scale(1.02);
transition: all 0.3s ease;
}
.responsive-table {
width: 100%;
border-collapse: collapse;
}
@media screen and (max-width: 768px) {
.responsive-table {
border: 0;
}
.responsive-table caption {
font-size: 1.3em;
}
.responsive-table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.responsive-table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: 10px;
}
.responsive-table td {
border: none;
border-bottom: 1px solid #eee;
display: block;
font-size: 0.8em;
text-align: right;
padding-left: 50%;
position: relative;
}
.responsive-table td:before {
content: attr(data-label);
position: absolute;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
text-align: left;
}
}
<table class="responsive-table">
<thead>
<tr>
<th>Nombre</th>
<th>Posición</th>
<th>Oficina</th>
<th>Salario</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Nombre">Juan Pérez</td>
<td data-label="Posición">Desarrollador</td>
<td data-label="Oficina">Madrid</td>
<td data-label="Salario">$75,000</td>
</tr>
</tbody>
</table>
.action-table {
width: 100%;
border-collapse: collapse;
}
.action-table th,
.action-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.action-buttons {
display: flex;
gap: 8px;
}
.btn {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.8em;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s;
}
.btn-edit {
background-color: #007bff;
color: white;
}
.btn-edit:hover {
background-color: #0056b3;
}
.btn-delete {
background-color: #dc3545;
color: white;
}
.btn-delete:hover {
background-color: #c82333;
}
<table class="action-table">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Email</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Juan Pérez</td>
<td>juan@ejemplo.com</td>
<td>
<div class="action-buttons">
<a href="#" class="btn btn-edit">Editar</a>
<button class="btn btn-delete">Eliminar</button>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Incorrecto: Tabla para diseño de página -->
<table>
<tr>
<td>Encabezado</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Barra lateral</td>
<td>Contenido</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Correcto: CSS Grid para diseño -->
<div class="page-layout">
<header>Encabezado</header>
<aside>Barra lateral</aside>
<main>Contenido</main>
</div>
<!-- Incorrecto: Sin encabezados -->
<table>
<tr>
<td>Nombre</td>
<td>Edad</td>
<td>Ciudad</td>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
<td>Madrid</td>
</tr>
</table>
<!-- Correcto: Encabezados apropiados -->
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
<td>Madrid</td>
</tr>
</table>
<!-- Incorrecto: Columnas inconsistentes -->
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
<td>Celda extra</td> <!-- Esto rompe la estructura -->
</tr>
</table>
<!-- Correcto: Estructura consistente -->
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Notas</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
<td>Empleado nuevo</td>
</tr>
</table>
<!-- Incorrecto: Sin consideración móvil -->
<table style="width: 1200px;">
<!-- Tabla muy ancha con muchas columnas -->
</table>
<!-- Correcto: Enfoque responsivo -->
<div class="table-container">
<table class="responsive-table">
<!-- Tabla con diseño amigable para móviles -->
</table>
</div>
<table class="sortable-table">
<thead>
<tr>
<th data-sort="string">Nombre <span class="sort-arrow">↕</span></th>
<th data-sort="number">Edad <span class="sort-arrow">↕</span></th>
<th data-sort="number">Salario <span class="sort-arrow">↕</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan Pérez</td>
<td>28</td>
<td>75000</td>
</tr>
<tr>
<td>Ana García</td>
<td>34</td>
<td>85000</td>
</tr>
</tbody>
</table>
<div class="table-controls">
<input type="text" id="table-filter" placeholder="Filtrar tabla...">
</div>
<table class="filterable-table">
<thead>
<tr>
<th>Producto</th>
<th>Categoría</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>Electrónicos</td>
<td>$999</td>
</tr>
<tr>
<td>Silla de Escritorio</td>
<td>Muebles</td>
<td>$299</td>
</tr>
</tbody>
</table>
<table class="expandable-table">
<thead>
<tr>
<th></th>
<th>ID Pedido</th>
<th>Cliente</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="expandable-row">
<td><button class="expand-btn">+</button></td>
<td>#12345</td>
<td>Juan Pérez</td>
<td>$299.99</td>
</tr>
<tr class="detail-row" style="display: none;">
<td colspan="4">
<div class="order-details">
<p><strong>Artículos:</strong> Laptop, Mouse, Teclado</p>
<p><strong>Envío:</strong> Entrega Express</p>
<p><strong>Estado:</strong> Procesando</p>
</div>
</td>
</tr>
</tbody>
</table>
Las tablas HTML son herramientas poderosas para presentar datos estructurados cuando se usan correctamente. Al entender el marcado apropiado de tablas, los requisitos de accesibilidad y las técnicas de diseño responsivo, puedes crear tablas que sean tanto funcionales como amigables para el usuario en todos los dispositivos y tecnologías asistivas.
Recuerda que las tablas deben mejorar la comprensión de datos, no complicarla. Enfócate en una estructura clara, encabezados significativos y diseño accesible para crear tablas que sirvan efectivamente a todos tus usuarios.
Comienza a implementar estas técnicas de tablas en tus proyectos, y crearás presentaciones de datos más profesionales, accesibles y amigables para el usuario que funcionan hermosamente en todas las plataformas y dispositivos.
Continúa leyendo con estos artículos relacionados
Domina las imágenes HTML con esta guía completa que cubre el tag img, texto alternativo, formatos de archivo, imágenes responsivas, srcset y optimización de rendimiento web.
Aprende a crear y estilizar listas en HTML con elementos ul, ol y dl. Guía completa sobre listas anidadas, accesibilidad y mejores prácticas de CSS.
Aprende a crear formularios HTML interactivos con tipos de input, etiquetas, botones y validación básica. Domina la accesibilidad de formularios y mejores prácticas.
Descubre el poder de los elementos HTML semánticos como header, footer, article y section. Aprende cómo el marcado semántico mejora el SEO, la accesibilidad y la mantenibilidad del código.