Bonjour à tous,
Merci par avance pour vos conseils et l'aide que vous pourrez m'apporter.
Mon problème n'est pas, au premier abord, complexe en soit mais j'ai un peu de mal du fait de mes connaissances basiques en CSS.
Merci d'ouvrir l'image ci-jointe afin de voir le tableau que j'aimerais reproduire en CSS.
En gros j'aimerais reproduire un tableau de 6 colonnes, et d'une dizaines de ligne avec la première et la dernière ligne grisé en background puis une ligne sur deux blanche et l'autre gris clair pour une lecture plus aisée.
L'autre problèmatique que je me pose est la suivante : Comment faire pour que tout une colone soit mise en valeur par un background plus foncé comme c'est le cas sur l'image ci-jointe pour la colonne "Visites" ?
On m'a dit que l'on pouvais faire heriter des classes et utiliser des TH au lieu des TR...
Si vous pouviez me donner un petit exemple de tableau dans ce style la, j'apprécierais !
Encore merci pour avoir pris le temps de me lire,
Alexandre
Version complète : Problème de création de tableau Full CSS
Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS
Re,
Je pensais le forum plus actif...
Voila ce que j'ai fait en pièce jointe, ca correspond bien à ce que je souhaite faire mais pour cela j'ai dû créer beaucoup de class... je pense que mon fichier n'est pas du tout optimisé...
Peut-etre pouvez vous me donner vos astuces afin d'alleger mon fichier CSS, peut-etre n'ai-je pas la bonne méthode...
Merci pour vos réponses ?
Alex.
Je pensais le forum plus actif...
Voila ce que j'ai fait en pièce jointe, ca correspond bien à ce que je souhaite faire mais pour cela j'ai dû créer beaucoup de class... je pense que mon fichier n'est pas du tout optimisé...
Peut-etre pouvez vous me donner vos astuces afin d'alleger mon fichier CSS, peut-etre n'ai-je pas la bonne méthode...
Merci pour vos réponses ?
Alex.
bonjour,
le forum est actif, mais pas forcément le week-end et encore moins les jours férié
th sert à présenter un entête de colonne, il ne faut pas l'utiliser partout
et le css
le forum est actif, mais pas forcément le week-end et encore moins les jours férié
th sert à présenter un entête de colonne, il ne faut pas l'utiliser partout
Code
<table id="test"> <tr class="bg1"> <th class="left">Configurations</th> <th>Dual 1.8GHz</th> <th>Dual 2GHz</th>
<th>Dual 2.5GHz</th> </tr> <tr> <th class="left">Model</th> <td>M9454LL/A</td> <td>M9455LL/A</td> <td>M9457LL/A</td> </tr> <tr class="bg2"> <th class="left">G5 Processor</th> <td>Dual 1.8GHz PowerPC G5</td> <td>Dual 2GHz PowerPC G5</td> <td>Dual 2.5GHz PowerPC G5</td> </tr> <tr> <th class="left">Frontside bus</th> <td>900MHz per processor</td> <td>1GHz per processor</td> <td>1.25GHz per processor</td> </tr> <tr class="bg2"> <th class="left">Level2 Cache</th> <td>512K per processor</td> <td>512K per processor</td> <td>512K per processor</td> </tr> <tr> <th class="left">Frontside bus</th> <td>900MHz per processor</td> <td>1GHz per processor</td> <td>1.25GHz per processor</td> </tr> <tr class="bg1"> <td colspan="4">ConfigurationsDual 1.8GHzDual 2GHzDual 2.5GHz</td> </tr>
</table>
<th>Dual 2.5GHz</th> </tr> <tr> <th class="left">Model</th> <td>M9454LL/A</td> <td>M9455LL/A</td> <td>M9457LL/A</td> </tr> <tr class="bg2"> <th class="left">G5 Processor</th> <td>Dual 1.8GHz PowerPC G5</td> <td>Dual 2GHz PowerPC G5</td> <td>Dual 2.5GHz PowerPC G5</td> </tr> <tr> <th class="left">Frontside bus</th> <td>900MHz per processor</td> <td>1GHz per processor</td> <td>1.25GHz per processor</td> </tr> <tr class="bg2"> <th class="left">Level2 Cache</th> <td>512K per processor</td> <td>512K per processor</td> <td>512K per processor</td> </tr> <tr> <th class="left">Frontside bus</th> <td>900MHz per processor</td> <td>1GHz per processor</td> <td>1.25GHz per processor</td> </tr> <tr class="bg1"> <td colspan="4">ConfigurationsDual 1.8GHzDual 2GHzDual 2.5GHz</td> </tr>
</table>
et le css
Code
#test {
font: 11px "Arial", Verdana, Helvetica, sans-serif;
color: #000000;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
width: 700px;
padding: 0;
margin: 0;
border-spacing:0;
}
#test td, #test th { border-bottom: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; padding: 6px 12px; }
#test tr.bg1 { background-color: #E5E5E5; }
#test tr.bg2 { background-color: #F9F9F9; }
#test tr.bg1 th { text-align: center; }
#test th { font-weight: normal; }
#test .left { text-align: left; };
font: 11px "Arial", Verdana, Helvetica, sans-serif;
color: #000000;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
width: 700px;
padding: 0;
margin: 0;
border-spacing:0;
}
#test td, #test th { border-bottom: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; padding: 6px 12px; }
#test tr.bg1 { background-color: #E5E5E5; }
#test tr.bg2 { background-color: #F9F9F9; }
#test tr.bg1 th { text-align: center; }
#test th { font-weight: normal; }
#test .left { text-align: left; };
Merci Ldo,
Effectivement je ne savais pas tout ça...
Et ton CSS est beaucoup plus "mince" que le mien... je vais me calquer sur celui la maintenant. Par contre dans ton exemple, tu as mis la meme chose partout, or jai des couleurs de bordures différentes pour la première ligne et la dernière ligne ! Faut-il que je fasse une autre class ou pas ?
Idem, dans l'exemple ci-joint, tu peux voir que j'ai ajouter deux tableaux au dessus pour reproduire l'effet escompté mais on se rend compte aussi que la problèmatique est différente, j'ai donc dû faire encore d'autre class. (toujours cette même problèmatique de couleur et de dédoublement de ligne à éviter...)
Qu'en penses-tu?
Alex.
Effectivement je ne savais pas tout ça...
Et ton CSS est beaucoup plus "mince" que le mien... je vais me calquer sur celui la maintenant. Par contre dans ton exemple, tu as mis la meme chose partout, or jai des couleurs de bordures différentes pour la première ligne et la dernière ligne ! Faut-il que je fasse une autre class ou pas ?
Idem, dans l'exemple ci-joint, tu peux voir que j'ai ajouter deux tableaux au dessus pour reproduire l'effet escompté mais on se rend compte aussi que la problèmatique est différente, j'ai donc dû faire encore d'autre class. (toujours cette même problèmatique de couleur et de dédoublement de ligne à éviter...)
Qu'en penses-tu?
Alex.
heu, je ne comprend pas trop ce que tu veut la :/
Ben tout simplement avoir le même résultat que ce que j'ai avec mon gros fichier à l'origine, à savoir avoir une bordure d'une couleur différente pour la première et la dernière ligne de mon tableau ce qui n'est pas le cas avec ton fichier CSS (qui est parfait sauf sur ce point la).
Désolé si je ne suis pas très clair, mais compare nos deux tableaux et tu verras la différence de contour plus foncé sur la premiere et la derniere ligne de mon tableau alors que tu as réutilisé la meme pour tout le tableau...
Désolé si je ne suis pas très clair, mais compare nos deux tableaux et tu verras la différence de contour plus foncé sur la premiere et la derniere ligne de mon tableau alors que tu as réutilisé la meme pour tout le tableau...
bah heuu tu fais une classe genre #test tr.bg3 et tu choisis un gris plus foncé puis tu assignes ta classe à la première et à la dernière ligne...
il me semble.
il me semble.
Ben nan justement... déjà essayé et ca marche pas... ya une class qui doit prendre le dessus...
bon je me suis amusé à tester le code de ldo, et il marche nickel (comme d'habitude 
), de plus, la première et la dernière ligne sont bel et bien différentes des autres, comme tu le souhaitais...
Donc heuuu, le problème viendrait plutôt du code que tu aurais greffé en sus de celui de ldo... mais teste le sien tout seul à part et tu verras que tu as ce que tu avais demandé...
), de plus, la première et la dernière ligne sont bel et bien différentes des autres, comme tu le souhaitais...Donc heuuu, le problème viendrait plutôt du code que tu aurais greffé en sus de celui de ldo... mais teste le sien tout seul à part et tu verras que tu as ce que tu avais demandé...
Je crois que l'on s'est mal compris... le code de LDO fonctionne à merveille sauf sur un unique point la bordure de la premiere et la derniere ligne.
J'utilise son code sans rien changer et je vois tres bien la différence entre mon tableau d'origine et celui la (l'unique différence d'ailleurs).
Donc pour être plus clair, j'ai joins deux images, mon tableau avec la bordure plus foncé, et son tableau, tu pourras ainsi comprendre de quoi je parle et le seul souci que j'essaye de résoudre.
Alex.
J'utilise son code sans rien changer et je vois tres bien la différence entre mon tableau d'origine et celui la (l'unique différence d'ailleurs).
Donc pour être plus clair, j'ai joins deux images, mon tableau avec la bordure plus foncé, et son tableau, tu pourras ainsi comprendre de quoi je parle et le seul souci que j'essaye de résoudre.
Alex.
ah ok, je vois la différence maintenant.
Je vais regarder un peu ca de mon coté (mais n'espere pas trop )
Je vais regarder un peu ca de mon coté (mais n'espere pas trop
)
merci ! c'est déjà gentil d'essayer...
oki, j'avais pas vu la légère différence
CSS
#test { font: 11px "Arial", Verdana, Helvetica, sans-serif; color: #000000; width: 700px; padding: 0; margin: 0; border-spacing:0; }
#test td, #test th { border-bottom: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; padding: 6px 12px; }
#test .bg1 th, #test .bg1 td { border-bottom: 1px solid #BBBBBB; border-right: 1px solid #BBBBBB; border-top: 1px solid #BBBBBB; }
#test .bg1 th.left, #test .bg1 td { border-left: 1px solid #BBBBBB; }
#test tr.bg1 { background-color: #E5E5E5; }
#test tr.bg2 { background-color: #F9F9F9; }
#test tr.bg1 th { text-align: center; }
#test th { font-weight: normal; }
#test th.left { font-weight: normal; border-left: 1px solid #DDDDDD; }
#test .left { text-align: left; }
#test tr.noBottomBorder th, #test tr.noBottomBorder td { border-bottom: none; }
Code
<table id="test"> <tr class="bg1"> <th class="left">Configurations</th> <th>Dual 1.8GHz</th> <th>Dual 2GHz</th> <th>Dual 2.5GHz</th> </tr> <tr> <th class="left">Model</th> <td>M9454LL/A</td> <td>M9455LL/A</td> <td>M9457LL/A</td> </tr> <tr class="bg2"> <th class="left">G5 Processor</th> <td>Dual 1.8GHz PowerPC G5</td> <td>Dual 2GHz PowerPC G5</td> <td>Dual 2.5GHz PowerPC G5</td> </tr> <tr> <th class="left">Frontside bus</th> <td>900MHz per processo</td> <td>1GHz per processor</td> <td>1.25GHz per processor</td> </tr> <tr class="bg2"> <th class="left">Level2 Cache</th> <td>512K per processor</td> <td>512K per processor</td> <td>512K per processor</td> </tr> <tr class="noBottomBorder"> <th class="left">Frontside bus</th> <td>900MHz per processor</td> <td>1GHz per processor</td> <td>1.25GHz per processor</td> </tr> <tr class="bg1"> <td colspan="4">ConfigurationsDual 1.8GHzDual 2GHzDual 2.5GHz</td> </tr>
</table>
</table>
Yes ! Parfait c'est exactement ca !!
Merci beaucoup LDO d'avoir pris le temps de regarder à nouveau... j'ai un code beaucoup plus light désormais !
Alex.
Merci beaucoup LDO d'avoir pris le temps de regarder à nouveau... j'ai un code beaucoup plus light désormais !
Alex.
Bonjour à tous, je viens de découvrir ce fil, et pour ma part je voudrais faire le même style de tableau mais en total css, pas de td de tr pas de tableau du tout.
Quelqu'un saurait m'éguiller un petit peu.
Quelqu'un saurait m'éguiller un petit peu.
Pourquoi un tableau sans les balises appropriées ? C'est pas gênant d'utiliser <table> pour des données tabulaires, au contraire, ça été inventé pour ça !
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.