Html, lignes et colonnes

Voyons comment en créer d’autres modèles en ajoutant des lignes et des colonnes. Puisque vous connaissez les éléments fondamentaux d’une table, réalisons-en une avec deux cellules.

Voici à quoi ressemblera notre tableau :

Qu’est-ce qui détermine l’insertion d’une cellule dans un tableau parmi les trois éléments listés ? Le tag td. Alors utilisons td pour ajouter deux cellules dans notre tableau :

Chaque fois que vous répétez le tag td, une cellule est créée. Si vous le répétez trois fois, vous aurez clairement trois cellules. Maintenant, voyons comment réaliser un tableau avec deux lignes en utilisant tr. Voici à quoi ressemblera notre tableau :

Ici aussi, le tag tr est répété pour le nombre de lignes à insérer. Faites bien attention… le tag tr contient toujours le tag td car les deux lignes forment en fait deux cellules. Réalisons maintenant un tableau avec deux lignes et deux cellules dans la partie inférieure.

Nous avons réalisé un tableau composé de deux lignes et deux cellules dans la partie inférieure. Voici le code utilisé :

Je vous présente colspan qui sert à diviser une cellule unique en plusieurs cellules. Dans notre cas, la ligne inférieure du tableau a été divisée, grâce à colspan, en deux cellules. Lorsqu’on utilise colspan, il faut insérer les dimensions des deux cellules individuelles générées par colspan lui-même, dimensions qui doivent prendre en compte le total du tableau :

 

La taille totale de la cellule est de 400pxl, qui sera divisée en deux cellules par colspan.

 

En divisant en deux cellules de même taille, on obtiendra en effet deux cellules de 200pxl chacune (400:2). Si l’on souhaite qu’une des deux cellules générées par colspan soit plus grande que l’autre, il faut toujours garder comme référence la taille totale du tableau donc :

Par conséquent, vous pouvez attribuer des tailles différentes aux deux cellules générées, à condition que la somme ne dépasse pas les 400px. Vous pouvez faire des exercices en construisant des tableaux avec diverses combinaisons de tailles, en insérant des lignes et des cellules, en redimensionnant pour voir l’effet et trouver la combinaison qui convient le mieux à vos besoins.

Pubblicato in HTML & CSS