Utilisation des tables (html)

introduction

Les tables sont extrêmement pratique en HTML et je m'en sers couramment pour coder mes designs. Cependant, avant de coder des designs en tables, il faut comprendre les tables.

le fonctionnement

Pour construire une table, vous aurez besoin de trois balises différentes: table, tr et td. Voici leur signification:

table: Cette balise est la base de la table. Elle vous permet de créer un tableau à x colonnes et x rangées.

tr: Cette balise vous permet de créer une ou plusieurs rangées dans votre table.

td: Cette balise vous permet de créer une ou plusieurs cellules (colonnes) dans votre rangée.

Il faut toujours procéder dans cet ordre:

01. Ouvrir la balise table.
02. Ouvrir la balise tr pour débuter une nouvelle rangée.
03. Ouvrir la base td pour créer une nouvelle cellule.
04. Placer le contenu à la suite de l'ouverture de la balise td.
05. Fermer la balise td.
06. Répéter les étapes 03 à 05 pour le nombre de cellules (colonnes) désirées sur la rangée.
07. Fermer la balise tr pour fermer la rangée.
08. Répéter les étapes 02 à 07 pour le nombre de rangées désirées.
09. Fermer la balise table.

Voici un exemple d'une table d'une colonne, deux rangées, accompagnée de son code.


Voici un exemple d'une table de deux colonnes, une rangée, accompagnée de son code.


Voici un exemple d'une table de deux colonnes,deux rangée, accompagnée de son code.


Il est aussi possible de fusionner des cellules sur une même colonne ou sur une même rangée. Il faut alors utiliser les paramètres colspan et rowspan.

Voici un exemple d'une table avec deux cellules fusionnées dans une même rangée, accompagnée de son code.


Voici un exemple d'une table avec deux cellules fusionnées dans deux rangées différentes, accompagnée de son code.


Les exemples ci-haut montrent les codes de bases des tables. Il est possible d'y insérer plusieurs paramètres pour personnaliser la table. En voici les principaux.