Introduction

Les tableaux sont utilisés pour organiser un grand nombre d’informations de manière plus claire que des listes, car ils permettent d’afficher des lignes et des colonnes.

Balises et attributs

Le tableau est défini par la balise <table>

Il est définit ligne par ligne grâce aux balises <tr>

Chaque cellule peut être encadrée par <th> (table header=en tête du tableau) pour les cellules en-tête, ou par <td> (table data=données du tableau) pour les cellules de valeur.

 

Les bordures des tableaux sont définis soit directement en HTML en mettant « border=" " » dans la balise <table>, ou dans une feuille de style CSS en utilisant border: 1px solid black; et border-collapse: collapse; pour que les cellules soient collées entre elles.

On peut séparer le tableau en différentes parties (En-tête, corps, pied du tableau), comme page en HTML, grâce aux balises <thead> <tbody> et <tfoot>

On peut donner un titre au tableau grâce à la balise <caption>.

Il est possible de fusionner les cellules horizontalement avec colspan et les colonnes verticalement avec rowspan. On peut fusionner des colonnes ou des lignes entières avec ces attributs.

Bgcolor peut modifier la couleur de fond d’une cellule.

Width  et height (à placer dans les cellules et non dans le tableau) pour les tailles des cellules.

 

Bien plus d’attributs sont disponibles en HTML, mais il faut savoir qu’avec la dernière version d’HTML, HTML5, bon nombre d’attributs ne fonctionnent plus, tel que bordecolor ou cellspacing qui permettaient respectivement de colorer les bordures ou d’espacer les cellules. Il faudra maintenant utiliser du CSS pour ce faire.



Voici une série de 8 tableaux (code html et rendu par un navigateur)