Cómo centrar una tabla

Aprende a centrar una tabla utilizando CSS.

Tabla centrada:

Nombre Apellido Edad
Jill Smith 50
Eve Jackson 94
John Doe 80

Cómo centrar una tabla

Primer paso - Añadir HTML:

<table class="center">
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Segundo paso - Añadir CSS:

Para centrar la tabla, configure los márgenes laterales como automático:

.center {
  margin-left: auto;
  margin-right: auto;
}

Prueba personalmente

Tenga en cuenta que si se establece el ancho en 100% (ancho completo), no se puede centrar el cuadro.

Páginas relacionadas

Tutoriales:Cuadro de CSS