DEVENIR-WEBMASTER.COM Log In
 19
Faire le quizz link W3C close

Les tableaux en HTML et en CSS

Visiter ma chaine Youtube

# Créer un tableau close

Vous avez besoin d'une paire de balises table pour délimiter le tableau.

Ensuite vous devez délimiter chaque ligne du tableau par une paire de balises tr.

Pour l'instant vous n'avez toujours pas de tableau vous devez encore délimiter chaque cellule du tableau par une paire de balises td.

Donc à minima vous devez écrire toutes ces balises pour avoir une simple cellule de tableau.

Un tableau minimum

Si vous voulez rajouter une ligne il vous suffit de copier et coller les balises ouvrantes et fermantes tr plus ce qu'il y a dedans.

Vous aurez un tableau à deux lignes et à une seule colonne.

Un tableau avec deux lignes

On voit que par défaut il n'y a pas de bordure autours des cellules. Vous devez mettre la bordure en CSS.

La bordure sur le TD

Si maintenant vous voulez une colonne supplémentaire vous devez impérativement créer une cellule de plus dans chaque ligne. Exemple ici.

Ajouter une colonne

Vous pouvez supprimer l'espace entre les bordures.

Tableau avec border collapse

# Mettre un nom sur chaque colonnes close

Vous devez faire une ligne spéciale qui contiendra ces noms et les cellules de cette ligne doivent être créées avec des balises th.

Ajouter un label aux colonnes

L'intérêt c'est que vous pouvez facilement styler différemment les th et les td.

# Mettre une légende au tableau close

Pour mettre une légende vous devez utiliser l'élément caption. Cet élément optionnel si il est présent doit impérativement suivre la balise ouvrante table.

Ajouter une légende

Par défaut la légende est graphiquement positionnée au dessus du tableau. Si vous voulez changer cette disposition il faut avoir recours au CSS et utiliser la propriété caption-side.

Positionner une légende

# Structurer le tableau close

Il peut être utile de structurer le tableau avec des balises spécifiques. Le but est de pourvoir regrouper des zones afin d'y accéder que ce soit en CSS ou avec des langages de script.

Les balises pour structurer un tableau

Un exemple de l'utilisation de plusieurs tbody.

Styler les zones tbody

Un exemple de l'utilisation de tfoot.

# Styler les lignes paires et impaires close

Avec CSS vous pouvez améliorer la lisibilité de votre tableau en mettant des règles spécifiques sur les lignes paires et impaires.

Styler les lignes paires et impaires
Tableau avec couleur différentes sur lignes

ou sur les colonnes paires et impaires.

Styler les colonnes paires et impaires
Tableau avec couleur différentes sur colonnes

# Étendre une cellule close

Étendre une cellule sur plusieurs colonnes

Vous devez préciser sur combien de colonnes va s'étendre la cellule et pour cela vous devez utiliser l'attribut colspan.

Fusionner sur deux colonnes
Un colspan deux colonnes

Attention car si la cellule qui contient le colspan='2' s'étend sur deux colonnes alors il ne faut pas mettre de cellule derrière.

Étendre une cellule sur plusieurs lignes

Vous devez préciser sur combien de lignes va s'étendre la cellule et pour cela vous devez utiliser l'attribut rowspan.

Fusionner sur deux lignes
Un rowspan deux lignes

Attention car si la cellule qui contient le rowspan='2' s'étend sur deux lignes alors la ligne qui suit doit comporter une cellule de moins.

Documentation HTML 5.2 du W3C