11 - Gestion des tableaux en HTML

⏪

⏬

⏩

1 - création

2 - css

Cette page est un vieux truc que je n'ai pas encore intégré réellement au site actuel.

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.

MODE COURS (cacher les questions)

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 :

<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 :

<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 :

<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:

<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.

<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.

Nom	Int. R	Int. G	Int. B	Hexa
black	0	0	0	#000000
gray	128	128	128	#808080
silver	192	192	192	#C0C0C0
white	255	255	255	#FFFFFF
red	255	0	0	#FF0000
maroon	128	0	0	#800000
lime	0	255	0	#00FF00
green	0	128	0	#008000
blue	0	0	255	#0000FF
navy	0	0	128	#000080
aqua	0	255	255	#00FFFF
teal	0	128	128	#008080
fuchsia	255	0	255	#FF00FF
purple	128	0	128	#800080
yellow	255	255	0	#FFFF00
olive	128	128	0	#808000

2 - CSS des tableaux

⇩ ⇧ ⤊

A faire !

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

⏪

⏫

⏩