Fond coloré dans un tableau
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Fond coloré dans un tableau
Bonjour !
J'ai cherché partouuuuuuuuuut pour mettre un fond a mon tableau, mais je trouve nul part T-T
Voici mon code de tableau :
Merci
J'ai cherché partouuuuuuuuuut pour mettre un fond a mon tableau, mais je trouve nul part T-T
Voici mon code de tableau :
- Code:
<title>Conception d'onglet</title>
<script type="text/javascript" src="http://illiweb.com/fa/js_29/fr.js"></script>
<style>
/* Début de la feuille de style */ .onglet-content > div { display : none ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 20px ; margin-bottom : Xpx ; width : 700px ; } .onglet-content > div.active{ display : block ; } .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; } .onglet-table td { style : top ; vertical-align:middle ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 0px 10px ; opacity : 0.5 ; } .onglet-table td.active, .onglet-table td:hover { opacity : 1 ; } /* Fin de la feuille de style */ </style><center><script type="text/javascript"> /* Début du script */ jQuery(document).ready(function(){ jQuery(".onglet-table").find("td").click(function(){ /* Suppression des classe .active pour tout les onglets et contenus */ var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */ system.find(".onglet-table").find(".active").removeClass("active"); system.find(".onglet-content").find(".active").removeClass("active"); /* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */ var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */ jQuery(this).addClass("active"); system.find(".onglet-content").find("div[name='"+id+"']").addClass("active"); }); }); /*Fin du script */
</script>
<!-- Début du HTML --><div class="onglet">
<table><tbody><tr><td>
<table class="onglet-table">
<tbody><tr><td name="1" class="active">Onglet 1</td>
<td name="2">Onglet 2</td>
<td name="3">Onglet 3</td>
<td name="4">Onglet 4</td>
<td name="5">Onglet 5</td>
</tbody></table></td></tr><tr><td>
<div class="onglet-content">
<div name="1" class="active"> <table><tbody><tr>
<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/Sans_titre_1pngmm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/DSCF8461_129.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=1?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Pseudo : Admin<br>
- 1°Admin<br>
- Lucie<br>
- Née le 28 mai 1998<br>
- Utilise photoshop<br>
- Enjoy ! ♥ :3
</div></span>
</div></td>
<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/lm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/momopngl.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=2?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Nas Tashiya' Oz<br>
- 2°Admin<br>
- Morgane<br>
- Née le 1 Décembre 1996<br>
- Utilise photofiltre<br>
</div></span>
</div></td>
</td></tr></tbody></table> </div>
<div name="2">contenu de l'onglet 2</div>
<div name="3">contenu de l'onglet 3</div>
<div name="4">contenu de l'onglet 4</div>
<div name="5">contenu de l'onglet 5</div>
</div></td></tr></tbody></table>
Merci
Dernière édition par th3-P0taTo3s le Jeu 16 Sep 2010 - 9:20, édité 1 fois
Re: Fond coloré dans un tableau
Bonsoir,
Il suffit de mettre ceci:
Pour une image =>
- Code:
<table background="lien de l'image">Contenu</table>
Pour une couleur =>
- Code:
<table background="#code couleur">Contenu</table>
Cordialement.
Re: Fond coloré dans un tableau
Bah jveux bien mais je le mets ou ? xD
Merci de ton aide
Merci de ton aide
Re: Fond coloré dans un tableau
Vous cherchez la balise "table" et vous rajoutez ce que je vous ai donné entre les balises.
Re: Fond coloré dans un tableau
ça me met un fond, en revanche ça foire tout le tableau...
http://littlesweet-graph.forumactif.com/forum.htm
http://littlesweet-graph.forumactif.com/forum.htm
Re: Fond coloré dans un tableau
th3-P0taTo3s a écrit:Bonjour !
J'ai cherché partouuuuuuuuuut pour mettre un fond a mon tableau, mais je trouve nul part T-T
Voici mon code de tableau :
- Code:
<title>Conception d'onglet</title>
<script type="text/javascript" src="http://illiweb.com/fa/js_29/fr.js"></script>
<style>
/* Début de la feuille de style */ .onglet-content > div { display : none ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 20px ; margin-bottom : Xpx ; width : 700px ; } .onglet-content > div.active{ display : block ; } .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; } .onglet-table td { style : top ; vertical-align:middle ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 0px 10px ; opacity : 0.5 ; } .onglet-table td.active, .onglet-table td:hover { opacity : 1 ; } /* Fin de la feuille de style */ </style><center><script type="text/javascript"> /* Début du script */ jQuery(document).ready(function(){ jQuery(".onglet-table").find("td").click(function(){ /* Suppression des classe .active pour tout les onglets et contenus */ var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */ system.find(".onglet-table").find(".active").removeClass("active"); system.find(".onglet-content").find(".active").removeClass("active"); /* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */ var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */ jQuery(this).addClass("active"); system.find(".onglet-content").find("div[name='"+id+"']").addClass("active"); }); }); /*Fin du script */
</script>
<!-- Début du HTML --><div class="onglet">
<table><tbody><tr><td>
<table class="onglet-table">
<tbody><tr><td name="1" class="active">Onglet 1</td>
<td name="2">Onglet 2</td>
<td name="3">Onglet 3</td>
<td name="4">Onglet 4</td>
<td name="5">Onglet 5</td>
</tbody></table></td></tr><tr><td>
<div class="onglet-content">
<div name="1" class="active"> <table><tbody><tr>
<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/Sans_titre_1pngmm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/DSCF8461_129.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=1?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Pseudo : Admin<br>
- 1°Admin<br>
- Lucie<br>
- Née le 28 mai 1998<br>
- Utilise photoshop<br>
- Enjoy ! ♥ :3
</div></span>
</div></td>
<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/lm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/momopngl.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=2?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Nas Tashiya' Oz<br>
- 2°Admin<br>
- Morgane<br>
- Née le 1 Décembre 1996<br>
- Utilise photofiltre<br>
</div></span>
</div></td>
</td></tr></tbody></table> </div>
<div name="2">contenu de l'onglet 2</div>
<div name="3">contenu de l'onglet 3</div>
<div name="4">contenu de l'onglet 4</div>
<div name="5">contenu de l'onglet 5</div>
</div></td></tr></tbody></table>
Merci
Bonsoir ,
Si vous voulez mettre du gris (#b9b9b9) uniquement dans le cadre contenant les avatars ,
voilà le code modifié ...
- Code:
<title>Conception d'onglet</title>
<script type="text/javascript" src="http://illiweb.com/fa/js_29/fr.js"></script>
<style>
/* Début de la feuille de style */ .onglet-content > div { background-color:#b9b9b9; display : none ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 20px ; margin-bottom : Xpx ; width : 700px ; } .onglet-content > div.active{ display : block ; } .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; } .onglet-table td { style : top ; vertical-align:middle ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 0px 10px ; opacity : 0.5 ; } .onglet-table td.active, .onglet-table td:hover { opacity : 1 ; } /* Fin de la feuille de style */ </style><center><script type="text/javascript"> /* Début du script */ jQuery(document).ready(function(){ jQuery(".onglet-table").find("td").click(function(){ /* Suppression des classe .active pour tout les onglets et contenus */ var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */ system.find(".onglet-table").find(".active").removeClass("active"); system.find(".onglet-content").find(".active").removeClass("active"); /* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */ var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */ jQuery(this).addClass("active"); system.find(".onglet-content").find("div[name='"+id+"']").addClass("active"); }); }); /*Fin du script */
</script>
<!-- Début du HTML --><div class="onglet">
<table><tbody><tr><td>
<table class="onglet-table">
<tbody><tr><td name="1" class="active">Onglet 1</td>
<td name="2">Onglet 2</td>
<td name="3">Onglet 3</td>
<td name="4">Onglet 4</td>
<td name="5">Onglet 5</td>
</tbody></table></td></tr><tr><td>
<div class="onglet-content">
<div name="1" class="active"> <table><tbody><tr>
<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/Sans_titre_1pngmm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/DSCF8461_129.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=1?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Pseudo : Admin<br>
- 1°Admin<br>
- Lucie<br>
- Née le 28 mai 1998<br>
- Utilise photoshop<br>
- Enjoy ! ♥ :3
</div></span>
</div></td>
<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/lm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/momopngl.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=2?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Nas Tashiya' Oz<br>
- 2°Admin<br>
- Morgane<br>
- Née le 1 Décembre 1996<br>
- Utilise photofiltre<br>
</div></span>
</div></td>
</td></tr></tbody></table> </div>
<div name="2">contenu de l'onglet 2</div>
<div name="3">contenu de l'onglet 3</div>
<div name="4">contenu de l'onglet 4</div>
<div name="5">contenu de l'onglet 5</div>
</div></td></tr></tbody></table>
Si vous voulez changer tout le tableau (#b9b9b9) et modifier le cadre (gris clair =#e9e9e9) :
- Code:
<title>Conception d'onglet</title>
<script type="text/javascript" src="http://illiweb.com/fa/js_29/fr.js"></script>
<style>
/* Début de la feuille de style */ .onglet { background-color:#b9b9b9; } .onglet-content > div { background-color:#e9e9e9; display : none ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 20px ; margin-bottom : Xpx ; width : 700px ; } .onglet-content > div.active{ display : block ; } .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; } .onglet-table td { style : top ; vertical-align:middle ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 0px 10px ; opacity : 0.5 ; } .onglet-table td.active, .onglet-table td:hover { opacity : 1 ; } /* Fin de la feuille de style */ </style><center><script type="text/javascript"> /* Début du script */ jQuery(document).ready(function(){ jQuery(".onglet-table").find("td").click(function(){ /* Suppression des classe .active pour tout les onglets et contenus */ var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */ system.find(".onglet-table").find(".active").removeClass("active"); system.find(".onglet-content").find(".active").removeClass("active"); /* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */ var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */ jQuery(this).addClass("active"); system.find(".onglet-content").find("div[name='"+id+"']").addClass("active"); }); }); /*Fin du script */
</script>
<!-- Début du HTML --><div class="onglet">
<table><tbody><tr><td>
<table class="onglet-table">
<tbody><tr><td name="1" class="active">Onglet 1</td>
<td name="2">Onglet 2</td>
<td name="3">Onglet 3</td>
<td name="4">Onglet 4</td>
<td name="5">Onglet 5</td>
</tbody></table></td></tr><tr><td>
<div class="onglet-content">
<div name="1" class="active"> <table><tbody><tr>
<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/Sans_titre_1pngmm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/DSCF8461_129.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=1?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Pseudo : Admin<br>
- 1°Admin<br>
- Lucie<br>
- Née le 28 mai 1998<br>
- Utilise photoshop<br>
- Enjoy ! ♥ :3
</div></span>
</div></td>
<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/lm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/momopngl.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=2?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Nas Tashiya' Oz<br>
- 2°Admin<br>
- Morgane<br>
- Née le 1 Décembre 1996<br>
- Utilise photofiltre<br>
</div></span>
</div></td>
</td></tr></tbody></table> </div>
<div name="2">contenu de l'onglet 2</div>
<div name="3">contenu de l'onglet 3</div>
<div name="4">contenu de l'onglet 4</div>
<div name="5">contenu de l'onglet 5</div>
</div></td></tr></tbody></table>
Bonne suite à votre projet ,
Scoubifitz
Re: Fond coloré dans un tableau
Ha ça marche !
Merci beaucoup
Merci beaucoup
Sujets similaires
» Mettre une image de fond dans un tableau.
» Mettre une image de fond dans un tableau
» Code pour image de fond dans un tableau
» Modifier la couleur de fond d'un tableau dans "généralités".
» Supprimer le fond coloré de la page d'accueil sans modifier la couleur de la colonne
» Mettre une image de fond dans un tableau
» Code pour image de fond dans un tableau
» Modifier la couleur de fond d'un tableau dans "généralités".
» Supprimer le fond coloré de la page d'accueil sans modifier la couleur de la colonne
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum