Comment centrer le contenu d'un tableau HTML ?

Aligner au centre le contenu des tableaux HTML

Lorsque vous travaillez avec des tableaux HTML, il peut être nécessaire d'aligner le contenu des cellules verticalement et horizontalement pour un résultat visuellement plus attrayant. Voici comment y parvenir :

Centrage du texte horizontalement et verticalement

• Attributs de style en ligne : Utilisez la propriété text-align pour centrer le texte horizontalement et vertical-align pour l'aligner verticalement. Par exemple :

<code class="html"><td style="text-align: center; vertical-align: middle;">Text</td></code>

• Règles CSS : Définissez des règles CSS pour centrer le texte dans toutes les cellules du tableau :

<code class="css">td {
    text-align: center;
    vertical-align: middle;
}</code>

Vous trouverez ci-dessous un exemple illustrant les deux approches :

<code class="html"><table>
<tr>
    <td style="text-align: center; vertical-align: middle;">Centered Cell</td>
    <td style="text-align: center; vertical-align: middle;">Centered Cell</td>
</tr>
</table>

<table border="1" id="cssTable">
<tr>
    <td>Centered Cell</td>
    <td>Centered Cell</td>
</tr>
</table></code>

<code class="css">#cssTable td {
    text-align: center;
    vertical-align: middle;
}</code>

Ces techniques vous permettent de centrer facilement le contenu de vos tableaux HTML, ce qui donne une interface plus conviviale et visuellement attrayante.

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!