Como centrar una tabla html con css

Actualizado : 2023-10-05

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;
}

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi