HTML (Tableau) : Exercices corrigés

  1. Créer une table simple avec 3 colonnes et 2 lignes :
<table>
  <tr>
    <th>Colonne 1</th>
    <th>Colonne 2</th>
    <th>Colonne 3</th>
  </tr>
  <tr>
    <td>Ligne 1, Colonne 1</td>
    <td>Ligne 1, Colonne 2</td>
    <td>Ligne 1, Colonne 3</td>
  </tr>
  <tr>
    <td>Ligne 2, Colonne 1</td>
    <td>Ligne 2, Colonne 2</td>
    <td>Ligne 2, Colonne 3</td>
  </tr>
</table>
  1. Créer une table avec une colonne pour les noms et une colonne pour les adresses e-mail :
<table>
  <tr>
    <th>Nom</th>
    <th>Adresse email</th>
  </tr>
  <tr>
    <td>Abdelhak Fadili</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Abdelhak Fadili</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Abdelhak Fadili</td>
    <td>[email protected]</td>
  </tr>
</table>
  1. Créer une table pour afficher les résultats d’un examen avec des colonnes pour le nom de l’étudiant, la note sur 20 et la note en lettre :
<table>
  <tr>
    <th>Nom de l'étudiant</th>
    <th>Note sur 100</th>
    <th>Note en lettre</th>
  </tr>
  <tr>
    <td>Salma dddd</td>
    <td>16</td>
    <td>B</td>
  </tr>
  <tr>
    <td>Ali yyy</td>
    <td>19</td>
    <td>A</td>
  </tr>
  <tr>
    <td>Amine GGG</td>
    <td>12</td>
    <td>D</td>
  </tr>
</table>
  1. Créer une table avec des colonnes pour les noms, les adresses et les numéros de téléphone :
<table>
  <tr>
    <th>Nom</th>
    <th>Adresse</th>
    <th>Numéro de téléphone</th>
  </tr>
  <tr>
    <td>ABDO ABDO</td>
    <td>123 Rue mmm bd lll casa</td>
    <td>(212) 123-4567</td>
  </tr>
  <tr>
    <td>FADI FADI</td>
    <td>456 Avenue Secondaire, Québec, QC G1B 2B2</td>
    <td>(212) 987-1234</td>
  </tr>
  <tr>
    <td>Amine AMI</td>
    <td>314 Rue KAMAL, La villette, CASA</td>
    <td>(212) 456-9990</td>
  </tr>
</table>
  1. Créer une table pour afficher les horaires d’ouverture d’un magasin avec des colonnes pour les jours de la semaine et les heures d’ouverture et de fermeture :
<table>
  <tr>
    <th>Le Jour</th>
    <th>Heures d'ouverture</th>
    <th>Heures de fermeture</th>
  </tr>
  <tr>
    <td>Lundi</td>
    <td>9h00</td>
    <td>18h00</td>
  </tr>
  <tr>
    <td>Mardi</td>
    <td>9h00</td>
    <td>18h00</td>
  </tr>
  <tr>
    <td>Mercredi</td>
    <td>9h00</td>
    <td>19h00</td>
  </tr>
  <tr>
    <td>Jeudi</td>
    <td>9h00</td>
    <td>18h00</td>
  </tr>
  <tr>
    <td>Vendredi</td>
    <td>9h00</td>
    <td>18h00</td>
  </tr>
  <tr>
    <td>Samedi</td>
    <td>10h00</td>
    <td>18h00</td>
  </tr>
  <tr>
    <td>Dimanche</td>
    <td>10h00</td>
    <td>18h00</td>
  </tr>
</table>
  1. Créer une table avec une ligne d’en-tête et deux colonnes pour afficher des images et leur description :
<table>
  <tr>
    <th>Image</th>
    <th>Description</th>
  </tr>
  <tr>
    <td><img src="image1.jpg" alt="Image1"></td>
    <td>Description de l'image 1</td>
  </tr>
  <tr>
    <td><img src="image2.jpg" alt="Image2"></td>
    <td>Description de l'image 2</td>
  </tr>
  <tr>
    <td><img src="image3.jpg" alt="Image3"></td>
    <td>Description de l'image 3</td>
  </tr>
</table>
  1. Créer une table avec des colonnes pour les noms, les dates de naissance et les professions :
<table>
  <tr>
    <th>Nom</th>
    <th>Date de naissance</th>
    <th>Profession</th>
  </tr>
  <tr>
    <td>ALi SSS</td>
    <td>6 janvier 1986</td>
    <td>Ingénieur</td>
  </tr>
  <tr>
    <td>Sali MMM</td>
    <td>15 Mars 1984</td>
    <td>Enseignante</td>
  </tr>
  <tr>
    <td>Kamal LLL</td>
    <td>16 Septembre 1981</td>
    <td>Artiste</td>
  </tr>
</table>
  1. Créer une table pour afficher les informations sur les produits avec des colonnes pour les noms, les prix et les descriptions :
<table>
  <tr>
    <th>Nom du produit</th>
    <th>Prix</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Téléphone portable</td>
    <td>1500 DH</td>
    <td>Téléphone portable dernier cri avec caméra haute résolution et batterie longue durée.</td>
  </tr>
  <tr>
    <td>Ordinateur portable</td>
    <td>9000 DH</td>
    <td>Ordinateur portable puissant et léger avec un grand écran et une mémoire de stockage importante.</td>
  </tr>
  <tr>
    <td>Imprimante</td>
    <td>1700 DH</td>
    <td>Imprimante couleur avec scanner intégré et fonctionnalités d'impression sans fil.</td>
  </tr>
</table>
9- Créer une table pour afficher les informations sur les employés d'une entreprise avec des colonnes pour les noms, les postes, les adresses e-mail et les numéros de téléphone :
<table>
  <tr>
    <th>Nom</th>
    <th>Poste</th>
    <th>Adresse e-mail</th>
    <th>Numéro de téléphone</th>
  </tr>
  <tr>
    <td>KALI OOO</td>
    <td>Directeur des ventes</td>
    <td>[email protected]</td>
    <td>06 27 45 87 89</td>
  </tr>
  <tr>
    <td>ALI MMM</td>
    <td>Responsable des ressources humaines</td>
    <td>[email protected]</td>
    <td>06 29 45 77 90</td>
  </tr>
  <tr>
    <td>MANO BBB</td>
    <td>Ingénieur logiciel</td>
    <td>[email protected]</td>
    <td>06 29 45 77 91</td>
  </tr>
</table>