Comment centrer le texte dans les cellules d'un tableau HTML : un guide pratique

Alignement des cellules d'un tableau : guide pour centrer le texte dans les tableaux HTML

Dans le monde du développement Web, les tableaux restent un outil précieux pour structurer et organiser les données. Parfois, vous devrez peut-être centrer le texte dans les cellules de votre tableau, à la fois horizontalement et verticalement. Cet article vous fournira une solution complète pour réaliser cet alignement.

Centrage horizontal du texte à l'aide de CSS et de styles en ligne

Une méthode efficace pour centrer horizontalement le texte dans les cellules du tableau se font via des styles CSS ou des attributs de style en ligne. Dans votre fichier CSS ou dans le document HTML lui-même, vous pouvez modifier la propriété "text-align" en "center" pour les cellules de votre tableau cible :

1. Styles CSS:

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

2. Attributs de style en ligne :

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

Centrage vertical du texte à l'aide CSS

Pour centrer verticalement le texte dans les cellules du tableau, utilisez la propriété CSS "vertical-align" :

1. Styles CSS :

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

2. Attributs de style en ligne :

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

Voici un exemple combinant le centrage horizontal et vertical en utilisant Styles CSS et en ligne :

<code class="css">td {
    height: 50px; 
    width: 50px;
}

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

<code class="html"><table>
    <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>

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!