¿Cómo centrar una tabla en HTML?

22/04/2024

¿Cómo centrar una tabla en HTML?

¿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?

¿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.

MesVisitasIncremento
Marzo5000
Abril600020%

Te Podría Interesar:▷ Proceso del Data Mining▷ Proceso del Data Mining

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

Te Podría Interesar:▷ Los Mejores Antivirus para Pendrive USB▷ 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:

MesVisitasIncremento
Marzo5000
Abril600020%
Consejo

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.

Te Podría Interesar:▷ La planificación estratégica de los sistemas de información▷ La planificación estratégica de los sistemas de información

Subir

Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Mas Información