¿Cómo centrar una tabla en HTML?
22/04/2024
¿Cómo centrar una tabla en HTML? Presentar la información en una tabla es una forma excelente de mantener las cosas organizadas. Datos como las cifras de ventas, las visitas a un sitio web, temas bursátiles como el mercado de criptomonedas (por ejemplo, Bitcoin) y las calificaciones de los estudiantes se transmiten a menudo a través de tablas.
Si desea centrar una tabla en una página web utilizando HTML, existen un par de enfoques diferentes que puede adoptar. La forma más sencilla es utilizar la clase text-align o a través de CSS. Pero si quiere ser más preciso, puede utilizar un método diferente. He aquí cómo centrar una tabla con HTML en una página web:
¿Cómo centrar una tabla en HTML?
Por defecto, las tablas se alinean a la izquierda de las páginas web o contenedores, como se demuestra a continuación.
Mes | Visitas | Incremento |
Marzo | 5000 | – |
Abril | 6000 | 20% |
El código fuente HTML de la tabla anterior es el siguiente.
Te Podría Interesar:▷ Los Mejores Antivirus para Pendrive USB<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, añada: margin-left:auto;margin-right:auto; en el atributo de estilo situado en la etiqueta. A continuación, la etiqueta de su tabla tendría 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% |
Puede hacer que su tabla sea más atractiva visualmente añadiendo parámetros al atributo style de la etiqueta «table». Pruebe a añadir padding:2px; y border-spacing:20px; para crear espacio entre los puntos de datos y los bordes: facilita la lectura.