Mise en page d'un tableau

par Shaof Mer 27 Mar 2013 - 15:02

Bonjour, j'ai un soucis avec un code. J'ai fais des recherches pour pouvoir faire un tableau plus jolie et au style de mon forum, mais le soucis, c'est que je n'obtiens pas ce que je souhaite. Je ne sais pas comment faire (étant nul en codage).

Avec ça...

Code:: [center]<div style="width: autopx; background-color: #FFFFFF; border: 2px solid #CADCEB;"><div style="width: autopx; background-color: #E1EBF2; border: 2px solid #CADCEB;margin: 3px;"><strong>Pokémon Sauvage</strong></div><table style="margin-left:auto; margin-right:auto;"><tr><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">N°</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">Pokémon</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">(Dés)avantages</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">N°</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">Pokémon</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">(Dés)avantages</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">N°</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">Pokémon</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">(Dés)avantages</div></td></tr><tr><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">1</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">[b]Roucool[/b][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img][hr][i]Niveau Inconnu[/i][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">[img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color] [center] [b]Faiblesse[/b][hr][b]Résistance[/b][/center] [right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">2</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">[b]Rattata[/b][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/19_rat10.png[/img][hr][i]Niveau Inconnu[/i][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/aucun10.png[/img]</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">[img]http://i73.servimg.com/u/f73/18/14/39/50/combat10.png[/img] [color=red]+5[/color] [center] [b]Faiblesse[/b][hr][b]Résistance[/b][/center] [right][color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">3</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">[b]Piafabec[/b][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/21_pia10.png[/img][hr][i]Niveau Inconnu[/i][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</div></td><td><div style="border: 2px solid #CADCEB; padding: 2px;background-color: #E1EBF2;margin: 3px;">[img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color] [center] [b]Faiblesse[/b][hr][b]Résistance[/b][/center] [right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</div></td></tr></table></div>[/center]

J'obtiens :

Mise en page d'un tableau Test_t10

Mais j'aimerais avoir ça :

Mise en page d'un tableau Test_t11

J'aimerais également, si possible, que chacun des blocs du tableau aient toujours la même auteur (sur la même ligne).

Merci d'avance !

par Kaff Mer 27 Mar 2013 - 15:16

Bonjour,
Avec un tel code de tableau il est difficile pour moi en tant que très débutant de m'y retrouver.

De débutant à débutant : ne serait-il pas plus simple de créer ces tableau sous forme d'image ? (sous Paint par exemple)

par Shaof Mer 27 Mar 2013 - 15:18

Plus simple, oui. Mais là, c'est un tableau que je modifierais régulièrement dans d'autres cas. Là c'est la forme de tableau pour les Pokémons sauvages mais je m'en servirait pour d'autres.

Et puis, ça me permet d'apprendre les codes.

par Scoubifitz Mer 27 Mar 2013 - 21:39

bonsoir,

en fait , les cartes pokemon sont juste à trois cellules , une en haut pour le titre , deux en dessous pour les descriptions ...

j'ai gardé le contenu , et simplifié au maximum ...

titre
photo	contenu

le reste se fait par CSS , que ce soit le titre ou la carte ...

le code à mettre dans le message :

Code:: <div class="pokebarre">Pokémon Sauvage</div> [table class="pokecard" cellspacing="5"][tr] [td colspan="2"]n° 1 - Roucool[/td] [/tr][tr] [td valign=top][b]Roucool[/b][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img][hr][i]Niveau Inconnu[/i][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img][/td][td][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color] [center] [b]Faiblesse[/b][hr][b]Résistance[/b][/center] [right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right][/td] [/tr][/table][table class="pokecard" cellspacing="5"][tr] [td colspan="2"]n° 2 - Rattata[/td] [/tr][tr] [td valign=top][b]Rattata[/b][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/19_rat10.png[/img][hr][i]Niveau Inconnu[/i][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/aucun10.png[/img] [/td] [td][img]http://i73.servimg.com/u/f73/18/14/39/50/combat10.png[/img] [color=red]+5[/color] [center] [b]Faiblesse[/b][hr][b]Résistance[/b][/center] [right][color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right][/td] [/tr][/table][table class="pokecard" cellspacing="5"][tr] [td colspan="2"]n° 3 - Piafabec[/td] [/tr][tr] [td valign=top][b]Piafabec[/b][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/21_pia10.png[/img][hr][i]Niveau Inconnu[/i][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img] [/td] [td][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color] [center] [b]Faiblesse[/b][hr][b]Résistance[/b][/center] [right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right][/td] [/tr][/table]

le code à mettre dans la feuille de style :

Code:: .pokebarre { background-color: #E1EBF2; border: 2px solid #CADCEB; margin: 3px; font-weight:bold; text-align:center; } .pokecard { margin: 4px; width:200px; height:300px; border: 2px solid #CADCEB; float:left; } .pokecard td{ border: 2px solid #CADCEB; padding:5px; background-color: #E1EBF2; text-align:center; }

par Shaof Jeu 28 Mar 2013 - 9:01

Histoire d'en savoir plus, qu'est-ce ça veut dire les nouvelles balises que tu as mis ? Cellspacing par exemple.

Il y a un soucis, la barre titre "Rattata" est plus grande en hauteur que les autres...

Si je souhaite faire plusieurs ligne, je dois copier le css en changeant les noms et le html ?

J'aimerais que la barre "Pokémon sauvage soit de la même grandeur que la largeur totale des autres bloc si possible. Et ensuite tout centré avec un margin histoire que si on réduit la taille de la fenêtre, ça se replace dans le coin gauche.

Il manque également le fond global que j'avais mis... Il ne faudrait pas que je vais un div class ?

par Shaof Jeu 28 Mar 2013 - 13:11

Désolé du double poste... J'ai trouvé une façon de faire sans passer par le css : Juste mettre dans le html.

Code:: <small> <table style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid; margin-left:auto; margin-right:auto;"> <caption style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Pokémons Sauvages[/b]</caption> <tr>  <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]1[/b]</td> <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]2[/b]</td> <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]3[/b]</td> </tr> <tr>  <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Roucool[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Rattata[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Piafabec[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> </tr> <tr>  <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> </tr> <tr valign=middle>  <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> </tr> <tr>  <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]4[/b]</td> <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]5[/b]</td> <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]6[/b]</td> </tr> <tr>  <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Roucool[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Rattata[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Piafabec[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> </tr> <tr>  <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> </tr> <tr valign=middle>  <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> </tr> <tr>  <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]7[/b]</td> <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]8[/b]</td> <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]9[/b]</td> </tr> <tr>  <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Roucool[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Rattata[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Piafabec[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> </tr> <tr>  <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> </tr> <tr valign=middle>  <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> </tr> <tr>  <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]10[/b]</td> <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]11[/b]</td> <td colspan="2" style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]12[/b]</td> </tr> <tr>  <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Roucool[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Rattata[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> <td colspan="2" style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[b]Piafabec[/b] [i]Niveau Inconnu[/i] [img]http://i73.servimg.com/u/f73/18/14/39/50/16_rou10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img]</td> </tr> <tr>  <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Faiblesses[/b]</td> <td align=center valign=bottom style="text-align: center; background: #E1EBF2; border: 1px #CADCEB solid;">[b]Résistances[/b]</td> </tr> <tr valign=middle>  <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[left][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color][/left]</td> <td style="text-align: center; background: #ECF3F7; border: 1px #CADCEB solid;">[right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right]</td> </tr> </table> </small>

par Scoubifitz Jeu 28 Mar 2013 - 15:01

Shaof a écrit:Histoire d'en savoir plus, qu'est-ce ça veut dire les nouvelles balises que tu as mis ? Cellspacing par exemple.

Il y a un soucis, la barre titre "Rattata" est plus grande en hauteur que les autres...

Si je souhaite faire plusieurs ligne, je dois copier le css en changeant les noms et le html ?

J'aimerais que la barre "Pokémon sauvage soit de la même grandeur que la largeur totale des autres bloc si possible. Et ensuite tout centré avec un margin histoire que si on réduit la taille de la fenêtre, ça se replace dans le coin gauche.

Il manque également le fond global que j'avais mis... Il ne faudrait pas que je vais un div class ?

bonjour,

cellspacing : espacement entre les cellules d'un tableau .

pour rajouter des cartes , il faut rajouter un tableau par carte :

Code:: [table class="pokecard" cellspacing="5"][tr] [td colspan="2"]n° 3 - Piafabec[/td] [/tr][tr] [td valign=top][b]Piafabec[/b][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/21_pia10.png[/img][hr][i]Niveau Inconnu[/i][hr][img]http://i73.servimg.com/u/f73/18/14/39/50/normal10.png[/img] [img]http://i73.servimg.com/u/f73/18/14/39/50/vol10.png[/img] [/td] [td][img]http://i73.servimg.com/u/f73/18/14/39/50/electr10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/glace10.png[/img] [color=red]+5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/roche10.png[/img] [color=red]+5[/color] [center] [b]Faiblesse[/b][hr][b]Résistance[/b][/center] [right][color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/insect10.png[/img] [color=green]-5[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/plante10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/sol10.png[/img] [color=green]ᴓ[/color] [img]http://i73.servimg.com/u/f73/18/14/39/50/spectr10.png[/img][/right][/td] [/tr][/table]

le CSS permet juste de répéter le style des cartes , en allégeant le code ...

la barre titre "rattata" à la même hauteur que les autres .

le dernier code que vous proposez a une structure différente , et le mélange de Html et de BBcode peut être embêtant en cas d'édition du message , le Html se transformant en BBcode ...

et si le Html n'est pas mis sur une seule ligne dans un message , un vide important apparait au dessus du tableau .