0 Comentarios
Vale, lo entendemos. Estás construyendo tu página web y quieres que todo se vea ordenado, limpio y profesional. Y de repente... ¡zas! Esa maldita tabla se te va a la izquierda como si quisiera huir de tu diseño. ¿Cómo se centra una tabla en HTML sin volverse loco? Tranquilo, que estás en el sitio adecuado.
En este artículo te vamos a mostrar todas las formas efectivas de centrar una tabla en HTML, desde las más clásicas hasta las más modernas. Y lo mejor, te explicamos cuándo usar cada método, con ejemplos prácticos y buenas prácticas de diseño web actual. Porque no se trata solo de “centrar por centrar”, sino de hacerlo bien y que funcione en todos los navegadores.
Vamos al grano. Estas son las principales formas de centrar una tabla dentro de una página web. Algunas te van a sonar, otras quizá no, pero todas tienen su por qué.
align (HTML tradicional)Este es un clásico de toda la vida. Durante mucho tiempo se usaba así:
<table align="center">
<tr><td>Contenido</td></tr>
</table>
¿Funciona? Sí. ¿Es recomendable? No. Este atributo está obsoleto en HTML5, por lo que no deberías usarlo en proyectos modernos. Pero si estás editando una web antigua o un email en HTML muy básico, puede sacarte de un apuro.
margin, text-align y otras propiedades útilesEste es el método más recomendado hoy en día. Y además, es sencillo:
<table style="margin: 0 auto;">
<tr><td>Contenido</td></tr>
</table>
La propiedad margin: 0 auto le dice al navegador: “centra esta tabla dentro de su contenedor horizontalmente”.
Otra opción, algo menos directa, pero válida en algunos casos:
<div style="text-align: center;">
<table>
<tr><td>Contenido</td></tr>
</table>
</div>
Este método es útil si ya estás usando alineación de texto en tu diseño, y necesitas que la tabla se comporte como si fuera una imagen o un texto centrado.
Consejo PRO: Si usas clases CSS, mejor separa el estilo del contenido:
.centrado {
margin: 0 auto;
}
<table class="centrado">...</table>
display: flex para centrar elementos como tablasEl display: flex es ideal si tienes un contenedor principal que quieres usar para organizar elementos, y entre ellos, centrar una tabla. Por ejemplo:
<div style="display: flex; justify-content: center;">
<table>
<tr><td>Contenido</td></tr>
</table>
</div>
Este método es muy potente porque te da flexibilidad (nunca mejor dicho). Puedes alinear no solo la tabla, sino varios elementos juntos y posicionarlos de forma dinámica.
Ahora que ya sabes cómo centrar una tabla, toca hablar de lo que no siempre se ve, pero que es igual o más importante.
Aunque la mayoría de métodos funcionan bien en los navegadores modernos (Chrome, Firefox, Edge, Safari…), lo ideal es que uses estilos CSS separados del contenido. Esto mejora la legibilidad, el rendimiento y la accesibilidad.
✅ Usa hojas de estilo externas (style.css)
❌ Evita estilos en línea (style="...") cuando puedas
Además, asegúrate de probar tu diseño en móviles. Un truco es usar la extensión "Responsive Viewer" en Chrome o Firefox, o directamente las herramientas de desarrollo (F12).
No es lo mismo centrar un párrafo, una imagen o una div que una table. Las tablas tienen comportamientos propios, especialmente si llevan width, border-collapse, etc. Por eso, los métodos que funcionan con imágenes (text-align: center) no siempre sirven para tablas, y viceversa.
Pasemos a la práctica, que es lo que de verdad importa. Aquí tienes dos formas muy comunes.
<!DOCTYPE html>
<html lang="es">
<head>
<style>
table {
margin: 0 auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<tr><td>Ejemplo centrado</td></tr>
</table>
</body>
</html>
Rápido, limpio y funcional.
div contenedorEsto es muy útil si la tabla está dentro de una sección o layout más complejo:
<div style="display: flex; justify-content: center;">
<table>
<tr><td>Contenido centrado con flex</td></tr>
</table>
</div>
¿Te fijas? Aquí el div se convierte en el contenedor flexible, y tú decides cómo se distribuye su contenido.
Hay algunos errores típicos que vemos una y otra vez:
Olvidar el margin: auto cuando se usa ancho fijo
Usar text-align: center en la tabla en lugar del contenedor
No definir un width a la tabla, lo que impide a veces el centrado
Confundir CSS moderno con atributos obsoletos de HTML
La clave está en saber dónde aplicar el estilo. En general, céntrate en el contenedor, no en el contenido.
Aquí te dejamos unas herramientas que usamos y recomendamos:
MDN Web Docs – La biblia de la documentación web
W3Schools – Ideal para empezar o repasar ejemplos básicos
CodePen – Para probar tus diseños online en tiempo real
Visual Studio Code – Uno de los mejores editores para HTML y CSS
Extensiones para Chrome:
Web Developer (de Chris Pederick)
CSS Viewer
Responsive Viewer
Y si necesitas algo más avanzado, o simplemente quieres que nos encarguemos nosotros del diseño de tu web, te invitamos a visitar nuestra sección de diseño web en Alicante. Podemos ayudarte a que tu presencia online sea tan elegante y funcional como tú te mereces.
¿Te ha resultado útil este artículo? Esperamos que sí. Y si aún tienes dudas sobre cómo centrar una tabla en HTML, o cualquier otra cosa relacionada con tu web, ya sabes dónde encontrarnos
¿Qué te ha parecido este artículo?