Cours N°15 Changer la couleur de fond d'un tableau en html

Ce tutoriel a été conçu par nos soins et est donc notre propriété exclusive. Toute ressemblance avec un autre existant ne serait que pure coïncidence. Il est interdit de recopier intégralement ou partiellement nos tutoriels qui sont exclusivement réservés aux membres de ce forum.

Pour ce cours nous allons apprendre à créer un tableau en html et changer la couleur de fond de celui-ci. Rappelons nous d'abord des balises employées pour créer le tableau :

- <table> est utilisé pour ouvrir votre tableau </table> en fin de tableau pour le fermer.

- border="1" se place dans la balise table. Si la valeur 1 est remplacé par 0 le tableau sera invisible. Plus la valeur est élevée plus le contour du tableau sera gros.

- <tr> représente chaque ligne horizontale de votre tableau.

- <td> représente chaque cellule d'un tableau.

- Maintenant la nouveauté pour ce tutoriel, la balise permettant de changer la couleur de fond :
bgcolor

Nous allons faire un tableau en hmtl avec une couleur de fond. La balise bgcolor est placé sur cet exemple dans la balise table. Vous remarquerez que dans ce cas c'est la totalité du tableau qui est colorisé de la même couleur mise à part les bordures :
<center><table border="2" bgcolor="olive"><tr><td>PC-design</td><td>formation html</td></tr><tr><td>correction en ligne</td><td>tutoriel</td></tr></table></center>

Ce qui nous donne ceci :


- En second exemple nous allons coloriser la première rangée de cellules. Pour effectuer ceci, bgcolor doit être placé dans la balise <tr> :
<center><table border="2"><tr bgcolor="olive"><td>PC-design</td><td>formation html</td></tr><tr><td>correction en ligne</td><td>tutoriel</td></tr></table></center>

En visuel cela donne ceci :


- Pour le troisième exemple nous allons coloriser une seule cellule. Pour faire ceci bgcolor doit être placé dans la balise <td> :
<center><table border="2"><tr><td bgcolor="olive">PC-design</td><td>formation html</td></tr><tr><td>correction en ligne</td><td>tutoriel</td></tr></table></center>

En visuel cela donne ceci :



------------------------------------------------------------------------


Exercice 1 :

Pour ce premier exercice je vous demanderai de reproduire les trois tableaux de ce tutoriel en colorisant le fond de celui ci avec la couleur "olive" sans oublier de les centrer. (Evitez le copier coller cela ne vous aidera pas à apprendre).


Exercice 2 :

Pour cet exercice je vous demande de reproduire le tableau ci dessous sans oublier de le centrer (voir infos utiles pour les codes couleurs en bas de ce tutoriel) :


Exercice 3 :

Pour ce troisème devoir reproduisez le tableau ci dessous sans oublier de le centrer (voir infos utiles pour les codes couleurs en bas de ce tutoriel) :


Informations utiles

- La valeur border est de 2 pour tous les tableaux du tutoriel.
- Les codes couleurs sont les suivants :
violet pour la couleur violet
orange pour la couleur orange
maroon pour la couleur marron
yellow pour la couleur jaune
olive pour la couleur vert olive

Note : Les tableaux en exemple sur ce tutoriel ne sont pas centrés le mélange html et bbcode ne fait pas bon ménage.

Re-coucou,
Exercice 1 :
Tableau 1 :

PC-design	formation html
correction en ligne	tutoriel

Tableau 2 :

Bienvenue	sur	PC-design
Cours	tutoriel	correction en ligne
Pour apprendre	comment fonctionne	le html en s'amusant

Tableau 3 :

Bienvenue	sur	PC-design
Cours	tutoriel	correction en ligne
Pour apprendre	comment fonctionne	le html en s'amusant
PHENYX

Exercice 2 :

Bienvenue	sur	PC-design
Cours	tutoriel	correction en ligne
Pour apprendre	comment fonctionne	le html en s'amusant

Exercice 3 :

Bienvenue	sur	PC-design
Cours	tutoriel	correction en ligne
Pour apprendre	comment fonctionne	le html en s'amusant
PHENYX

Euh je crois que ce sera tout pour ce soir là
Bisous et bonne soirée


Il va te falloir refaire tous les devoirs. Sur les informations utiles je précise que la bordure est de taille 2 pour tous les tableaux. Quand à l'exercice 1 désolé mais il est entièrement faux. Pas grave c'est en faisant des erreurs qu'on apprend. Relis bien les infos du tutoriel.

Re-coucou,
Exercice 1 :
Tableau 1 :

PC-design	formation html
correction en ligne	tutoriel

Tableau 2 :

PC-design	formation html
correction en ligne	tutoriel

Tableau 3 :

PC-design	formation html
correction en ligne	tutoriel

Exercice 2 :

Bienvenue	sur	PC-design
Cours	tutoriel	correction en ligne
Pour apprendre	comment fonctionne	le html en s'amusant

Exercice 3 :

Bienvenue	sur	PC-design
Cours	tutoriel	correction en ligne
Pour apprendre	comment fonctionne	le html en s'amusant
PHENYX

voilà j'ai tout refait, j'espère que cette fois-ci ca ira.
Bye


Voilà exercice réussi.Bravo

coucou
Merci pour les corrections.
Quand je parle d'éditer les messages c'était avant que tu ne corriges bien sur, sinon il est vrai que tu ne t'y retrouveras plus mais comme on ne peut pas
Bon dimanche.
Bye

Coucou,
Ca fait un bien fou de retravailler ici, j'ai hâte de découvrir la suite, ça m'avait drôlement manqué.....Bon, je m'essaie à l'exercice:

EXERCICE 1:

PC-design	formation html
correction en ligne	tutoriel

PC-design	formation html
correction en ligne	tutoriel

PC-design	formation html
correction en ligne	tutoriel

EXERCICE 2:

Bienvenue	sur	PC-design
Cours	tutoriel	correction en ligne
Pour apprendre	comment fonctionne	le html en s'amusant

EXERCICE 3:

Bienvenue	sur	PC-design
Cours	tutoriel	correction en ligne
Pour apprendre	comment fonctionne	le html en s'amusant
PHENYX

Voilà,
merci d'avance pour le temps passé pour les corrections.
gros bisous
Chrys


Coucou Chrys exercice réussi.Bravo

Merci encore, et vivement la suite.
Bisous
Chrys