Les tableaux en HTML

Les tableaux sont des éléments permettant de ranger des informations de façon ordonnés. Par exemple nous allons créer un tableau dans lequel nous allons insérer des matières, des notes et des éléves. Pour chaque matière, chaque éléves aura une note.
Un tableau est donc composé de plusieurs éléments :

• Le tableau en lui-même : il est déclaré avec la balise
  et

Les lignes du tableau : Elles sont déclarées avec la balise et

Les cellules du tableau : Ce sont les cases à l'intérieur des lignes. Elle sont déclarées avec la balise et

Reprenons notre exemple précédent et commençons par créer notre tableau. Vous pouvez si vous le souhaitez recopier le code suivant :

	Mathématique	Français	Histoire-Géo
Pierre	12	5	18
Paul	14	16	8

	Mathématique	Français	Histoire-Géo
Pierre	12	5	18
Paul	14	16	8

Que fait notre code ici ?
La balise
permet de déclarer notre tableau. Vous pouvez remarquer que tous le code du tableau se place entre les balise et . Maintenant, on va construire la première ligne du tableau grâce à la balise et dans laquelle on va placer plusieurs cellules qui vont être les balises et . Dans cette première, on inscrit les matières. Une fois la première ligne, construite, on va construire la deuxième ligne du tableau avec la balise et . Cette fois dans les cellules que l'on va construire avec les balises et , on va insérer les élèves ainsi que les notes de ces élèves. Et vous continue comme ça tant que vous le voulez. Les bordures
Pour mettre une bordure à votre tableau, vous devez rajouter l'attribut border à la balise
. Exemple . Ici, nous ajoutons une bordure de 3 pixels à notre tableau. Ajoutons cette bordure au tableau précédent, regardons l'évolution du tableau :

	Mathématique	Français	Histoire-Géo
Pierre	12	5	18
Paul	14	16	8

C'est tout de même mieux ? N'est-ce pas ? :-)
Vous pouvez aussi si vous le souhaitez changer la couleur de la bordure en associant un nouvel attribut à la balise
. Exemple : La taille du tableau et des cellules : Les tableaux et les cellules peuvent se mesurer en pixel noté px ou en pourcentage noté %. Les pixels ou les pourcentages vont correspondre à la taille de votre tableau sur votre écran. Par exemple, si je veux faire un tableau qui entre sur tout l'écran, je vais mettre la taille du tableau à 90 % mais je peux faire aussi un tableau de 200 px. La largeur d'un tableau se définit avec l'attribut "width" de la balise Exemple : Les 2 exemples suivants vous montre le tableau avec une largeur de 90 % et une largeur de 200 px

	Mathématique	Français	Histoire-Géo
Pierre	12	5	18
Paul	14	16	8

OU

	Mathématique	Français	Histoire-Géo
Pierre	12	5	18
Paul	14	16	8

Automatiquement, le navigateur adopte le tableau au dimension demandée.
Vous pouvez, bien entendu, modifier la hauteur du tableau avec l'attribut "height". Tout ce qu'on vient de voir pour le tableau s'adapte aussi pour les lignes et les cellules du tableau.
D'autres attribut pour les tablaux :
L'attribut cellpading : définit l'espace en pixel entre le bord d'une celulle et son contenu
L'attribut cellspacing : définit l'espace entre les celulles du tableau
L'attribut colspan : permet de faire fusionner des celulles d'une même ligne. Il faut y préciser le nombre de celulles à fusionner.
L'attribut rowspan: permet de faire fusionner des cellules d'une même colonne. Il faut y préciser le nombre de celulles.
L'attribut align : précise l'alignement sur un axe horizontal du tableau ou du contenu de la celulle. (valeur possible : "left" par défaut, "right", "center").
L'attribut valign : précise l'alignement du contenu des celulles sur un axe vertical. (valeur possible : "middle", "bottom", "top").