Exercices les tableaux en HTML : Série 01

Exercices les tableaux en HTML : Série 01

  1. Objectifs

    • Utiliser les balises caption, thead tbody et tfoot pour mieux structurer un tableau html.
    • ِEtre capable de fusionner les cellules d’un tableau html en utilisant les propriétés “colspan” et “rowspan”.
  2. Exercice: 1

    1. Énoncé
      • Réaliser le tableau ci-dessous avec les contraintes suivantes:
        • celui-ci doit être centré dans la page et occuper le 40% de la largeur de la fenêtre du navigateur
        • largeur des bordures: 6 pixels (attribut CELLSPACING=);
        • épaisseur de l’ombrage: 2 pixels (attribut BORDER=);
        • détachement du texte par rapport aux bords: 4 pixels (attribut CELLPADDING=)
        • La première ligne est l’entête du tableau avec une couleur d’arrière plan “silver”
        • Le titre du tableau est “Exercice 01 Série 01 les tableaux en HTML
        • Réaliser l’alignement du texte suivant les données des cellules
        • Placer une légende au bas du tableau
        • les balises </TR>, </TH>, </TD> sont facultatives, mais il vaut mieux les mettre

    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la Solution !




  3. Exercice: 2

    1. Énoncé
      • Dans un répertoire dédié aux exercices , créer une page HTML nommée tableau.html utilisant les nouveaux éléments cités dans le cours.
      • Créer le tableau suivant en utilisant les propriétés de fusion "colspan" et "rowspan":
      • HTML TP 032018

    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la Solution !
  4. Exercice: 3

    1. Énoncé
      • Utiliser les éléments : caption, thead tbody et tfoot pour afficher les données dans un tableau structuré de la façon suivante :
      • HTML TP 032018

    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la Solution !
  5. Exercice: 4

    1. Énoncé
      • Utiliser les éléments : caption, thead tbody et tfoot pour afficher les données dans un tableau structuré de la façon suivante :
      • Exercices HTML

      • Vous pouvez télécharger l’image d’ici
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la Solution !
  6. Exercice: 5

    1. Énoncé
      • La figure ci-dessous, représente un planning d’une professeure de langues. Le vendredi, elle a une nouvelle classe pour l’enseignement du Néerlandais toute la journée, mais elle enseigne aussi l’Allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.
      • Exercices HTML

      • Recréez le tableau en suivant les étapes ci-dessous.
        1. Ajoutez un élément <colgroup>  au début du tableau, juste en dessous de la balise <table>,dans lequel vous pouvez ajouter vos éléments <col> (voir les étapes restantes ci-dessous).
        2. Les deux premières colonnes doivent rester sans style.
        3. Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut style est background-color:#97DB9A;
        4. Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut style est width: 42px;
        5. Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut style est background-color: #97DB9A;
        6. Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c’est une journée spéciale et qu’elle enseigne à une nouvelle classe. Les valeurs de votre attribut style sont background-color:#DCC48E; border:4px solid #C1437A;
        7. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut style est width: 42px;
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la Solution !



Abonnez vous à notre chaîne YouTube gratuitement