Tableaux HTML

Identification

Infoforall

11 - Gestion des tableaux en HTML


Les tableaux, c'est facile mais c'est long à coder.

Par contre, c'est clairement la meilleur façon de fournir un ensemble ordonné de données.

1 - Création des tableaux

Commençons par la balise-conteneur, celle qui englobe l'ensemble : la balise table

1 2 3
<table> contenu du tableau à placer ici. </table>

Dans cette balise, nous allons créer des lignes. La balise qui désigne la ligne est la balise "table row" (rangée) tr

Pour créer un tableau à trois lignes :

1 2 3 4 5
<table> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table>

Il reste encore à définir le contenu de chaque ligne.

Le contenu (data) des cellules est défini par l'utilisation des balises "table data" td.

Si on veut 4 colonnes, on aura ainsi :

1 2 3 4 5
<table> <tr> <td>L1 C1</td> <td>L1 C2</td> <td>L1 C3</td> <td>L1 C4</td> <tr> <td>L2 C1</td> <td>L2 C2</td> <td>L2 C3</td> <td>L2 C4</td> <tr> <td>L3 C1</td> <td>L3 C2</td> <td>L3 C3</td> <td>L3 C4</td> </table>

Pour plus de clarté, on pourra écrire plutôt les tableaux sous cette forme :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<table> <tr> <td>L1 C1</td> <td>L1 C2</td> <td>L1 C3</td> <td>L1 C4</td> </tr> <tr> <td>L2 C1</td> <td>L2 C2</td> <td>L2 C3</td> <td>L2 C4</td> </tr> <tr> <td>L3 C1</td> <td>L3 C2</td> <td>L3 C3</td> <td>L3 C4</td> </tr> </table>

Et ça donne ceci :

L1 C1 L1 C2 L1 C3 L1 C4
L2 C1 L2 C2 L2 C3 L2 C4
L3 C1 L3 C2 L3 C3 L3 C4

01° Créer un tableau de cinq lignes sur 4 colonnes qui ressemble ceci:

Masse m(kg) Age (années) Durée (s) Catégorie
78 32 12.3 Amateur
65 22 11.2 Amateur
82 28 10.3 Pro A
75 25 10.2 Pro B

Si on réduit la taille de l'écran, les tableaux ont la facheuse tendance à prendre plus de place que le conteneur qu'on leur donne... Pour palier à cette inconvénient, on code souvent le tableau dans une div "conteneur" à laquelle on attribue une propriété CSS directement dans le HTML de façon à l'empécher de dépasser la taille imposée par le contenant global.

En réalité, il faudra taper ceci si vous voulez éviter les problèmes de tableaux qui cassent toutes votre belle présentation sur un petit écran:

1 2 3 4 5 6 7
<div style="overflow-x:auto;"> <table> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> </table> </div>

02° Créer un tableau comprenant des contenus assez large de façon à ne pas pouvoir tenir sur une ligne lorsque l'écran est réduit. Utiliser ou non le style proposé ci-dessus. Vous devriez voir clairement la différence.

Dernière remarque : on veut parfois gérer le CSS de la première ligne différemment des autres : pour cela, on peut insérer une balise précisant que la première ligne est composé de l'en-tête du tableau, le header. Et la balise se nomme justement th pour table header. C'est bien fait, non ?

La balise th permet en plus d'indiquer au navigateur la nature des éléments présents en colonne dans votre tableau. Cela rajoute de la sémantique en gros.

1 2 3 4 5 6 7
<div style="overflow-x:auto;"> <table> <tr> <th>en-tête</th> <th>en-tête</th> <th>en-tête</th> <th>en-tête</th> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> </table> </div>

03° Créer un tableau dont les en-têtes sont R, G, B, Couleur réelle.

La ligne suivante devra contenir la valeur de l'intensité et la dernière case devra avoir le fond coloré correspondant à la bonne combinaison.

NomInt. RInt. GInt. BExempleHexa
black000#000000
gray128128128#808080
silver192192192#C0C0C0
white255255255#FFFFFF
red25500#FF0000
maroon12800#800000
lime02550#00FF00
green01280#008000
blue00255#0000FF
navy00128#000080
aqua0255255#00FFFF
teal0128128#008080
fuchsia2550255#FF00FF
purple1280128#800080
yellow2552550#FFFF00
olive1281280#808000

2 - CSS des tableaux

A faire !

C'est tout pour les tableaux. C'est surtout une habitude à prendre. Si les tableaux sont très longs, dites vous bien qu'il s'agit certainement d'un tableau généré par un programme et non pas un tableau tapé à la main comme vous venez de le faire !

Activité publiée le 29 09 2019
Dernière modification : 29 09 2019
Auteur : ows. h.