Cette partie de cours risque fort de ne pas plaire à tout le monde.
En effet un tableau en html est assez difficile à comprendre... tout du moins au début. J'en ai moi-même compris certaine subtilité il y a peu. Avant tout, il faut savoir qu'il n'y a pas une seule manière de concevoir un tableau, dans certaines conditions une simple structure de cases vous suffira (lignes + colonnes), dans d'autres conditions il vous faudra utiliser un en-tête, un corps, et un pied de tableau.
Pour cette raison je vais diviser cette partie en 3 sous-parties : les tableaux simples, les tableaux complets et les subtilités d'organisation.

Pourquoi tu nous fais voir ça, on va pas tous construire des tableaux pour nos sites ! Oo

Ouiiii ! Je me doute bien que construite des tableaux, diagrammes, proposer des statistiques etc... ne sera pas l'objet principal systématique de votre site Internet. Cependant un point important à voir, c'est que le système de tableau a énormément été utilisé par les "vieux codeurs". J'entends par là les personnes qui codaient avant l'apparition des feuilles de style CSS. En effet pour organiser un site sur ses différentes parties (header, menu, index, contenu, pied etc...) rien ne valait un bon tableau bien organisé. Mais surtout retirez-vous de la tête qu'un tableau contient forcément des lignes noires formant des cases ! Certes c'est l'idée, mais vous verrez à quel point un tableau peut être transparent...

Bref ! Passons au code maintenant !

Les tableaux simples

Voici un code qui vous offre la base structurelle d'un tableau de deux colonnes et deux lignes valide on ne peut plus simple.

Oui oui oui je sais ! Je vous ai compliqué la tâche en vous présentant un code fourni d'attribut style. Le but est de vous faire entrer la structure du html combiné au CSS basique. En reconnaissant le nom des couleurs en anglais et en les attribuants aux bons éléments il vous sera simple de comprendre comment fonctionne un tableau ! (qui plus est vous pourrez aussi travailler le langage CSS sans vous en rendre compte :p).

Bien entendu je ne vais pas vous abandonner sur ce code. Ceux qui auront cherché par eux-mêmes à comprendre la structure, je les félicite, ceux qui n'aurait pas trouvé rien de bien grave, c'est une structure qui n'est pas forcément intuitive, il faut bien se l'avouer !

Cette partie du code annonce l'ouverture et le fermeture du tableau. L'attribut style donne au cadre du tableau (border) une couleur rouge (red) de 1px d'épaisseur et de type solid (linéaire, à différencier des pointillés et autres formes de bordure). Je vous précise aussi que table est de type block (plus précisément de type table, mais à notre niveau ça se ressemble)... impossible donc de mettre deux tableaux sur la même ligne sans passer par les CSS (oui nous le verrons plus tard).

Celle-ci annonce l'ouverture d'une ligne dans un tableau. À chaque fois que vous ouvrez un tr vous annoncez une nouvelle ligne. Lorsque vous avez fini de remplir une ligne il vous suffit de la fermer avec la balise de fermeture. Ici l'attribut style offre à toute la ligne (puisque positionnée sur le tr) un fond de couleur (background-color) bleu.

Cette partie de code forme une colonne dans le tableau. Chaque colonne dans une ligne forme donc logiquement une case ! Ici l'attribut style donne une couleur de texte (color) orange uniquement sur le contenu de cette colonne sur cette ligne ! En effet vous voyez bien que chaque colonne est créée dans une ligne, l'intersection de cette colonne avec une ligne forme une case.

Voilà nous avons fait le tour du contenu de code pour un tableau simple, voici l'essentiel à retenir :

- La balise d'annonce d'un tableau est table
- La balise d'annonce d'une ligne est tr
- La balise d'annonce d'une colonne est td
- Une ligne et une colonne forment donc une case de contenu
- Vous ne pouvez placer du contenu dans un tableau que dans une case (entre les balises td donc !)

Lorsque vous avez plusieurs lignes et colonnes, vous vous rendrez rapidement compte qu'avec ce type de code il vous faudra autant de colonne sur chaque ligne. Bien entendu il est possible de pallier à ce problème grâce à un attribut bien utile (que l'on verra par le suite).

Les tableaux riches

Je vais vous donner un code qui peut faire peur... mais en détaillant bien vous verrez que ce n'est pas bien compliqué.
Petite note de détail ici, nous allons commencer à annoter nos codes afin de facilement nous y retrouver, vous verrez que sous Notepad++ les annotations prennent une couleur bien distincte afin de rapidement les repérer ; voici une annotation :

Une annotation n'apparait pas à l'écran du visiteur, en effet ce n'est qu'une simple marque, note, que le codeur fait pour s'y retrouver plus facilement dans ses codes.

Passons maintenant au code d'un tableau élaboré :

En voilà le résultat :

Encore une fois, de nombreuses explications s'imposent, et pas des moindres.
Revenons précisément sur les trois attributs de la balise table, width nous donne la largeur totale du tableau. Ici le tableau prend 100% de la largeur de son conteneur, à savoir l'espace où j'écris actuellement. Pour l'attribut border il s'agit de signaler une bordure sur tout le tableau, ici de 1px.
Par la suite nous verrons que nous passerons par les CSS pour produire exactement le même effet, mais il est toujours bon de savoir comment procéder directement en HTML. (pour des tests ou de débogage... ou au moins pour le savoir :p)
L'attribut summary quant à lui est très important, il résumé l'utilité du tableau. Cet attribut permet aux lecteurs d'écran de comprendre qu'ils sont dans un tableau avec des données, et de les lire comme telles. Lorsque vous faite un simple tableau de mise en page (pas pour structurer des données donc), vous devez ne pas renseigner cet attribut.

