Bienvenue à ce nouveau tuto 🙂 . Dans cette partie , nous allons apprendre comment créer des tableaux dans HTML.
accès rapide
- La démo
- Syntaxe
- Ajouter un titre au tableau
- La combinaison des cellules
- Les attributs du tableau
- Regroupement des éléments de la table
La démo
mettre ici la vidéo de la démonstration
Syntaxe
La balise <table> est un conteneur très utilisé dans les pages web. Elle facilite la mise en forme des informations grâce à son découpage en lignes et cellules complètement paramétrables.
CI-dessous les balises de déclaration d’un tableau en HTML :
<table> </table> : Définition d’un tableau
<tr> </tr> : Définition d’une ligne du tableau
<th> </th> : Définition d’une cellule d’en-tète du tableau
<td> </td> : Définition d’une cellule normale du tableau
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<table>
<tr>
<td>cellule1</td>
<td>cellule2</td>
<td>cellule3</td>
</tr>
<tr>
<td>cellule4</td>
<td>cellule5</td>
<td>cellule6</td>
</tr>
</table>
</body>
</html>
Comme vous pouvez le consulter dans l’exemple ci-dessus, le navigateur par défaut n’affiche pas les bordures du tableau. Nous pouvons les ajouter via l’attribut border de la balise <Table>.
Ci-dessous un exemple de bordure d’un seul pixel ( 1px) :
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<table border="1px">
<tr>
<td>cellule1</td>
<td>cellule2</td>
<td>cellule3</td>
</tr>
<tr>
<td>cellule4</td>
<td>cellule5</td>
<td>cellule6</td>
</tr>
</table>
</body>
</html>
Ajouter un titre au tableau
Pour ajouter un titre au tableau , nous pouvons utiliser la balise <caption> juste après la balise ouvrante <Table>
Ci-dessous un exemple avec la balise <caption> :
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<table border="1px">
<caption>titre de mon tableau</caption>
<tr>
<td>cellule1</td>
<td>cellule2</td>
<td>cellule3</td>
</tr>
<tr>
<td>cellule4</td>
<td>cellule5</td>
<td>cellule6</td>
</tr>
</table>
</body>
</html>
La combinaison des cellules
Pour combiner des cellules dans un tableau ,nous pouvons utiliser les attributs colspan et rowspan :
- colspan spécifie le nombre de cellules à combiner horizontalement
- rowspan spécifie le nombre de cellules à combiner horizontalement
Fusion des colonnes (colspan)
Il est possible de fusionner horizontalement certaines cellules avec l’attribut colspan= »nombredecellules qui se place dans la cellule (th ou td).
La valeur numérique de cet attribut précise le nombre de colonnes du tableau que couvre la cellule :
Ci-dessous un exemple d’une fusion de 3 colonnes :
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<table border="1px">
<caption>titre de mon tableau</caption>
<tr>
<td colspan="3">Titre</td>
</tr>
<tr>
<td>ligne 2 colonne 1</td>
<td>ligne 2 colonne 2</td>
<td>ligne 2 colonne 3</td>
</tr>
</table>
</body>
</html>
Fusion des lignes rowspan
Il est possible de fusionner des lignes avec l’attribut rowspan= » nombredelignes » qui se place dans la cellule (th ou td)
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<table border="1px">
<caption>titre de mon tableau</caption>
<tr>
<td rowspan="2">ligne 1 et 2 colonne 1</td>
<td>ligne 1 colonne 2</td>
<td rowspan="3"> ligne 1,2 et 3 colonne 3</td>
</tr>
<tr>
<td>ligne 2 colonne 2</td>
</tr>
<tr>
<td>ligne 3 colonne 1</td>
<td>ligne 3 colonne 2</td>
</tr>
</table>
</body>
</html>
Les attributs du tableau :
- border : Épaisseur du cadre extérieur en pixels. si la valeur vaut 0, le cadre sera invisible.
- cellspacing : Épaisseur en pixels autours de chaque cellule.
- cellspadding : Épaisseur en pixels entre l’élément de la cellule et le cadre.
- width : Largeur occupée par le tableau en pixels ou en pourcentages.
- width : Largeur occupée par une colonne en pixels ou en pourcentages.
- align : si la valeur vaut « top », titre sera affiché au-dessus si la valeur vaut « bottom », me titre sera affiché en-dessous.
- align : pour les valeurs left, right et center, affiche les éléments de la cellule à gauche, à droite ou au centre.
- valign : Aligne le contenu de la cellule en haut, en bas ou au milieu pour les valeurs TOP, BOTTOM et MIDDLE.
- nowrap : Empêche le retour à la ligne dans la cellule.
Regroupement des éléments de la table
Le tag <thead> – ( “table head” ) c’est « chapeau » du tableau c’est à dire regroupe une ou plusieurs premières lignes de la table.
Le tag <body> – ( “table body” ) regroupe les lignes centrales du tableau.
Le tag <tfoot> – ( “table footer” ) regroupe la ligne du bas, formant le « sous-sol » de la table.
Dans cette partie , nous avons appris comment comment créer des tableaux dans HTML
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons commencer créer des formulaires dans HTML.