Cómo centrar una tabla en HTML?

Una tabla es una forma excelente de presentar mucha información de forma organizada. Los datos de ventas, el tráfico de la página web, las tendencias de las acciones en bolsa, el mercado de las criptomonedas (como el Bitcoin) y las notas de los estudiantes son ejemplos que se suelen presentar en tablas.

Al añadir una tabla a una página web utilizando HTML, puede ser más atractivo visualmente centrarla en la página. Centrar el texto y las imágenes suele hacerse mediante la clase text-align o a través de CSS, pero centrar una tabla requiere un enfoque diferente. A continuación explicamos cómo centrar una tabla con HTML en una página web.

Centrando una tabla en HTML

Cuando se añade una tabla a una página web, por defecto se alinea a la izquierda de la página o contenedor, como se muestra a continuación.

El código fuente HTML de la tabla anterior es el siguiente.

<table>
  <tr>
    <td>Mes</td>
    <td>Visitas</td>
    <td>Incremento</td>
  </tr>
  <tr>
    <td>Marzo</td>
    <td>5000</td>
    <td>-</td>
  </tr>
    <tr>
    <td>Abril</td>
    <td>6000</td>
    <td>20%</td>
  </tr>
</table>

Para centrar esta tabla, es necesario añadir: margin-left:auto;margin-right:auto; en el atributo de estilo en la etiqueta. La etiqueta de la tabla se quedaría con el siguiente aspecto:

<table style="margin-left:auto;margin-right:auto;">

Al cambiar el atributo de estilo en la etiqueta, como se ha mostrado anteriormente, la tabla queda centrada en la página web, como puede apreciarse a continuación: