Comment centrer le texte dans les cellules d'un tableau HTML ?

Comment centrer le contenu d'un tableau HTML horizontalement et verticalement

Centrer le texte horizontalement et verticalement dans les cellules d'un tableau HTML peut améliorer le attrait visuel et lisibilité de la page. Pour ce faire, il existe deux méthodes à considérer : CSS et attributs de style en ligne.

Méthode CSS :

1. Définir un bloc de style dans le
2. Ajoutez le CSS suivant :

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

Méthode d'attribut de style en ligne :

1. Utiliser l'attribut style directement dans le tags.
2. Définissez les propriétés text-align et vertical-align sur "center" pour chaque cellule du tableau.

Voici un exemple qui illustre les deux méthodes :

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

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

Dans l'exemple ci-dessus, les deux tableaux s'afficheront avec un contenu de texte centré dans toutes les cellules. La méthode CSS peut être utile si vous souhaitez appliquer l'alignement à plusieurs tableaux ou réutiliser la feuille de style sur différentes pages. D'un autre côté, les attributs de style en ligne permettent un contrôle plus spécifique sur les cellules individuelles.

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!