Aligner le tableau en haut en HTML

Un tableau HTML se compose de lignes de tableau composées de données. Ce didacticiel présentera une méthode pour aligner les données du tableau en haut à droite.

Utilisez les propriétés CSS vertical-align et text-align pour aligner les données du tableau en HTML

Un tableau en HTML se compose de lignes et de colonnes. Nous utilisons la balise <table> pour créer un tableau en HTML. La balise <tr> est utilisée pour créer les lignes du tableau, et la balise <td> est utilisée pour remplir les données du tableau.

La boîte où se trouvent les données du tableau est également appelée cellule. Les cellules sont les blocs de construction d’un tableau. Cet article explique comment aligner les données du tableau en haut de la cellule de droite.

Nous utiliserons les propriétés CSS vertical-align et text-align pour aligner les données du tableau en haut à droite d’une cellule. Commençons par introduire la propriété vertical-align.

La propriété définit l’alignement vertical de l’élément spécifié. Les éléments peuvent être des éléments en ligne ou des blocs en ligne et même des cellules de tableau.

La propriété prend une variété d’options. Certains sont baseline, length, sub, super, top, etc. La valeur par défaut de la propriété est baseline.

Nous pouvons utiliser la propriété vertical-align dans deux contextes différents. Comme indiqué précédemment, nous pouvons l’utiliser pour positionner verticalement un élément en ligne.

Une autre méthode consiste à utiliser la propriété pour aligner le contenu des cellules dans un tableau. Dans l’exemple, nous aborderons ce dernier contexte.

La propriété text-align définit l’alignement horizontal du texte dans l’élément spécifié. Certaines options de propriété sont left, right, center, justify, etc. Comme il ressort clairement des options, nous pouvons définir la position du texte avec la propriété text-align.

Nous pouvons utiliser ces deux propriétés pour aligner les données du tableau en haut à droite. L’option top de la propriété vertical-align aligne l’élément sur le haut de l’élément le plus haut de la ligne.

Dans le cas des cellules du tableau, le contenu est positionné juste en dessous de la bordure de la cellule. De même, la propriété right aligne le texte sur le côté droit de la cellule.

Par exemple, créez un tableau avec deux lignes et deux colonnes. Remplissez les cellules avec les mots Create, Read, Update et Delete.

En CSS, sélectionnez l’élément td comme enfant de l’élément table. Réglez la hauteur et la largeur de la cellule sur 200px.

Appliquez la bordure de 2px solid #000 aux cellules. Ensuite, définissez la propriété vertical-align sur top et la propriété text-align sur right.

Par conséquent, le contenu des cellules est positionné juste en dessous de la bordure de la cellule et sur le côté droit. Grâce à cela, nous pouvons aligner les données du tableau en haut à droite à l’aide des propriétés CSS vertical-align et text-align.

Exemple de code :

<table>
 <tr>
 <td>
 Create
 </td>
 <td>
 Read
 </td>
 </tr>
 <tr>
 <td>
 Update
 </td>
 <td>
 Delete
 </td>
 </tr>
</table>

table td {
 height: 200px;
 width: 200px;
 border: 2px solid #000;
 vertical-align:top;
 text-align:right;
}