Formations informatiques pour débutants (tutoriels, cours : théorie et pratique, etc.)
Accueil­FAQ­Rechercher­Membres­Groupes­S'enregistrer­Connexion
Connexion
Nom d'utilisateur:
Mot de passe:
Connexion automatique: 
:: Récupérer mon mot de passe
Qui est en ligne ?
Il y a en tout 1 utilisateur en ligne :: 0 Enregistré, 0 Invisible et 1 Invité

Aucun

Le record du nombre d'utilisateurs en ligne est de 11 le Ven 5 Juin - 15:36
Rechercher
 
 

Résultats par :
 
Rechercher Recherche avancée
Derniers sujets
» Cours N°3 : Souligner un texte et barrer un mot
Mer 17 Fév - 22:42 par Trimarcisia

» Cours N°2 : Mettre un texte en gras et en italique
Mer 17 Fév - 22:37 par Trimarcisia

» A la belle assiette (recettes testées)
Mer 17 Fév - 1:57 par Trimarcisia

» Bonjour, vu l'heure, normal, à tous et toutes
Mar 16 Fév - 17:34 par pioupiou

» Cours N°1 : Centrer un texte
Lun 15 Fév - 9:32 par phenyx

» Cours N°1 : Redimensionner une image sans logiciel
Lun 15 Fév - 9:31 par phenyx

» Changer la couleur de fond d'un tableau en html
Dim 31 Jan - 11:42 par pioupiou

» Cours 14 : Faire un tableau en html
Sam 30 Jan - 15:17 par pioupiou

» De nouveaux cours html pour les amateurs
Sam 23 Jan - 16:38 par phenyx

Navigation
 Portail
 Index
 Membres
 Profil
 FAQ
 Rechercher
Forum
Partenaires
Tchat Blablaland
Le couteau suisse du montage photo
Statistiques

Poster un nouveau sujet   Répondre au sujetPartager | 
 

 Changer la couleur de fond d'un tableau en html

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
phenyx
Admin


Messages: 58
Date d'inscription: 16/03/2009
Age: 39

MessageSujet: Changer la couleur de fond d'un tableau en html   Ven 22 Jan - 1:16

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



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 :
PC-designformation html
correction en lignetutoriel



- 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 :
PC-designformation html
correction en lignetutoriel



- 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 :
PC-designformation html
correction en lignetutoriel




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

Exercices à faire


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) :

BienvenuesurPC-Design
Courstutorielcorrection en ligne
Pour apprendrecomment fonctionnele html en s'amusant


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) :

BienvenuesurPC-Design
Courstutorielcorrection en ligne
Pour apprendrecomment fonctionnele html en s'amusant
PHENYX


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.

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.manimalworld.net
pioupiou



Messages: 36
Date d'inscription: 10/01/2010
Age: 34
Localisation: saint-quentin

MessageSujet: Re: Changer la couleur de fond d'un tableau en html   Mer 27 Jan - 19:44

Re-coucou,
Exercice 1 :
Tableau 1 :
PC-designformation html
correction en lignetutoriel


Tableau 2 :
BienvenuesurPC-design
Courstutorielcorrection en ligne
Pour apprendrecomment fonctionnele html en s'amusant


Tableau 3 :
BienvenuesurPC-design
Courstutorielcorrection en ligne
Pour apprendrecomment fonctionne le html en s'amusant
PHENYX


Exercice 2 :
BienvenuesurPC-design
Courstutorielcorrection en ligne
Pour apprendrecomment fonctionnele html en s'amusant


Exercice 3 :
BienvenuesurPC-design
Courstutorielcorrection en ligne
Pour apprendrecomment fonctionnele html en s'amusant
PHENYX


geek geek geek geek geek

Euh je crois que ce sera tout pour ce soir là lol! lol!
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.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lenezenlair-saint-quentin.e-monsite.com
pioupiou



Messages: 36
Date d'inscription: 10/01/2010
Age: 34
Localisation: saint-quentin

MessageSujet: Re: Changer la couleur de fond d'un tableau en html   Sam 30 Jan - 15:29

Re-coucou,
Exercice 1 :
Tableau 1 :
PC-designformation html
correction en lignetutoriel


Tableau 2 :
PC-designformation html
correction en lignetutoriel


Tableau 3 :
PC-designformation html
correction en lignetutoriel


Exercice 2 :
BienvenuesurPC-design
Courstutorielcorrection en ligne
Pour apprendrecomment fonctionnele html en s'amusant


Exercice 3 :
BienvenuesurPC-design
Courstutorielcorrection en ligne
Pour apprendrecomment fonctionnele 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
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lenezenlair-saint-quentin.e-monsite.com
pioupiou



Messages: 36
Date d'inscription: 10/01/2010
Age: 34
Localisation: saint-quentin

MessageSujet: Re: Changer la couleur de fond d'un tableau en html   Dim 31 Jan - 11:42

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 lol! mais comme on ne peut pas Laughing
Bon dimanche.
Bye
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lenezenlair-saint-quentin.e-monsite.com
 

Changer la couleur de fond d'un tableau en html

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
pc-design-formation :: LES COURS HTML :: Le html de base-
Poster un nouveau sujet   Répondre au sujet