Comment centrer un tableau

Apprendre à centrer un tableau avec CSS.

Tableau centré :

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Comment centrer un tableau

Première étape - Ajouter HTML :

<table class="center">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</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>

Deuxième étape - Ajouter CSS :

Pour centrer le tableau, configurez les marges gauche et droite sur automatique :

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

Essayer personnellement

Veuillez noter que si la largeur est définie sur 100% (pleine largeur), le tableau ne peut pas être centré.

Pages associées

Tutoriel :Tableau CSS