Comment centrer le tableau en HTML

En HTML, les tableaux sont l'un des éléments les plus courants, en particulier dans les scénarios d'affichage et de mise en page des données. Si aucun style n’est ajouté, le tableau sera composé par défaut à gauche. Dans ce cas, vous devez utiliser des styles pour centrer le tableau.

Voici trois méthodes pour vous aider à centrer le tableau horizontalement et verticalement sur la page :

Méthode 1 : Utiliser CSS pour centrer le tableau

Il s'agit de la méthode la plus courante et la plus recommandée, utilisant l'attribut CSS text-align Center le contenu du tableau.

Le code est le suivant :

<style>
  table {
    margin: 0 auto;
    text-align: center;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

Définissez le contenu du texte du tableau pour qu'il soit centré via la propriété text-align de CSS. Parmi eux, margin: 0 auto place la table au centre horizontal.

Méthode 2 : Utiliser les attributs HTML

Si vous ne souhaitez pas utiliser CSS, vous pouvez également utiliser des attributs en HTML pour réaliser un centrage horizontal du tableau :

Le code est le suivant :

<table align="center">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

En ajoutant l'alignement Attribut ="center" à la balise table Pour centrer le tableau.

Méthode 3 : Utiliser Flexbox

Flexbox en CSS est une méthode de mise en page très utile, qui peut facilement réaliser un centrage horizontal et vertical.

Le code est le suivant :

<style>
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .wrapper table{
    width: 200px;
  }
</style>

<div class="wrapper">
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>17</td>
      <td>上海</td>
    </tr>
  </table>
</div>

Centrez le tableau en définissant display: flex;, justification-content: center; et align-items: center dans l'élément div, où height: 100vh; toute la fenêtre en hauteur.

Vous trouverez ci-dessus trois méthodes pour réaliser le centrage horizontal des tables. Cependant, il est important de noter que l’utilisation d’attributs pour définir des styles en HTML n’est pas aussi facile à maintenir et à gérer que l’utilisation de CSS. Dans le développement réel, il est recommandé d'utiliser CSS pour contrôler le style des tableaux autant que possible afin d'obtenir une meilleure lisibilité et maintenabilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!