Les tableaux en HTML

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 <table> et </table>
●
Les lignes du tableau : Elles sont déclarées avec la balise <tr> et </tr>
●
Les cellules du tableau : Ce sont les cases à l'intérieur des lignes. Elle sont déclarées avec la balise <td> et </td>
Reprenons notre exemple précédent et commençons par créer notre tableau. Vous pouvez si vous le souhaitez recopier le code
suivant :
<table>
<tr>
<td></td>
<td>Mathématique</td>
<td>Français</td>
<td>Histoire-Géo</td>
</tr>
<tr>
<td>Pierre</td>
<td>12</td>
<td>5</td>
<td>18</td>
</tr>
<tr>
<td>Paul</td>
<td>14</td>
<td>16</td>
<td>8</td>
</tr>
</table>
Mathématique Français Histoire-Géo
Pierre 12
5
18
Paul 14
16
8
Que fait notre code ici ?
La balise <table> permet de déclarer notre tableau. Vous pouvez remarquer que tous le code du tableau se place entre les
balise <table> et </table>. Maintenant, on va construire la première ligne du tableau grâce à la balise <tr> et </tr> dans laquelle
on va placer plusieurs cellules qui vont être les balises <td> et </td>. 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 <tr> et </tr>. Cette fois dans les cellules
que l'on va construire avec les balises <td> et </td>, 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 <table>. Exemple <table border="3">.
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
16
8
14
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 <table>.
Exemple : <table border="3" bordercolor="#0000FF">
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 <table>
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
16
8
14
Ou
Mathématique Français Histoire-Géo
Pierre 12
5
18
Paul
16
8
14
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").
●
●
●