Insérez des données dans un tableau !

Tableaux de données

Il arrive souvent en informatique que l'on soit condamné à gérer des données dans un tableau. Que vous deviez créer une page web présentant les ventes de votre entreprise ou les coordonnées de vos différents clients, vous n'échapperez pas au tableau et devrez le construire en HTML. Cette section vous propose d'apprendre à réaliser des tableaux constitués d'autant de lignes et de colonnes que désiré, d'un en-tête, d'une légende, d'un résumé, de cellules fusionnées, de tableaux imbriqués. Pour y parvenir, nous reprendrons le site de Marc que vous venez de réaliser et remplacerons la liste des villes que Marc a traversées par un tableau fournissant des statistiques sur ces villes:

Avant de modifier le site de Marc, mettons au point ce tableau dans un fichier HTML séparé. Nous avons commencé à le construire: les en-têtes et les deux premières lignes du tableau sont disponibles dans le fichier «tableau.html» du dossier journal.zip:

Comme vous pouvez le constater avec l'exemple ci-dessus, un tableau est un élément <table>, constitué de lignes <tr> (table row), elles-mêmes formées de cellules d'en-tête <th> (table head) ou de cellules normales <td> (table data). Remarquons que les colonnes sont implicitement définies par chaque <td>. Dès lors, il est important que chaque ligne comporte le même nombre de cellules faute de quoi le tableau sera destructuré et incompréhensible:

Vous pouvez d'ores et déjà améliorer ce tableau en lui ajoutant une légende et un résumé qui synthétise son contenu:

Notez qu'un résumé ne s'affiche pas sur la page mais peut être lu par des lecteurs d'écran vocaux utilisés par des personnes mal voyantes.