¿Cómo centrar una tabla en HTML y CSS?

05/04/2023

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

En este pequeño tutorial te voy a enseñar qué código CSS debes utilizar para centrar una tabla en HTML. Estoy segura de que ya has probado con:

text-align: center;

Pero esta línea NO FUNCIONA CON TABLAS. A continuación te digo qué atributo CSS tienes que utilizar y porqué text-align:center; no funciona.

Índice
  1. Centrar una tabla HTML
    1. ¿Por qué hay que usar el atributo margin y como funciona?
    2. ¿Por qué no funciona text-align:center?

Centrar una tabla HTML

Contemos con que tenemos como ejemplo la siguiente tabla:

<table class="tabla">

  <tr>

    <td>Encabezado 1</td>
    <td>Encabezado 2</td>
    <td>Encabezado 3</td>

  </tr>

  <tr>

    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>

  </tr>

</table>

Vamos a asignarle a la clase tabla que hemos creado en el ejemplo el atributo CSS necesario para centrar la tabla:

.tabla{
    margin: 0 auto;
}

¿Por qué hay que usar el atributo margin y como funciona?

El atributo margin sirve para especificar el margen de un elemento. Al especificar que sea automático (con auto) lo que ocurre es que se calcula automáticamente los márgenes que debe haber a cada uno de los lados de la tabla para que sean equitativos y, por consecuencia, la tabla queda centrada.

¿Por qué no funciona text-align:center?

Como el propio nombre del atributo indica, text-align está pensado para centrar texto, así que no funciona en tablas porque se trata de un elemento contenedor, como si fuera un div. Por eso es necesario usar el atributo margin.

Pionera del caos

Ingeniera Informática con Máster en Bioinformática, casi doctora y freelancer. Todo lo que te cuento en este blog son aprendizajes que yo misma he tenido ya sea durante mis estudios o en otros proyectos!

Otras Entradas Relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *



Para continuar es necesario que confirmes la política de privacidad de la web.

Subir