Centrar una tabla en HTML

1. Establezca la propiedad margen en auto para centrar una tabla en HTML
2. Establezca la propiedad margen en valores porcentuales para centrar una tabla en HTML

Este artículo presentará formas de centrar una tabla en HTML.

Establezca la propiedad margen en auto para centrar una tabla en HTML

La forma más sencilla de centrar una tabla HTML es usar la propiedad margen y establecerla en auto. Este método funciona para centrar todos los elementos del bloque.

El uso del valor auto para el margen ocupará el espacio horizontal disponible por igual. En consecuencia, la tabla toma un cierto ancho y sus márgenes izquierdo y derecho se ajustan por igual.

También podemos establecer la propiedad margen en 0px auto. Aquí, el valor 0px es para los márgenes superior e inferior, y el valor auto es para los márgenes izquierdo y derecho.

La propiedad margen establece un espacio entre los elementos adyacentes. La propiedad combina las cuatro propiedades margin-top, margin-right, margin-bottom y margin-left.

Un solo valor en la propiedad margen se parece al valor de estas cuatro propiedades.

Por ejemplo, cree una tabla HTML con algunas filas y columnas. Establezca el atributo de estilo en margin:auto para la etiqueta table.

Para escribir el CSS más específicamente, también puedes escribir las propiedades margin-left y margin-right en auto.

Aquí, hemos utilizado el CSS en línea para lograr el centrado de una tabla en HTML.

Código de ejemplo:

<table border=1 style="margin:auto">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>

Establezca la propiedad margen en valores porcentuales para centrar una tabla en HTML

También podemos centrar una tabla en HTML utilizando el valor porcentual en la propiedad margen. El concepto detrás de este enfoque es dividir la ventana de visualización horizontal de la pantalla en tres secciones.

Son el margen izquierdo, el margen derecho y el ancho de la tabla. Podemos establecer un ancho específico de la tabla en porcentaje.

A continuación, podemos dividir equitativamente la longitud restante de la ventana gráfica y establecer el margen izquierdo y derecho, respectivamente.

Por ejemplo, establezca las siguientes propiedades en el atributo estilo en la etiqueta tabla. Establezca la propiedad width en 50% y las propiedades margin-left y margin-right en 25%.

Como resultado, la tabla ocupará la mitad del ancho de la ventana de visualización horizontal de la pantalla. El espacio restante se ajusta igualmente a los márgenes izquierdo y derecho.

Así, podemos centrar la tabla en HTML.

Código de ejemplo:

<table border=1 style="width:50%;
margin-left: 25%; margin-right: 25 %;">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>