Exercice 7/15

L'en-tête <thead> est déjà créé. Il ne vous reste plus qu'à faire ceci :

  • Ajoutez une ligne à cet en-tête en utilisant <tr> et </tr>.
  • Dans cette ligne, ajoutez deux cellules avec <th> et </th>. Écrivez Géants de l'internet dans la première cellule et Année de création dans la deuxième.

Inspirez-vous de l'exemple au début.

Leçon 7/15

Regardez les lignes 8 et 10 : nous avons ajouté l'entête du tableau avec les balises ouvrante et fermante <thead> </thead>, juste au-dessus de <tbody>.

Comme pour le document HTML, l'en-tête sert notamment à donner un titre au tableau et plus particulièrement un titre pour chaque colonne : Géants de l'internet (colonne 1) et Année de création (colonne 2).

Le principe est le même que pour mettre des données dans le corps <tbody> à la différence près que la balise s'appelle <th> :

<thead>
  <tr>
      <th>Nom</th>
      <th>Prénom</th>
  </tr>
</thead>

Expliquons ce code en détail :

  1. On a créé l'en-tête du tableau avec la balise <thead>.
  2. Au-dessous de <thead>, on a inséré une ligne avec la balise <tr> pour accueillir les cellules de l'en-tête du tableau.
  3. On a inséré deux cellules dans cette ligne avec des balises <th> et </th>. Ces cellules contiennent les titres des colonnes à savoir Nom et Prénom.
  4. On a fermé la ligne avec une balise fermante </tr>.
  5. On a fermé l'en-tête du tableau avec une balise fermante </thead>.

_

Les cellules de l'entête <thead> se créent avec <th> et </th> plutôt que <td> et </td> pour les cellules du corps <tbody>. A part ça, rien de nouveau !

_

Commentaires les mieux notés

  • ahisse78

    ahisse78

    Bonjour j'ai aussi le même problème : <thead><tr> <th>Geants de l'internet</th> <th>Année de création</th> </tr> </thead> les cellules sont créees au bon endroit il me dit le contraire merci pour votre aide

    le 25/11/2016 à 22h36

  • ahisse78

    ahisse78

    Au final j'ai trouvé l'accent de é dans Géants merci

    le 25/11/2016 à 22h39

  • mram

    mram Admin

    Oui c'est ça, les fautes de frappes sont les moins évidentes à trouver car on n'y pense pas forcément.

    le 28/11/2016 à 15h59

  • mram

    mram Admin

    Si, la balise "thead" ne doit pas contenir la balise "tbody" ....

    le 07/06/2017 à 14h04

  • pizzutoandrea3

    pizzutoandrea3

    ou il est il prob?

    le 28/05/2017 à 19h09

20 Commentaires

  • maryne.gaudez-45

    maryne.gaudez-45

    bonjour, je ne trouve pas mon erreur!! on me dis que je n'ai pas fermé <tr></tr> alors quil est bien fermé.

    le 29/06/2020 à 16h01

  • meriam

    meriam Admin

    Votre code est correct. Une mise à jour en cours, merci pour votre compréhension.

    le 29/06/2020 à 22h15

  • militaire.fr-86

    militaire.fr-86

    je ne trouve pas mon erreur il me dit que que n'ecrit pas bien géant de l'internet et année de création

    le 02/09/2018 à 12h35

  • leolocufier-40

    leolocufier-40

    Bonjour, je ne comprends pas mon erreur

    le 13/08/2018 à 14h48

  • mram

    mram Admin

    Quel est votre message d'erreur svp ? Ca sera plus facile pour vous aider.

    le 17/08/2018 à 06h13

  • eddy_michel-49

    eddy_michel-49

    Bonjour je comprends pas mon erreur

    le 01/08/2018 à 21h45

  • mram

    mram Admin

    Bonjour, vous avez une balise "th" en trop ligne 12.

    le 05/08/2018 à 00h19

index.html
<!DOCTYPE html> <html> <head> <title>Les tableaux</title> </head> <body> <table border="1px"> <thead> </thead> <tbody> <tr> <td>Facebook</td> <td>2004</td> </tr> <tr> <td>Google</td> <td>1998</td> </tr> <tr> <td>Amazon</td> <td>1994</td> </tr> </tbody> </table> </body> </html>