Catégories: Culture
|
13 avril 2020 19 h 00 min

Comment créer un tableau avec des balises HTML ?

Partager

Définition Un tableau se compose de cellules (cases).
Ces cellules sont disposées en rangées (cases alignées horizontalement) et en colonnes rangées (cases alignées verticalement).
(cf.
image 1).
Éléments de base de la création d’un tableau Pour créer un tableau simple en HTML, 4 balises (instructions) sont essentielles : Table est la balise indiquant le début du tableau.

Tr (table row) rassemble les cellules d’une même rangée.
Td (table data) accède au contenu d’une cellule.
Th (table heading) affiche des titres centrés et en gras.
Possède les mêmes attributs que l’élément td.
Passons à la pratique Dans cet exemple, nous avons un tableau composé de 2 rangées.
La première comprend 3 cellules affichant un texte (Titre) centré et en gras.
La seconde comprend aussi 3 cellules, mais cette fois avec un texte dont la mise en forme est simple, le texte est toujours placé à gauche (état par défaut).
(cf.
image 2) Un détail vous étonne ? Oui, ce tableau est sans bordure.
Alors, voyons comment pallier ce manque.

Principaux attributs Afin de paramétrer votre tableau, vous pouvez ajouter certains éléments associés à des valeurs.
Ces éléments s’appellent des « attributs ».
(cf.
image 3) Border affiche un tableau avec une bordure en pixels.
Width définit la largeur totale du tableau (en pixels ou en pourcentage).
Height définit la hauteur totale du tableau (en pixels ou en pourcentage).
Cellspacing détermine l’espacement entre les bords de deux cellules voisines.
Cellpadding détermine l’espacement entre le bord des cellules et leur contenu.
Align précise l’alignement horizontal.
Il peut prendre les valeurs suivantes : left, right ou center.
Valign précise l’alignement vertical.
Peut prendre les valeurs top, middleou bottom(à utiliser avec height).
Deux attributs supplémentaires permettent la fusion des cellules (cf.
image 4) : Colspan indique le nombre de cellules fusionnées horizontalement.
Rowspan indique le nombre de cellules fusionnées verticalement.
Il est aussi facile d’agrémenter ses tableaux par la couleur et les images.
(cf.
images 5 et 6).
Vaste est l’étendue des possibilités offertes par les tableaux, alors n’attendez pas pour faire vos expérimentations.