Bienvenue dans notre cours résumé sur l’html5. Nous avons vu la structure de base d’une page html, comment ajouter des paragraphes et des titres, insérer des images, les liens,les listes, etc. Cette partie concerne la partie HTML5 sur les tableaux.
HTML5 : tableaux
Pour insérer un tableau dans une page web créée par HTML5, on utilise la balise table. Chaque table contient des lignes. Une ligne est représentée par la balise tr. dans chaque ligne, on peut trouver une ou plusieurs cases. Pour ajouter une case , on utiliser la balise td.
Exemple : créer un tableau de deux lignes. Chaque ligne contient trois cases:
on a ajouter l’attribut border pour pouvoir voir le tableau .
HTML5 : Entête d’un tableau
On peut ajouter des lignes ou des cases qui représentent des entêtes (titres ). Pour cela, on utilise la balise th au lieu de la balise td.
Exercice :
Solution :
La fusion des cellules dans un tableau :
Si on a un exemple de tableau où on doit fusionner des cellules (de la même ligne ou de lignes différentes), alors, on a recours aux attribut rowspan et colspan- rowspan : permet de fusionner des cellules de lignes différentes
- colspan : permet de fusionner des cellules de la même ligne
Exemples :
rowspan= “2” veut dire que la case en cours va occuper son espace par défaut et l’espace de la case au dessous ( de la ligne suivante). Ainsi, on ne doit pas ajouter la case dans la ligne suivante (nous avons supprimer la case 4 car la case 1 a pris l’espace des deux .
colspan= “2” veut dire que la case en cours va occuper son espace par défaut et l’espace de la case à coté ( de la même ligne à droite ). Ainsi, on ne doit pas ajouter la case 2 qu’on a fusionné avec la case 1.
Exercice :
Donner le code html qui permet de réaliser le tableau suivant :
Solution :
HTML5 : caption d’une table
On peut ajouter un titre du tableau en utilisant la balise caption.
Vous pouvez suivre notre cours complet d’HTML. pour approfondir vos compétences sur le développement web en utilisant le langage html5.
Aussi, vous avez une playlist des vidéos (Explication en Darija arabe marocaine) bien organisée qui traite : Vidéos sur l’HTML5