Comment créer une table solide en HTML5 - les nuls

Pour cet exercice de construction de table, vous allez tirer quelques données des économistes qui travaillent dur. et les statisticiens du Bureau of Labor Statistics des États-Unis.Sur le site Web, faites défiler vers le bas pour le tableau B-9: Indexes des heures hebdomadaires agrégées et Paie, montré dans cette figure. (Le chiffre sans doute montre minuscule type minuscule, mais il devrait néanmoins vous donner une idée de ce que vous cherchez.)

En examinant le tableau B-9, voici ce que vous voyez:

• La légende en haut est une sorte de couleur rouille et commence par DONNÉES D'ÉTABLISSEMENT Tableau B-9: Index des agrégats … Ce type d'information est juste ce que l'élément de légende est destiné à capturer et à livrer.

• Sous la légende est un ensemble de rubriques - un En d'autres termes, l'en-tête de la table - avec un arrière-plan gris clair et diverses en-têtes de colonnes - à gauche, une liste d'industries. Indice des heures hebdomadaires agrégées et indice des masses salariales hebdomadaires agrégées), chacun avec quatre colonnes de dates et une colonne de pourcentage de variation de février à mars 2013.

• Le corps de la table commence par le texte qui lit Total privé et continue 19 lignes jusqu'à d'autres services, avec des lignes dans la colonne 1 (industrie) alternant entre une couleur de fond blanc et bleu clair.

  Ensuite, les deux ensembles de colonnes indiquent les données pour les heures hebdomadaires agrégées et hebdomadaires, avec cinq colonnes individuelles dans chaque ensemble: mars 2012, janvier à mars 2013 et un pourcentage de variation par rapport au mois précédent (février 2013) au mois actuel (mars 2013).

• Le pied de tableau comprend trois notes de bas de page numérotées de 1 à 3. Le marqueur spécial (p) indique des données préliminaires (c'est-à-dire non définitives).

Voici comment vous construisez une telle table en utilisant les nombres:

1. La légende de la table peut être capturée dans un élément de légende. Vous pouvez utiliser l'élément line break () pour rompre la ligne après ESTABLISHMENT DATA et avant la légende détaillée qui commence Table B-9: Indexes of Aggregate … Utilisez à nouveau l'élément line break pour casser la ligne avant d'indiquer l'échelle indicateur "[2002 = 100]. "

2. Toutes les rubriques devraient être contenues à l'intérieur d'un élément. Vous utilisez l'élément d'en-tête de table ( ) pour chaque cellule d'en-tête, donc il sera centré et en gras à l'intérieur de chaque cellule.

   La cellule Industrie doit prendre un attribut rowspan = "2" afin de remplir toute la hauteur de la zone d'en-tête à gauche, et les cellules Index of … doivent chacune prendre un attribut colspan = "5" pour que chacune couvre les quatre Les colonnes date et pourcentage changent pour sa catégorie.Ces trois éléments apparaîtront dans la première ligne d'en-tête du tableau, chacun dans sa propre cellule ( ).

   Les dix éléments restants apparaissent dans la deuxième ligne d'en-tête du tableau dans leur ordre d'apparition dans le tableau. Chacun de ces dix éléments apparaît également dans sa propre cellule ( ). Définir des largeurs pour l'industrie et diverses colonnes de date et de pourcentage dans le CSS pour les largeurs des ensembles d'en-têtes pour tout le reste de la table.

3. Dans le corps du tableau, une ligne correspond à chaque ligne de données de la source en ligne, en commençant par le nom de l'industrie à gauche puis en continuant avec les valeurs numériques des dates et des pourcentages dans chacun des deux groupes à droite. Cette tâche implique 11 éléments de données table ( ) pour chaque ligne affichée dans cette table. Très simple, très mécanique, très facile.

4. Les entrées du pied de tableau apparaissent toutes dans une section de pied de page, qui devrait prendre un attribut colspan = "11" pour traverser toute la largeur de la table La légende Footnotes peut apparaître à l'intérieur d'une seule ligne de table ( ) et des données de table ( ), cette dernière étant mise en gras.

   (N'utilisez pas ou le texte de la note de bas de page sera centré).

En utilisant ces techniques, vous pouvez créer une table solide et attrayante pour la présentation de données numériques et textuelles. et réfléchissez à ce que vous voulez que vos utilisateurs voient, vous pouvez construire une structure préliminaire en HTML, puis vous pouvez commencer à organiser les cellules et les peaufiner jusqu'à ce que vous les obteniez.