Imagen destacada del artículo Cómo centrar una tabla html con css

Cómo centrar una tabla html con css

html svgcss svg
actualizado: 23 / 11 / 2022

Las tablas en html nos permiten presentar mucha información de forma organizada, por eso es importante saber como trabajar con ellas. A continuación te presentamos 3 formas de centrar una tabla html usando css

Centrar una tabla html con la propiedad margin: auto;

Probablemente esta es la forma más utilizada para poner una tabla html en el centro, basta con añadir los valores auto en las propiedades margin left y margin right.

Particularmente no es la forma que yo recomiendo, más abajo tienes dos formas de hacerlo con las que podrás tener un control total sobre la posición de la tabla dentro de un contenedor.

html
<table class="table" >
<tr>
<td><b>Nombre</b></td>
<td><b>Apellido</b></td>
<td><b>fecha</b></td>
</tr>
<tr>
<td>Carlos</td>
<td>Castillo</td>
<td >02/11/1998</td>
</tr>
<td>Pedro</td>
<td>Martínez</td>
<td >01/21/1990</td>
</tr>
</table>
css
.table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
Por favor no uses inline-styles

No escribas los estilos dentro de la etiqueta html, ponle una clase a la tabla y en una hoja css aplica las propiedades necesarias para centrar.

No hagas esto ⬇️

html
<table
style="border:1px solid black;margin-left:auto;margin-right:auto;"
></table>

Centrar una tabla html con display grid

Otra opción y la que personalmente recomiendo es usar una propiedad de layout como grid o flexbox, envolviendo la tabla que necesitamos en un div contenedor.

Para eso existen los divs, para ayudarnos a modelar nuestro contenido.

Nota importante:

Tampoco se debe abusar del uso de divs ya que dejarán nuestro código html sucio y difícil de mantener en el futuro

html
<div class="table-wrapper" >
<table class="table" >
<tr>
<td><b>Nombre</b></td>
<td><b>Apellido</b></td>
<td><b>fecha</b></td>
</tr>
<tr>
<td>Carlos</td>
<td>Castillo</td>
<td >02/11/1998</td>
</tr>
<td>Pedro</td>
<td>Martínez</td>
<td >01/21/1990</td>
</tr>
</table>
</div>
css
.table-wrapper {
display: grid;
place-content: center;
}
.table {
border: 1px solid black;
}

Centrar una tabla html con display flex

html
<div class="table-wrapper" >
<table class="table" >
<tr>
<td><b>Nombre</b></td>
<td><b>Apellido</b></td>
<td><b>fecha</b></td>
</tr>
<tr>
<td>Carlos</td>
<td>Castillo</td>
<td >02/11/1998</td>
</tr>
<td>Pedro</td>
<td>Martínez</td>
<td >01/21/1990</td>
</tr>
</table>
</div>
css
.table-wrapper {
display: flex;
justify-content: center;
}
.table {
border: 1px solid black;
}
Artículos relacionados:
Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo cambiar color de texto html con css

Imagen destacada del artículo Cómo cambiar color de texto html con css

Cómo crear un formulario de contacto con html

Imagen destacada del artículo Cómo crear un formulario de contacto con html

Cómo centrar un div con css

Imagen destacada del artículo Cómo centrar un div con css

Top 8 lenguajes backend más usados en la actualidad

Imagen destacada del artículo Top 8 lenguajes backend más usados en la actualidad

Calcular cuantos días hay entre dos fechas con javascript

Imagen destacada del artículo Calcular cuantos días hay entre dos fechas con javascript

Headless cms (cms sin cabeza) que es y porque deberías usarlo

Imagen destacada del artículo Headless cms (cms sin cabeza) que es y porque deberías usarlo