Mise en page d'un tableau

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Mise en page d'un tableau

Message par Shaof le 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 :



Mais j'aimerais avoir ça :



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 !


Dernière édition par Shaof le Jeu 28 Mar 2013 - 14:28, édité 1 fois

Shaof
***

Masculin
Messages : 121
Inscrit(e) le : 26/02/2013

http://kodraf.pokemonrpg.org
Shaof a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un tableau

Message par Kaff le 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)

Kaff
*

Messages : 30
Inscrit(e) le : 19/03/2013

http://les-wazmoket.forumperso.com/
Kaff a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un tableau

Message par Shaof le 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.

Shaof
***

Masculin
Messages : 121
Inscrit(e) le : 26/02/2013

http://kodraf.pokemonrpg.org
Shaof a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un tableau

Message par Scoubifitz le 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
photocontenu

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;
}

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un tableau

Message par Shaof le 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 ?

Shaof
***

Masculin
Messages : 121
Inscrit(e) le : 26/02/2013

http://kodraf.pokemonrpg.org
Shaof a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un tableau

Message par Shaof le 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> <!-- Lignes des Numéros -->

      <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> <!-- Lignes des Pokémons -->

      <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> <!-- TITRE -->

      <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> <!-- Faiblesses et Résistances -->

      <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> <!-- Lignes des Numéros -->

      <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> <!-- Lignes des Pokémons -->

      <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> <!-- TITRE -->

      <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> <!-- Faiblesses et Résistances -->

      <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> <!-- Lignes des Numéros -->

      <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> <!-- Lignes des Pokémons -->

      <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> <!-- TITRE -->

      <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> <!-- Faiblesses et Résistances -->

      <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> <!-- Lignes des Numéros -->

      <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> <!-- Lignes des Pokémons -->

      <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> <!-- TITRE -->

      <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> <!-- Faiblesses et Résistances -->

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

Shaof
***

Masculin
Messages : 121
Inscrit(e) le : 26/02/2013

http://kodraf.pokemonrpg.org
Shaof a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un tableau

Message par Scoubifitz le 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 .

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un tableau

Message par Shaof le Jeu 28 Mar 2013 - 15:03

Je sais je sais, là je l'ai mis comme ça pour éditer, mais je collerais tout ensemble après, histoire de ne pas avoir ce vide Smile

Shaof
***

Masculin
Messages : 121
Inscrit(e) le : 26/02/2013

http://kodraf.pokemonrpg.org
Shaof a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un tableau

Message par Scoubifitz le Jeu 28 Mar 2013 - 15:13

Si votre problème est résolu , bonne suite à votre projet , alors !^^

Amicalement ,
Scoubifitz

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum