Faire le quizz link W3C open

Les tableaux en HTML et en CSS

#1 Créer un tableau open

Vous avez besoin d'une paire de balises table pour délimiter le tableau. En fait cet élément table va servir de conteneur pour tous ce que l'on va mettre dans 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.

Tester le code

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.

Tester le code

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

Tester le code

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

Ajouter une colonne
Tester le code

Vous pouvez supprimer l'espace entre les bordures.

Tableau avec border collapse
Tester le code

#2 Mettre un nom sur chaque colonnes open

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.

Tester le code

L'intérêt c'est que vous pouvez facilement styler différemment les th et les td étant donné que vous pouvez les cibler séparément.

#3 Mettre une légende au tableau open

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.

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.

Tester le code

#4 Structurer le tableau open

Nous avons à disposition des éléments spécifiques thead, tbody, tfoot qui peuvent nous aider à structurer le tableau en différentes zones. Le but est de pourvoir accéder facilement à ces zones que ce soit en CSS ou avec des langages de script. Y accéder nous permettra soit de styler le contenu par zone (CSS) soit de le manipuler par zone (JavaScript).

  1. Ci-dessous vous pouvez voir les éléments thead et tfoot qui peuvent vous servir à regrouper une zone respectivement en haut et en bas du tableau. Vous pouvez mettre ou ne pas mettre cet élément c'est pour cette raison que dans le code ci-dessous j'ai mis 0 ou 1 thead en commentaire.
  2. Vous pouvez voir également l'élément tbody qui peut vous servir à créer plusieurs zones dans le tableau. Lorsqu'il n' a qu'une zone l'élément tbody n'est pas indispensable mais certains codeurs le mette quand même. Ne soyez donc pas étonné de le rencontrez aussi dans ce cas.

Ci-dessous un exemple d'utilisation de plusieurs tbody dans lequel on va styler de façon spécifique les descendants de rang pair ou impair. Ceci va nous permettre de créer des groupes de lignes avec des couleurs de background différentes.

Tableau avec plusieurs zone tbody
Tester le code

Ci-dessous un exemple dans lequel on utilise thead, tbody et tfoot.

Tableau avec un tfoot
Tester le code

#5 Styler les lignes ou les colonnes paires et impaires open

Avec CSS vous pouvez améliorer la lisibilité de votre tableau en mettant des règles spécifiques qui ciblent les lignes paires et impaires de manière à changer la couleur du background à chaque ligne.

Tableau avec couleur différentes sur lignes
Tester le code

Vous pouvez faire la même chose que sur le tableau ci-dessus mais cette fois vous le faites sur les colonnes paires et impaires.

Tableau avec couleur différentes sur colonnes
Tester le code

#6 Étendre une cellule open

É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. Ci-dessous avec le <td colspan='2'> j'étends la cellule sur deux colonnes. Ca veut dire que la cellule compte pour deux cellules. Il faut bien sur que ce soit cohérent avec le nombre de cellules (donc de colonnes) des autres lignes du tableau. Sinon vous n'aurez pas une structure de tableau cohérente.

Un colspan deux colonnes
Tester le code

É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. Ca veut dire ici aussi que la cellule compte pour deux cellules mais cette fois ci c'est dans la ligne qui suit qu'il faudra compter la cellule.

Un rowspan deux lignes
Tester le code

Documentation HTML 5.2 du W3C