Exercice 9/15

  • Mettez les titres des colonnes "Géants de l'internet" et "Année de création" en italique
  • Mettez le titre du tableau "Géants de l'internet par année de création" en rouge

Leçon 9/15

Vous commencez à savoir faire des tableaux un peu compliqués mais ce n'est qu'un début. Nous avons amélioré son apparence qui n'était pas des plus esthétiques et on vous laisse carte blanche pour les finitions !

Amusez-vous avec les attributs de style que nous avons insérés, en jouant sur les propriétés CSS que vous connaissez déjà. Nous en verrons davantage très bientôt.

Pour appliquer plusieurs styles à un même élément, séparez-les par un point-virgule, comme ceci :

 <th style="font-size:14px;color:blue"></th>

_

Retournez à la section précédente Texte en italique pour voir comment ajouter du style à un texte.

Par exemple, essayez d'ajouter un attribut de style au premier th pour changer sa couleur. C'est le même principe que pour changer la couleur de la police avec l'attribut style.

_

Commentaires les mieux notés

  • soacynthiasoa-62

    ou est l'erreur : <!DOCTYPE html> <html> <head> <title>Les tableaux</title> </head> <body> <table style="border-collapse:collapse;"> <thead> <tr> <th style="color:red;colspan=2">Géants de l'internet par année de création</th> </tr> <tr style="border-bottom:1px solid black;"> <th style="padding:5px;"><em>Géants de l'internet</th></em> <th style="padding:5px;border-left:1px solid black;"><em>Année de création</th></em> </tr> </thead> <tbody> <tr> <td style="padding:5px;">Facebook</td> <td style="padding:5px;border-left:1px solid black;">2004</td> </tr> <tr> <td style="padding:5px;">Google</td> <td style="padding:5px;border-left:1px solid black;">1998</td> </tr> <tr> <td style="padding:5px;">Amazon</td> <td style="padding:5px;border-left:1px solid black;">1994</td> </tr> </tbody> </table> </body> </html>

  • ouakninkevin

    je ne trouve pas l'erreur sur mon code on me demande de verifier le contenu de mes balises <th> mais je ne vois pas le probleme

  • mineorobi

    J'ai eu le même problème,il faut procéder comme ceci:<th colspan="2" style="color:red" (il faut laisser un espace entre " et style.

  • pizzutoandrea3

    help