Comme l'indique si bien l'annotation, ceci est le titre de votre tableau, ce titre va donc se placer automatiquement au dessus de la première ligne et se centrer sur la largeur que couvre le tableau.

Ici nous avons plusieurs points à voir, tout d'abord les balises thead, il s'agit ici de signaler un en-tête au tableau, cela aura pour effet d'attribuer des titres à chaque colonne, colonnes signalées ici par une balise th.
Je reprends plus lentement... thead annonce une en-tête, dans cette en-tête vous trouverez comme pour un tableau classique, une ligne, annoncée par la balise tr, puis dans cette ligne nous annonçons des cellules, non plus avec td mais avec th, pourquoi ?
Simplement parce que th représente un titre de colonne, le petit plus est qu'il bénéficie d'une mise en forme déjà prête, en effet les titres se mettent en gras tout seul... magique non !?

Continuons notre avancée, vous remarquez de suite après qu'on place le pied du tableau après la tête... on oublierait pas le corps d'abord ?!
Eh bien non ! Il faut toujours placer le pied d'un tableau avant le corps !

Aucun changement donc côté organisation, si ce n'est que thead devient très logiquement tfoot.
Cet partie du code va donc visuellement se placer en pied de tableau après ce qui se trouvera dans le corps. Le contenu du corps nous l'avons déjà vu dans la partie précédente, mais celui-ci se voit agrémenté d'une balise supplémentaire :

Voilà donc pour les tableaux complexes. Ici il s'agit vraiment d'utiliser les tableaux dans leur usage premier, à savoir organiser un contenu textuel important pour en accroitre la compréhension.

À retenir :
- De nouvelles balises d'encadrement organisent le contenu du tableau par Tête (thead), Pied (tfoot), et Corps (tbody) (dans cet ordre là)
- La balise th dans une importance de titre au contenu d'une case.
- caption permet de donner un titre formaté au tableau
- ne pas oublier l'attribut summary pour résumer les données du tableau

Les subtilités

Vous voyez à quel point l'apprentissage de cette structure n'est pas évidente (et son enseignement non plus d'ailleurs). Ces quelques subtilités seront certainement de trop à assimiler immédiatement, n'hésitez donc pas à revenir plus tard sur ce cours, lorsque les bases seront devenues instinctives.

Colspan - Rowspan
Je vous parlais d'un attribut qui permet d'offrir à une case la largeur de deux ou plusieurs cases déjà en place. Voici un exemple simple d'un tel tableau :

Pour pouvoir écrire ceci il faut préciser sur la case en question (td) qu'elle doit occuper un certain nombre de cases en largeur (de colonne donc). C'est ici que l'attribut colspan se rend utile. Voici le code que j'ai utilisé (je ne vous fais pas part des styles des bordures) :

Vous noterez l'organisation du code : une ligne pour une ligne de tableau. Mais chacun a sa technique, n'hésitez pas à aérer d'avantage si vous en ressentez le besoin. Une organisation optimisée vous permet une meilleure compréhension de vos codes.

Un attribut de même style existe mais dans l'autre sens, à savoir rowspan qui permet à une case de s'étendre sur plusieurs lignes. Voici un exemple et son code :

Un peu des deux en même temps
Oui bien sûr vous pouvez utiliser les deux en même temps sur une même case pour avoir un résultat de ce type :

Cellspacing
Toute une histoire d'espace !
Vous voyez les espaces entre la bordures globale et la bordure des cases ? Ou encore l'espace entre les cases elles-mêmes ? Si rien n'est signalé, cet espacement est de 2 pixels. Mais il est contrôlable grace à l'attribut cellspacing à placer sur la balise table.

En rajoutant cet attribut et une valeur en pixel vous offrez un espacement aux cases de votre tableau. Ici en plaçant une valeur de 0 j'ai supprimé l'espacement entre les cases du tableau 2. Seules les bordures restent et se collent les unes aux autres (si elles existent bien entendu).

À retenir :
- L'attribut colspan permet d'étendre une case sur plusieurs colonnes, elle se place sur la balise td ou th
- L'attribut rowspan permet d'étendre une case sur plusieurs lignes, elle se place sur la balise td ou th
- L'attribut cellspacing permet de gérer l'espacement entre les cellules de votre tableau, elle se place sur la balise table

Bien bien bien... résumons ! Nous avons vu ensemble la base de composition d'un document HTML, nous avons vu comment créer un lien, insérer une image, combiner les deux, insérer du texte, organiser un tableau... vous commencez à voir le site Internet s'approcher non ?
Avec beaucoup d'imagination on peut déjà concevoir un contenu intéressant (oui car sur un site c'est principalement le contenu qui prime !) et organisé.
Nous avons vu un petit début de CSS grâce à l'attribut style, nous allons donc immédiatement passer à la présentation de ce langage. Certains me diront que c'est un peu trop tôt, mais j'estime que lorsque l'on code il arrive de faire des allers-et-retours entre nos documents HTML et CSS... je veux vous habituer à cela en vous plongeant dans le CSS, maintenant que la base HTML est posée.

Cours précédent : Premier document HTML Cours suivant : Un début de CSS