Comment construire des tableaux en HTML5 - dummies

Parfois, votre page Web contient les données les mieux présentées dans un tableau. Vous pouvez utiliser le système de tables complet de HTML5 pour créer des tableaux comme celui de cet exemple:

La structure de base d'une table au format HTML est raisonnablement facile à comprendre; consultez le code qui a créé la table dans l'exemple:

basicTable. table html, td, th {border: 1px noir uni;}

Une table de base







HTML Super-héros


 Héros 
 Puissance 
 Némésis 


 Le XMLateur 
 Conformité aux normes 
 Sloppy Code Boy 


 Capitaine CSS 
 Superposition > Lord déprécié 
 Navigateur Femme 


 Mégacompatibilité 
 Monstre du code laid 
 L'examen du code montre qu'une table est simplement un ensemble de balises soigneusement imbriquées. Le processus de construction d'une table n'est pas difficile, mais il nécessite une certaine prévoyance. 

Planifiez votre table pour connaître le nombre de colonnes souhaitées et les lignes ou colonnes à afficher.

1. Dessiner d'abord votre table sur papier est une bonne idée, surtout si c'est compliqué.

   Commencez la table avec la balise

2. .

   La paire

   entoure toute la table.

   Créez une ligne de table avec la paire

3. .

   Une table est juste une série de lignes. Vous avez besoin de la paire

   pour entourer chaque ligne de données. Signifiez les en-têtes avec

4. . Souvent, la ligne du haut (et peut-être la colonne la plus à gauche) contient des en-têtes. Utilisez la paire

   pour indiquer un texte qui doit être traité comme une cellule d'en-tête. Par défaut, ces cellules sont généralement plus audacieuses et centrées, mais cela peut être changé avec CSS. Spécifiez les cellules de données ordinaires avec la paire

5. . Conservez le nombre de cellules cohérentes sur les lignes.

6. À mesure que vous vous familiarisez avec les tables HTML5, vous pouvez trouver des moyens d'étendre une cellule sur plusieurs lignes ou colonnes.

   Ajoutez du CSS si nécessaire.

7. Les tableaux ont un format de base, que vous pouvez modifier avec CSS - pour ajouter des bordures, par exemple.

   Bien que les utilisateurs HTML5 aient développé des méthodes d'utilisation des tableaux à des fins de mise en page, CSS fournit toutes les techniques de mise en page dont vous avez besoin. Utilisez donc les tableaux HTML5 pour leur objectif: présenter des données tabulaires.