60 Commentaires

  • soacynthiasoa-62

    soacynthiasoa-62

    ou est l'erreur : <!DOCTYPE html> <html> <head> <title>Les tableaux</title> </head> <body> <table style="border-collapse:collapse;"> <thead> <tr> <th style="color:red;colspan=2">Géants de l'internet par année de création</th> </tr> <tr style="border-bottom:1px solid black;"> <th style="padding:5px;"><em>Géants de l'internet</th></em> <th style="padding:5px;border-left:1px solid black;"><em>Année de création</th></em> </tr> </thead> <tbody> <tr> <td style="padding:5px;">Facebook</td> <td style="padding:5px;border-left:1px solid black;">2004</td> </tr> <tr> <td style="padding:5px;">Google</td> <td style="padding:5px;border-left:1px solid black;">1998</td> </tr> <tr> <td style="padding:5px;">Amazon</td> <td style="padding:5px;border-left:1px solid black;">1994</td> </tr> </tbody> </table> </body> </html>

    le 22/01/2018 à 17h03

  • mram

    mram Administrateur

    Bonjour, que vous dit le message d'erreur ?

    le 24/01/2018 à 16h38

  • ouakninkevin

    ouakninkevin

    je ne trouve pas l'erreur sur mon code on me demande de verifier le contenu de mes balises <th> mais je ne vois pas le probleme

    le 15/09/2017 à 17h21

  • mram

    mram Administrateur

    Bonjour, j'ai testé votre code et il fonctionne...

    le 20/09/2017 à 14h56

  • mineorobi

    mineorobi

    J'ai eu le même problème,il faut procéder comme ceci:<th colspan="2" style="color:red" (il faut laisser un espace entre " et style.

    le 23/01/2016 à 19h02

  • pizzutoandrea3

    pizzutoandrea3

    help

    le 27/05/2017 à 20h25

  • callum.chiverto

    callum.chiverto

    Merci @minerobi ! Sans ton conseil je n'avancais pas, car je mettais toujours un ";" au lieu d'un simple espace. Ces commentaires aident la morale car je me demandais quand meme si c'est juste moi qui bloque :-)

    le 17/02/2016 à 16h50

  • lapisanplu

    lapisanplu

    Ce que je fait ici ne marche pas! pourtant le même exercice (en tout pareil) sur Codecademy marche bien! dommage

    le 11/01/2016 à 20h02

  • mram

    mram Administrateur

    @lapinsanplu : sur Codeacademy les corrections sont moins strictes, donc il est possible de valider un exercice tout en écrivant du code pas très propre. Ici, les corrections sont plus strictes afin que vous preniez l'habitude de faire attention à la syntaxe de votre code.

    Cordialement.

    le 18/02/2016 à 01h42

  • patrice.francois2

    patrice.francois2

    Cela fonctionne mais pas moyen de valider...?

    le 05/01/2016 à 18h20

  • webmaster69003

    webmaster69003

    je ne comprent pas l'erreur ,? <!DOCTYPE html> <html> <head> <title>Les tableaux</title> </head> <body> <table style="border-collapse:collapse;"> <thead> <tr> <th colspan="2" style="color:red"</th><em>Géants de l'internet par année de création</em></th> </tr> <tr style="border-bottom:1px solid black;"> <th style="padding:5px;">Géants de l'internet</th> <th style="padding:5px;border-left:1px solid black;">Année de création</th> </tr> </thead> <tbody> <tr> <td style="padding:5px;">Facebook</td> <td style="padding:5px;border-left:1px solid black;">2004</td> </tr> <tr> <td style="padding:5px;">Google</td> <td style="padding:5px;border-left:1px solid black;">1998</td> </tr> <tr> <td style="padding:5px;">Amazon</td> <td style="padding:5px;border-left:1px solid black;">1994</td> </tr> </tbody> </table> </body> </html>

    le 14/10/2016 à 22h11

  • mram

    mram Administrateur

    Oui, l'important est de respecter cette syntaxe > style="propriété:valeur;propriété:valeur;" etc.

    le 12/03/2016 à 01h36

  • annelaure.mesguen

    annelaure.mesguen

    On peut aussi mettre la couleur avant, soit <th style="color:red"colspan="2">, cela fonctionne visiblement

    le 14/06/2017 à 15h56

  • Kortex

    Kortex

    j'ai un message d'erreur me disant que mon titre n'est pas écrit en rouge et pourtant il apparaît en rouge sur l'écran. voici mon code : <tr style="color:red;"> <th colspan="2">Géants de l'internet par année de création</th> </tr>

    le 12/05/2017 à 18h16

  • mram

    mram Administrateur

    Il faut plutôt mettre les balises "em" autour du texte et pas autour des balises "th".

    le 01/06/2017 à 15h45

  • mram

    mram Administrateur

    Elle dit quoi l'erreur ??

    le 18/10/2016 à 09h39

  • mram

    mram Administrateur

    Il faudrait plutôt mettre le style ligne 10 dans la balise qui contient le titre directement.

    le 17/05/2017 à 21h47

  • akim.mezouari

    akim.mezouari

    bonjour je pense avoir avoir le bonne syntaxe mais j'ai cette erreur : Votre titre "Géants de l'internet" / "Année de création" n'est pas écrit en italique ! (Utilisez la balise <em>)

    le 11/10/2017 à 19h43

  • akim.mezouari

    akim.mezouari

    c'est bon, désolé (j'avais placé mon style : red dans la ligne 13 au lien de la ligne 10). le problème de l'outil est qu'il donne un intitulé d'erreur sans rapport , aucune à notre manip. Bien lire et relire les instructions

    le 11/10/2017 à 19h53

  • jmulon.pro

    jmulon.pro

    Bonjour l'erreur doit être toute bête mais je ne la trouve pas Vérifiez le contenu de vos balises <th>, il DOIT être égal au couple "Géants de l'internet" / "Année de création"

    le 07/12/2017 à 13h10

  • mram

    mram Administrateur

    Bonjour, dans "Géants de l'internet par Année de création" essayez en mettant un "a" minuscule à "Année".

    le 10/12/2017 à 14h26

  • yekersch-39

    yekersch-39

    On devrais nous laisser le choux entre utiliser le font-style ou la balise EM sauf si vous le préciser. Parce que les deux sont possible, hormis si on attache de l'importance à em pour le SEO

    le 12/12/2018 à 22h40

  • meriam

    meriam Administrateur

    l'exercice demande de mettre les titres des colonnes "Géants de l'internet" et "Année de création" en italique, donc utilisez em.

    le 13/12/2018 à 16h05

  • severine.74

    severine.74

    Bonjour. Je ne comprends pas j'ai bien mis la balise <em> et il me dit que mes titres ne sont pas en italique alors que je les ai bien dans le résultat? d'avance merci

    le 02/02/2018 à 10h09

  • mram

    mram Administrateur

    Bonjour, non c'est pas le titre principal qu'il faut mettre en italique mais les en-têtes de colonnes.

    le 05/02/2018 à 11h19

  • leon.thom-33

    leon.thom-33

    Bonsoir, mon message d'erreur est écrit Géants de l'internet par année de création n'est pas écrit en rouge alors qu'il est en rouge

    le 04/02/2018 à 20h48

  • mram

    mram Administrateur

    Bonjour, certainement car il faut mettre le style sur la cellule "th" plutôt que sur la ligne "tr". Le résultat est le même j'en conviens.

    le 06/02/2018 à 11h44

  • houssemcheikh

    houssemcheikh

    tout est bon et j'arrive pas à valider ......

    le 15/09/2017 à 20h46

  • mram

    mram Administrateur

    Bonjour, attention pour "Année de création" vous fermez "em" au mauvais endroit.

    le 20/09/2017 à 15h02

  • christianlehenanff-28

    christianlehenanff-28

    espace supprimé toujourss bloqué sur la ligne 10 apparemment

    le 16/01/2019 à 10h34

  • meriam

    meriam Administrateur

    erreur au niveau du th de la 1 ère tr, supprimez les les signe < et > avant et aprés le titre "Géants de l'internet par année de création"

    le 16/01/2019 à 11h21

  • saidali.anissa-71

    saidali.anissa-71

    Bonjour, j'ai pas compris mon erreur . Le message me dit: Vérifiez le contenu de vos balises <th>, il DOIT être égal au couple "Géants de l'internet" / "Année de création"

    le 19/02/2018 à 18h26

  • mram

    mram Administrateur

    Bonjour, c'est certainement dû à l'espace inutile devant "Géants..." .

    le 19/02/2018 à 23h37

  • Ondeemi

    Ondeemi

    Bonjour, je ne comprends pas mon erreur avec colspan

    le 28/02/2019 à 17h33

  • meriam

    meriam Administrateur

    < th style=color:red;colspan="2"> , laissez juste espace entre l'attribut style et l'attribut colspan (pas un point virgule), il vous manque aussi les guillemets style ="color:red" .

    le 01/03/2019 à 11h15

  • sonnychaprier

    sonnychaprier

    Bonjour, une remarque sur la consigne, pour mettre un texte en italique (donc la forme CSS) il faut utiliser font-style: italic> et non les balises <em>, HTML définit le fond (contenu, logique des éléments) et Css la forme (apparence), la consigne devrait plutôt être < Mettez en avant (en emphase) les titres des colonnes "Géants de l'internet" et "Année de création" >. Merci, de répondre à mon commentaire pour savoir si ma remarque est pertinente :).

    le 07/01/2018 à 13h29

  • mram

    mram Administrateur

    Bonjour, oui votre façon de présenter la chose est correcte aussi.

    le 12/01/2018 à 01h11

  • nkeshimanabrice-37

    nkeshimanabrice-37

    je viens de corriger la ligne que vous m'avez indique mais ça ne marche pas....

    le 21/02/2019 à 13h21

  • meriam

    meriam Administrateur

    il y a une balise fermante tr manquante dans la partie thead

    le 21/02/2019 à 14h54

  • sebastien.remoleur

    sebastien.remoleur

    Je comprend pas bien ... Vérifiez le contenu de vos balises <th>, il DOIT être égal au couple "Géants de l'internet" / "Année de création"

    le 20/10/2017 à 04h29

  • mram

    mram Administrateur

    Bonjour, il manquait le A majuscule, c'est sensible à la casse.

    le 20/10/2017 à 17h16

  • Ajell

    Ajell

    J'ai appliqué les instructions données et j'ai toujours cette erreur:"Votre titre "Géants de l'internet" / "Année de création" n'est pas écrit en italique ! (Utilisez la balise <em>)"

    le 18/12/2017 à 09h08

  • mram

    mram Administrateur

    Bonjour, Il ne faut mettre qu'un seul couple de balise "em" pour englober tout le titre, et non deux comme vous avez fait.

    le 23/12/2017 à 15h47

  • sebastien.remoleur

    sebastien.remoleur

    Je ne passe toujours pas ce stade et je ne vois pas pourquoi .... peut on m'aider à trouver l'erreur qu'il semble y avoir ???

    le 20/10/2017 à 16h53

  • mram

    mram Administrateur

    Bonjour, la correction est sensible à la casse, il manque donc le A majuscule pour "année de création". Sinon le reste est bon :)

    le 20/10/2017 à 17h23

  • ourfiornella-10

    ourfiornella-10

    je ne comprend pas , jai bien mis colspan: 2 mais il mindique qu'il manque alors que je l est mise. merci d'avance de m'aider

    le 09/09/2018 à 15h28

  • mram

    mram Administrateur

    "colspan" n'est pas une propriété CSS. Il ne faut pas le mettre dans "style=...".

    C'est un attribut tout comme "href".

    le 16/09/2018 à 06h36

  • naim-khezzar

    naim-khezzar

    bonjour le correcteur me dit que mon titre n'est pas en rouge alors que si.Je dois ignorer son avertissement ou non car ce n'est pas la première fois que j'ai ce message.

    le 09/01/2018 à 13h44

  • mram

    mram Administrateur

    Bonjour, mettez le style directement à la balise "th" et supprimez la balise "p".

    le 12/01/2018 à 02h02

  • extan

    extan

    Les balises em comme strong leur but premier si je me trompe c'est pas de faire du "style" ( ça c'est le CSS) mais ces balises servent plus pour les moteurs de recherche non?

    le 09/07/2017 à 18h40

  • mram

    mram Administrateur

    Oui ça donne un sens sémantique au contenu. Le style est juste la mise en forme proposée par défaut par les navigateurs, il est possible de passer outre et de faire en sorte que le texte soit visuellement comme le reste du texte (pas en gras, pas en italique).

    le 10/07/2017 à 18h02

  • steve.besson

    steve.besson

    l'affichage corrspond a la demande mais erreur

    le 10/11/2017 à 10h14

  • mram

    mram Administrateur

    Bonjour, "Géants de l'internet" n'est pas en italique ...

    le 11/11/2017 à 15h02

  • cmacherel

    cmacherel

    Je ne comprends pas ce que je fais de faux. J'ai écrit:

    le 20/03/2018 à 10h01

  • mram

    mram Administrateur

    Bonjour, je pense qu'il faut appliquer la couleur rouge directement à la balise "th" et non à "tr".

    le 24/03/2018 à 05h18

  • cmacherel

    cmacherel

    Je ne comprends pas ce que je fais de faux. J'ai écrit: <tr style="color:red"> avant<th colspan="2">.

    le 20/03/2018 à 10h02

  • mram

    mram Administrateur

    Bonjour, je pense qu'il faut appliquer la couleur rouge directement à la balise "th" et non à "tr".

    le 24/03/2018 à 05h20

  • Nabil.zouhri1-99

    Nabil.zouhri1-99

    Bonjour je ne comprends pas du tout ou est mon erreur help pls !

    le 12/02/2018 à 12h24

  • mram

    mram Administrateur

    Bonjour, il y a un espace en trop devant le titre principal. Et mettez le code du titre "Année de création" sur une seule ligne.

    le 12/02/2018 à 22h17

  • estoclet-59

    estoclet-59

    J'ai mis les mots en italique au moyen de la balise <i></i>. L'exercice a donné le résultat "raté" parce que je n'ai pas utilisé <em>.

    le 10/09/2018 à 09h10

  • mram

    mram Administrateur

    Oui, normal, la balise "i" n'est pas recommandée. La balise "em" ajoute du sens sémantique en plus.

    le 15/09/2018 à 07h13

  • lercat-63

    lercat-63

    Bonjour, pourriez-vous controler mon code; à l'écran dans le résultat j'ai un > qui apparait et je ne sais pas d'ou il vient

    le 27/05/2018 à 10h37

  • mram

    mram Administrateur

    Bonjour, c'est le premier caractère de tout le code je pense.

    le 28/05/2018 à 05h40

  • estoclet-59

    estoclet-59

    Lorsque je valide, il me dit que mon titre n'est pas en rouge... Pas parfait, ce correcteur, voici mon code :

    le 10/09/2018 à 09h16

  • mram

    mram Administrateur

    C'est normal, "< font color="red">" ça n'existe pas.

    Il faut utiliser l'attribut "style".

    le 15/09/2018 à 07h14

  • tomtrademark-95

    tomtrademark-95

    <th colspan="2" style="color:red">Géants de l'internet par année de création</th>

    le 11/09/2019 à 14h29

  • soufiane.tarhouchi-7

    soufiane.tarhouchi-7

    Merci j'ai trouver l'erreur

    le 06/04/2019 à 01h20

index.html
<!DOCTYPE html> <html> <head> <title>Les tableaux</title> </head> <body> <table style="border-collapse:collapse;"> <thead> <tr> <th colspan="2">Géants de l'internet par année de création</th> </tr> <tr style="border-bottom:1px solid black;"> <th style="padding:5px;">Géants de l'internet</th> <th style="padding:5px;border-left:1px solid black;">Année de création</th> </tr> </thead> <tbody> <tr> <td style="padding:5px;">Facebook</td> <td style="padding:5px;border-left:1px solid black;">2004</td> </tr> <tr> <td style="padding:5px;">Google</td> <td style="padding:5px;border-left:1px solid black;">1998</td> </tr> <tr> <td style="padding:5px;">Amazon</td> <td style="padding:5px;border-left:1px solid black;">1994</td> </tr> </tbody> </table> </body> </html>