CSS Alignement des tableaux
Alignement horizontal
La propriété CSS text-align est utilisée pour définir l'alignement horizontal du contenu dans les éléments <th> ou <td>.
Cette propriété peut avoir l'une des valeurs suivantes :
-
left- Aligne le texte à gauche -
right- Aligne le texte à droite -
center- Centre le texte
Remarque : Par défaut, le contenu des éléments <th> est centré, tandis que celui des éléments <td> est aligné à gauche !
CSS text-align: center
Pour centrer le contenu des éléments <td>, utilisez text-align: center :
| Prénom | Nom | Économies |
|---|---|---|
| Peter | Griffin | 100 $ |
| Lois | Griffin | 150 $ |
| Joe | Swanson | 300 $ |
Exemple
Centrer les éléments <td> :
td {
text-align: center;
} CSS text-align: left
Pour forcer le contenu des éléments <th> à être aligné à gauche, utilisez text-align: left sur les éléments <th> :
| Prénom | Nom | Économies |
|---|---|---|
| Peter | Griffin | 100 $ |
| Lois | Griffin | 150 $ |
| Joe | Swanson | 300 $ |
Exemple
Aligner à gauche les éléments <th> :
th {
text-align: left;
} Alignement vertical
La propriété CSS vertical-align définit l'alignement vertical (comme haut, bas ou milieu) du contenu dans les éléments <th> ou <td>.
Remarque : Par défaut, l'alignement vertical du contenu dans un tableau est au milieu (pour les éléments <th> et <td>).
L'exemple suivant définit l'alignement vertical du texte en bas pour les éléments <td> :
| Prénom | Nom | Économies |
|---|---|---|
| Peter | Griffin | 100 $ |
| Lois | Griffin | 150 $ |
| Joe | Swanson | 300 $ |
Exemple
Définit l'alignement vertical en bas pour les éléments <td> :
td {
height: 50px;
vertical-align: bottom;
}