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

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.

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.