Comment créer des tableaux en HTML5

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

Sommaire

  • Un tableau de base
image0.jpg

La structure de base d'un tableau au format HTML est assez facile à comprendre- vérifier le code qui a créé la table dans l'exemple:

basicTable.html

Un tableau de base

HTML Superheroes

HérosPuissanceNémésis
Le XMLatorConformité aux normesCode de Sloppy Boy
Capitaine CSSSuperlayoutSeigneur Obsolète
Navigateur FemmeMegacompatibilityLaid Monster code

Examinant le code montre qu'une table est tout simplement un jeu de balises soigneusement imbriquées. Le processus de construction d'une table est pas difficile, mais elle exige un peu de réflexion.

  1. Planifiez votre table afin que vous sachiez le nombre de colonnes que vous voulez, et qui lignes ou des colonnes serez manchettes.




    Esquissant votre table sur papier est d'abord une bonne idée, surtout si elle est du tout compliqué.

  2. Commencez la table avec la

    tag.

    La

    paire entoure la totalité de la table.

  3. Créer une ligne de tableau avec le paire.

    Une table est juste une série de lignes. Vous avez besoin du paire pour enfermer chaque ligne de données.

  4. Signifier rubriques avec .

    Souvent, la rangée du haut (et peut-être la gauche, la plupart colonne) contiennent des rubriques. Utilisez le paire pour signifier texte qui doit être traitée comme une cellule de rubrique. Par défaut, ces cellules sont généralement plus audacieux et centrée, mais qui peuvent être modifiés avec CSS.

  5. Spécifiez cellules de données ordinaires avec le paire.

  6. Maintenir le nombre de cellules uniformes dans les rangées.

    Comme vous devenez plus familier avec tables HTML5, vous pouvez trouver des moyens d'étendre une cellule sur plusieurs lignes ou colonnes.

  7. Ajouter CSS au besoin.

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

Bien que les utilisateurs HTML5 ont développé des façons d'utiliser des tableaux à des fins de mise en page, CSS fournit toutes les pages techniques de mise en page dont vous avez besoin, afin d'utiliser les tables HTML5 à leur destination: présenter des données tabulaires.


» » » » Comment créer des tableaux en HTML5