2 tableaux de dimensions différentes
Punkizo
Messages postés
13
Statut
Membre
-
MxM971 Messages postés 265 Statut Membre -
MxM971 Messages postés 265 Statut Membre -
Bonjour,
ici, mon problème est que j'ai fixé pour <table> mais les deux tableaux se différent, pourquoi? Je voudrais garder les mêmes dimensions.
Voici, l'html:
<table>
<caption>Tarifs des cafés</caption>
<tr>
<th style="color:#F0F8FF;">Types de cafés</th>
<th style="color:#F0F8FF;">Capacité</th>
<th style="color:#F0F8FF;">Prix</th>
</tr>
<tr>
<td style="color:#F0F8FF;">Décaféiné</td>
<td rowspan="9" style="color:#F0F8FF;">33 cl</td>
<td style="color:#F0F8FF;">2€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">Espresso</td>
<td style="color:#F0F8FF;">3€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">Capuccino</td>
<td style="color:#F0F8FF;">3€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">Ristretto</td>
<td style="color:#F0F8FF;">4€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">Café au lait</td>
<td style="color:#F0F8FF;">2,50€</td>
</tr>
</table>
<table>
<caption>Tarifs pour l'usage des ordinateurs</caption>
<tr>
<th style="color:#F0F8FF;">Nombre d'heures</th>
<th style="color:#F0F8FF;">Prix(+18 ans)</th>
<th style="color:#F0F8FF;">Prix(-18 ans)</th>
</tr>
<tr>
<td style="color:#F0F8FF;">1</td>
<td style="color:#F0F8FF;">4€</td>
<td style="color:#F0F8FF;">2,50€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">2</td>
<td style="color:#F0F8FF;">6€</td>
<td style="color:#F0F8FF;">4€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">3</td>
<td style="color:#F0F8FF;">8€</td>
<td style="color:#F0F8FF;">5,50€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">4</td>
<td style="color:#F0F8FF;">10€</td>
<td style="color:#F0F8FF;">7€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">5</td>
<td style="color:#F0F8FF;">12€</td>
<td style="color:#F0F8FF;">9,50€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">+5</td>
<td style="color:#F0F8FF;">25€</td>
<td style="color:#F0F8FF;">20€</td>
</tr>
</table>
</section>
<footer>
<!--PIED DE PAGE-->
<span class="piedgauche">
xxx
</span>
<span class="piedcentre">
xxx
</span>
<span class="pieddroit">
xxx
</span>
</footer>
</body>
</html>
Le css:
table
{
padding-left:465px;
text-align:center;
padding-right:20px;
padding-bottom:20px;
padding-top:20px;
display:block;
border-collapse: collapse;
}
td, th
{
width:40%;
height:40%;
border: 1px solid #F0F8FF;
font-size:#F0F8FF;
}
caption
{
color:#F0F8FF;
}
ici, mon problème est que j'ai fixé pour <table> mais les deux tableaux se différent, pourquoi? Je voudrais garder les mêmes dimensions.
Voici, l'html:
<table>
<caption>Tarifs des cafés</caption>
<tr>
<th style="color:#F0F8FF;">Types de cafés</th>
<th style="color:#F0F8FF;">Capacité</th>
<th style="color:#F0F8FF;">Prix</th>
</tr>
<tr>
<td style="color:#F0F8FF;">Décaféiné</td>
<td rowspan="9" style="color:#F0F8FF;">33 cl</td>
<td style="color:#F0F8FF;">2€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">Espresso</td>
<td style="color:#F0F8FF;">3€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">Capuccino</td>
<td style="color:#F0F8FF;">3€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">Ristretto</td>
<td style="color:#F0F8FF;">4€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">Café au lait</td>
<td style="color:#F0F8FF;">2,50€</td>
</tr>
</table>
<table>
<caption>Tarifs pour l'usage des ordinateurs</caption>
<tr>
<th style="color:#F0F8FF;">Nombre d'heures</th>
<th style="color:#F0F8FF;">Prix(+18 ans)</th>
<th style="color:#F0F8FF;">Prix(-18 ans)</th>
</tr>
<tr>
<td style="color:#F0F8FF;">1</td>
<td style="color:#F0F8FF;">4€</td>
<td style="color:#F0F8FF;">2,50€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">2</td>
<td style="color:#F0F8FF;">6€</td>
<td style="color:#F0F8FF;">4€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">3</td>
<td style="color:#F0F8FF;">8€</td>
<td style="color:#F0F8FF;">5,50€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">4</td>
<td style="color:#F0F8FF;">10€</td>
<td style="color:#F0F8FF;">7€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">5</td>
<td style="color:#F0F8FF;">12€</td>
<td style="color:#F0F8FF;">9,50€</td>
</tr>
<tr>
<td style="color:#F0F8FF;">+5</td>
<td style="color:#F0F8FF;">25€</td>
<td style="color:#F0F8FF;">20€</td>
</tr>
</table>
</section>
<footer>
<!--PIED DE PAGE-->
<span class="piedgauche">
xxx
</span>
<span class="piedcentre">
xxx
</span>
<span class="pieddroit">
xxx
</span>
</footer>
</body>
</html>
Le css:
table
{
padding-left:465px;
text-align:center;
padding-right:20px;
padding-bottom:20px;
padding-top:20px;
display:block;
border-collapse: collapse;
}
td, th
{
width:40%;
height:40%;
border: 1px solid #F0F8FF;
font-size:#F0F8FF;
}
caption
{
color:#F0F8FF;
}
A voir également:
- 2 tableaux de dimensions différentes
- Supercopier 2 - Télécharger - Gestion de fichiers
- Fusionner 2 tableaux excel - Guide
- 2 ecran pc - Guide
- Tableaux croisés dynamiques - Guide
- Word numéro de page 1/2 - Guide
4 réponses
essayez de mettre dans votre code css au niveau du sélecteur table les dimension de vos tableaux AVEC SIZE:valeur;
Et si tu rajoute une classe a tes 2 tabs? et que tu l'appele comme ça dans ton css : .maClasse table
ça passe ?
ça passe ?
Aucune des deux solutions ne fonctionnent mais je pense que vous m'avez mal compris. Je recherche juste à agrandir l'intérieur du tableau c'est à dire les colonnes et les lignes.
Je rappelle aussi que les balise table ne sont pas pour de la mise en page(depuis 10 ans et l'apparition du css ce n'est plus le cas). Vous pouvez tout à fait utiliser des div positionné les uns à côté des autres(et des saut à la ligne) pour la même mise en page mais en plus simple facile à écrire et efficace.
Et que les valeurs de positionnement dans votre page(qui ne sont toute de façon pas juste) doivent être indiquées en valeurs proportionnelles(% par exemple) pour pouvoir s'adapter à toutes les résolutions et tailles d'écran (ratio 4:3, 16:9 ).