Maison >interface Web >tutoriel HTML >Comment centrer un tableau en HTML

Comment centrer un tableau en HTML

下次还敢
下次还敢original
2024-04-27 21:03:331055parcourir

En HTML, vous pouvez utiliser trois méthodes pour centrer le tableau : Utilisez l'attribut margin: auto pour centrer le tableau horizontalement. Utilisez l'attribut text-align: center; pour centrer verticalement le tableau dans l'élément parent. Utilisez l'attribut align pour spécifier la position de la table par rapport à l'élément parent (obsolète).

Comment centrer un tableau en HTML

Comment centrer un tableau HTML

En HTML, il existe plusieurs façons de centrer un tableau :

1 Utilisez margin: auto;

  • pour définir la marge pour le L'attribut table: auto; permet de centrer le tableau horizontalement. margin: auto; 属性,可以让表格在水平方向上居中。

示例:

<code class="html"><table style="margin: auto;">
  <tr>
    <th>列 1</th>
    <th>列 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table></code>

2. 使用 text-align: center;

  • 给表格的父元素设置 text-align: center; 属性,可以让表格在父元素内垂直居中。

示例:

<code class="html"><div style="text-align: center;">
  <table border="1">
    <tr>
      <th>列 1</th>
      <th>列 2</th>
    </tr>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
    </tr>
  </table>
</div></code>

3. 使用 align 属性

  • 给表格设置 align 属性,可以指定表格相对于其父元素的位置。

示例:

<code class="html"><table align="center">
  <tr>
    <th>列 1</th>
    <th>列 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table></code>

注意:

  • align 属性在 HTML5 中已弃用,应优先使用 margintext-align
  • Exemple :
  • rrreee
🎜2. Utilisez text-align: center;🎜🎜🎜🎜 pour définir l'attribut text-align: center; sur l'élément parent du tableau à créer. le tableau dans le centre parent verticalement dans l'élément. 🎜🎜🎜🎜Exemple : 🎜🎜rrreee🎜🎜3. Utilisez l'attribut align🎜🎜🎜🎜 pour définir l'attribut align du tableau afin de spécifier la position du tableau par rapport à son élément parent. 🎜🎜🎜🎜Exemple : 🎜🎜rrreee🎜🎜Remarque : 🎜🎜🎜🎜L'attribut align est obsolète en HTML5, utilisez margin ou text-align attribut. 🎜🎜Si la largeur est définie pour le tableau, l'effet de centrage peut être affecté. 🎜🎜Les méthodes ci-dessus peuvent être utilisées pour centrer la table horizontalement ou verticalement. 🎜🎜

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn