tutorial para centrar una tabla en html

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.

Mes Visitas Incremento
Marzo 5000
Abril 6000 20%

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:

Mes Visitas Incremento
Marzo 5000
Abril 6000 20%
Consejo de InternetCtrl
Puede añadir parámetros al atributo de estilo en la etiqueta “table” para que la tabla sea más atractiva. Añadir padding:2px; y border-spacing:20px; añade espacio entre los puntos de datos y el borde para mejorar la legibilidad.

Esperamos que con este pequeño tutorial hayas aprendido a centrar una tabla en HTML de manera fácil y haya sido de gran utilidad.

Recomendamos hoy:  Cómo centrar un texto en HTML
Si tienes algún comentario o pregunta, por favor deja un comentario abajo y te responderemos lo antes posible.
5/5 - (2 votos)

¿Alguna duda? Deja un comentario