Probleme pour centrer un tableau
flexi2202
Messages postés
4141
Statut
Membre
-
flexi2202 -
flexi2202 -
bonjour a tous
j essaye de me construire une page web qui serais compatible avec tous les appareils
mais j ai deja un soucis avec mon logo et le centrage du tableau
si quelqu un peux m aider merci
j essaye de me construire une page web qui serais compatible avec tous les appareils
mais j ai deja un soucis avec mon logo et le centrage du tableau
si quelqu un peux m aider merci
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<div style="width:80%; text-align:center;">
<TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="80%"border="1">
<caption>Passagers du vol 377</caption>
<thead> <!-- En-tête du tableau -->
<tr>
<th colspan="6"><img src="https://www.000webhost.com/migrate?static=true" alt="" /></th>
</tr>
</thead>
<tfoot> <!-- Pied de tableau -->
<tr>
<th >Nom</th>
<th>Âge</th>
<td>mes debuts</td>
<td>astuces</td>
<td>Mon blog</td>
<td>contact</td>
</tr>
</tfoot>
<tbody> <!-- Corps du tableau -->
<tr>
<td WIDTH="25%">Carmen</td>
<td WIDTH="15%">acceuil</td>
<td WIDTH="15%">mes debuts</td>
<td WIDTH="15%">astuces</td>
<td WIDTH="15%">Mon blog</td>
<td WIDTH="15%">contact</td>
</tr>
<tr>
<td>Carmen</td>
<td colspan="5" rowspan="4">acceuil</td>
</tr>
<tr>
<td>Carmen</td>
</tr>
<tr>
<td>Carmen</td>
</tr>
<tr>
<td>Carmen</td>
</tr>
</tbody>
</table>
</body>
</html>
A voir également:
- Centrer tableau html
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
- Editeur html - Télécharger - HTML
7 réponses
Bonjour,
Il faut utiliser du CSS :
Et placer la class dans le code HTML :
Il faut utiliser du CSS :
.tableau
{
margin-left:auto;
margin-right:auto;
width:80%;
}
Et placer la class dans le code HTML :
<table cellspacing="2" cellpadding="2" border="1" class="tableau">
merci super cela fonctionne
un tout grand merci
a présent je souhaiterais que mon logo s adapte a la taille de sa cellule
merci de l aide
un tout grand merci
a présent je souhaiterais que mon logo s adapte a la taille de sa cellule
merci de l aide
Il faudrait déjà commencer par la réduire, car 992px × 185px et 186,06 Ko c'est beaucoup pour un logo.
Ensuite, il faut mettre des attributs width=" " et height=" ", soit aux dimensions de l'image, soit aux dimensions de la cellule.
Ce que je ferais, ce serait de mettre en pourcentage width="100% " height=" ". A tester, si ça convient.
Ensuite, il faut mettre des attributs width=" " et height=" ", soit aux dimensions de l'image, soit aux dimensions de la cellule.
Ce que je ferais, ce serait de mettre en pourcentage width="100% " height=" ". A tester, si ça convient.
Réduis les dimensions de l'image, tu ne vas probablement pas l'afficher en 992px × 185px.
Je n'avais pas regardé tout ton code, je crois comprendre que tu veux faire ton site en utilisant des tableaux pour sa mise en forme, si c'est bien ça, revois ton projet, on ne crée plus les sites de cette manière depuis longtemps.
Je n'avais pas regardé tout ton code, je crois comprendre que tu veux faire ton site en utilisant des tableaux pour sa mise en forme, si c'est bien ça, revois ton projet, on ne crée plus les sites de cette manière depuis longtemps.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
merci pour l aide
oui c est ca je veux faire avec des tableaux en html , comment je dois faire alors
un petit exemple svp merci
oui c est ca je veux faire avec des tableaux en html , comment je dois faire alors
un petit exemple svp merci
je pourrais faire comme ceci alors
CSS
.Tableau span {
display:inline;
float:left;
border:1px solid #FF6600;
margin:0px;
padding:3px;
}
.Tableau p {
clear:left;
margin:0px;
padding:0px;
height:100% !important; height:1em;
}
.Tableau p.legende {font-weight:bold}
.Tableau span.col1 {width:70px}
.Tableau span.col2 {width:120px}
.Tableau span.col3 {width:90px}
HTML
<div class="Tableau">
<p class="legende">
<span class="col1">Légende 1</span>
<span class="col2">Légende 2</span>
<span class="col3">Légende 3</span>
</p>
<p>
<span class="col1">Case 1.1</span>
<span class="col2">Case 1.2</span>
<span class="col3">Case 1.3</span>
</p>
<p>
<span class="col1">Case 2.1</span>
<span class="col2">Case 2.2</span>
<span class="col3">Case 2.3</span>
</p>
</div>
