Exercice 07 - Création de tableau HTML

Mise en situation

Vous devez, seul, faire la conception d'un tableau HTML sur le sujet que vous voulez, il faut quand même que ce soit des données tabulaires.

Modalités

À faire (étapes)

Effectuez les opérations demandées

  1. Préparation
    • Créer le dossier exer07 dans votre espace de cours.
    • Mettez-y les fichiers de la structure de base d'un site web
    • Ouvrez le fichier de base CSS main.css.
    • Ouvrez le fichier de base HTML index.html.
  2. Dans la partie body , ajoutez la ligne suivante :
    • Code:
      <table>
      ...
      </table>
  3. Sauvegardez le fichier. (CTRL+S)
  4. Faites afficher le fichier «index.html» dans le navigateur.
  5. Dans le fichier main.css, inscrivez les lignes suivantes (remplacez Mon Nom avec votre nom) :
    • Code:
      /* Auteur : Mon Nom */
      table {
          width: 70%;
          margin: 5%;
      }
  6. Faites afficher le fichier index.html dans le navigateur.
  7. Dans le fichier index.html ajoutez dans le corps de votre tableau (table) :
    • Une entête (th) pour votre première ligne
    • Saisir les données de votre tableau dans les lignes et colonnes (tr, td)
      Ces données peuvent être n'importe quoi tant que ce sont des données de type tabulaires (statistiques, monétaires, etc.)
    • Code:
      th{
          border:1px solid black;
          padding: 5px;
          background-color:black;
          color: white;
      }
  8. Créer le caption de votre tableau (caption)
  9. Rédigez le sommaire de votre tableau (summary="")
  10. Dans la feuille de style, le fichier main.css, ajoutez les lignes suivantes :
    • Code:
      td{
          border:2px solid blue;
          padding: 5px;
      }
  11. Affichez à nouveau la page HTML pour voir.
  12. Remettez l'exercice sur Léa dans Exercice 07