Comment créer une alternance des couleurs de fond dans les lignes de table avec css

<

Contenu

  • Instructions
  • Conseils & avertissements
  • ressources
  • div itemprop="description" class="intro marginTop" data-module="article-intro">

    Dans les grandes tables, il est souvent une aide à la lecture d`avoir une alternance des couleurs d`arrière-plan pour chaque autre ligne de la table. Il peut aider les lecteurs à suivre des lignes à travers la table. Il est facile à mettre en œuvre avec CSS. Voici comment.

    Choses que vous devez

    • connaissances HTML de base
    • connaissances CSS Basic
    • éditeur HTML

    Instructions

    1. 1
      Une table avec des couleurs alternées sur les lignes

      Voici un tableau simple avec une alternance de lignes grises et blanches. Cette technique fonctionne pour tout système de couleur ou une table de taille.

    2. 2

      Construire la table en utilisant vos HTML outils de construction table normale.

    3. 3



      Dans la feuille de style, créer une classe qui peut être appliquée à TR (tableau rangée) éléments en alternance. Voici un exemple:
      .rowColor {

      background: # CCCCCC-

      }

    4. 4
      Utilisez la classe sur les éléments TR

      Dans le HTML, ajouter la classe à des rangées alternées dans votre table. Appliquez-le à l`élément TR. Voir l`image par exemple.

    5. 5

      Si vous souhaitez avoir une couleur différente pour la ligne de la table qui contient les rubriques, vous pouvez créer une nouvelle classe ou d`une règle id dans votre feuille de style qui ne fera que d`appliquer une couleur de fond aux éléments TH.

    Conseils & Avertissements

    • Le tableau illustré ci-dessus utilise le "border-collapse: collapse" règle pour supprimer l`espace vide entre les bordures de tableau.

    Ressources

    AUTRES

    » » » » Comment créer une alternance des couleurs de fond dans les lignes de table avec css