Centrer un tableau HTML

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

Résolu Centrer un tableau HTML

Message par Calinepowa le Jeu 17 Avr 2014 - 10:45

Bien le bonjour !

Bien que je vais paraître bien ridicule car je suis certaine que la solution est simple  Laughing 

Je vous expose mon soucis. Actuellement je refais une entête de forum, j'ai donc établit des tableaux.

Voici mon résultat:

Pour moi ce n'est pas un soucis de CSS mais peut-être que je me trompe.

Le code est utilisé est celui-ci:
<table style="padding:3px; border:5px ridge #e0e0e0; background-color:#212121;">

<tbody>

<tr>

<td>
<strong><a href="https://servimg.com/image_preview.php?i=187&u=16360685" target="_blank"><img src="https://i56.servimg.com/u/f56/16/36/06/85/sc11.jpg" alt="Image hébergée par servimg.com" border="0" /></a></strong>
</td>

</tr>

</tbody>

</table>
<br /><br />
<table style="padding:3px; border:5px ridge #e0e0e0; background-color:#212121;">

</table>
<table style="padding:3px; border:5px ridge #e0e0e0; background-color:#212121;">

<tbody>

<tr>

<td>
<strong><span style="font-size: 18px; line-height: normal">État du Bois (Rôle Play) :</span></strong> <br /> <br /><span style="font-size: 14px; line-height: normal"> - On peut apercevoir un blocus d'ogres à Deuillevent à cause des sectateurs. <br />- Les sectateurs menacent toujours le Bois <br /> - Quelques worgens sauvages ont été aperçus sur la route principal proche de la Colline aux Corbeaux<br />- Nous rappelons que le Bosquet de Clairbois est libre d'accès <br /> </span> <br />
</td>

</tr>

</tbody>

</table>

<table style="padding:3px; border:5px ridge #e0e0e0; background-color:#212121;">

<tbody>

<tr>

<td>
<strong><span style="font-size: 18px; line-height: normal"> Liens utiles (Hors Rôle Play) :</span></strong><br /><br /> Les articles de lois sont disponibles <a href="http://veilleurs.pro-forum.fr/t2-lois-en-vigueur-dans-les-bois-de-la-penombre?tid=d99f2c86368a7f47f6363cf796529969" class="postlink">ici</a><br /> Pour nous rejoindre c'est <a href="http://veilleurs.pro-forum.fr/t66-fiche-de-recrutement?tid=d99f2c86368a7f47f6363cf796529969" class="postlink"> ici </a><br /> Pour communiquer avec nous en HRP c'est <a href="http://veilleurs.pro-forum.fr/f20-hrp-public?tid=dd570bccf96fd2175685a08932105f63" class="postlink">ici</a><br /> Pour communiquer avec nous en RP c'est <a href="http://veilleurs.pro-forum.fr/f6-courrier-a-la-ville" class="postlink">ici</a><br /> <br />
</td>

</tr>

</tbody>

</table>

<p>
<br /><br /><br /><br /><br /><br /> <meta http-equiv="Content-Language" content="fr" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Description" /><meta name="Keywords" />
</p><style type="text/css"><!--

TABLE {
float : left;
margin-left : 10px;
}
--></style> <br /><br />
<table style="padding:3px; border:5px ridge #e0e0e0; background-color:#212121;">

<tbody>

<tr>

<td>
<strong><strong><span style="font-size: 18px; line-height: normal">Statut de recrutement</span></strong></strong><br /><br /> <span style="color: rgb(51, 204, 0);"><span style="font-size: 22px; line-height: normal"><strong>OUVERT</strong></span></span><br /> <br />
</td>

</tr>

</tbody>

</table>

<p>
<meta http-equiv="Content-Language" content="fr" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Description" /><meta name="Keywords" />
</p><style type="text/css"><!--

TABLE {
float : left;
margin-left : 20px;
}
--></style> <br /><br />

J'ai essayé de caser des centers un peu partout... Sans résultat. ça marche très bien sans le cadre, mais avec rien ne fonctionne. J'ai cherché sur internet où j'ai trouvé ceci http://chatinais.pagesperso-orange.fr/courhtml/tableau/framalig.htm mais sans résultat concluant.

Merci d'avance Smile


Dernière édition par Calinepowa le Jeu 17 Avr 2014 - 19:31, édité 1 fois

Calinepowa
Nouveau membre

Messages : 9
Inscrit(e) le : 14/04/2014

http://veilleurs.pro-forum.fr/
Calinepowa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un tableau HTML

Message par Invité le Jeu 17 Avr 2014 - 11:19

Bonjour, tu as essayé <center> </center> ?  Rolling Eyes 

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un tableau HTML

Message par Calinepowa le Jeu 17 Avr 2014 - 11:36

@Calinepowa a écrit:

J'ai essayé de caser des centers un peu partout... Sans résultat. ça marche très bien sans le cadre, mais avec rien ne fonctionne. J'ai cherché sur internet où j'ai trouvé ceci http://chatinais.pagesperso-orange.fr/courhtml/tableau/framalig.htm mais sans résultat concluant.

Calinepowa
Nouveau membre

Messages : 9
Inscrit(e) le : 14/04/2014

http://veilleurs.pro-forum.fr/
Calinepowa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un tableau HTML

Message par Invité le Jeu 17 Avr 2014 - 11:41

A la fin tu as mis ceci


Dans ton tableau tu as mis
TABLE {
float : left;
margin-left : 20px;
}

>< pour cela que tu as tout à gauche

Essaie ceci

Code:
<table style="padding:3px; border:5px ridge #e0e0e0; background-color:#212121;">
   
   <tbody>
      
      <tr>
         
         <td>
            <strong><a href="http://www.servimg.com/image_preview.php?i=187&u=16360685" target="_blank"><img src="http://i56.servimg.com/u/f56/16/36/06/85/sc11.jpg" alt="Image hébergée par servimg.com" border="0" /></a></strong>
         </td>
         
      </tr>
      
   </tbody>
   
</table><br /><br />
<table style="padding:3px; border:5px ridge #e0e0e0; background-color:#212121;">
   
</table>
<table style="padding:3px; border:5px ridge #e0e0e0; background-color:#212121;">
   
   <tbody>
      
      <tr>
         
         <td>
            <strong><span style="font-size: 18px; line-height: normal">État du Bois (Rôle Play) :</span></strong> <br /> <br /><span style="font-size: 14px; line-height: normal"> - On peut apercevoir un blocus d'ogres à Deuillevent à cause des sectateurs. <br />- Les sectateurs menacent toujours le Bois <br /> - Quelques worgens sauvages ont été aperçus sur la route principal proche de la Colline aux Corbeaux<br />- Nous rappelons que le Bosquet de Clairbois est libre d'accès <br /> </span> <br />
         </td>
         
      </tr>
      
   </tbody>
   
</table>
 
<table style="padding:3px; border:5px ridge #e0e0e0; background-color:#212121;">
   
   <tbody>
      
      <tr>
         
         <td>
            <strong><span style="font-size: 18px; line-height: normal"> Liens utiles (Hors Rôle Play) :</span></strong><br /><br /> Les articles de lois sont disponibles <a href="http://veilleurs.pro-forum.fr/t2-lois-en-vigueur-dans-les-bois-de-la-penombre?tid=d99f2c86368a7f47f6363cf796529969" class="postlink">ici</a><br /> Pour nous rejoindre c'est <a href="http://veilleurs.pro-forum.fr/t66-fiche-de-recrutement?tid=d99f2c86368a7f47f6363cf796529969" class="postlink"> ici </a><br /> Pour communiquer avec nous en HRP c'est <a href="http://veilleurs.pro-forum.fr/f20-hrp-public?tid=dd570bccf96fd2175685a08932105f63" class="postlink">ici</a><br /> Pour communiquer avec nous en RP c'est <a href="http://veilleurs.pro-forum.fr/f6-courrier-a-la-ville" class="postlink">ici</a><br /> <br />
         </td>
         
      </tr>
      
   </tbody>
   
</table>
 
<p>
   <br /><br /><br /><br /><br /><br /> <meta http-equiv="Content-Language" content="fr" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Description" /><meta name="Keywords" />
</p><style type="text/css"><!--

TABLE {
float : center;
margin-left : px;
}
--></style>
<table style="padding:3px; border:5px ridge #e0e0e0; background-color:#212121;">
   
   <tbody>
      
      <tr>
         
         <td>
            <strong><strong><span style="font-size: 18px; line-height: normal">Statut de recrutement</span></strong></strong><br /><br /> <span style="color: rgb(51, 204, 0);"><span style="font-size: 22px; line-height: normal"><strong>OUVERT</strong></span></span><br /> <br />
         </td>
         
      </tr>
      
   </tbody>
   
</table>
 
<p>
   <meta http-equiv="Content-Language" content="fr" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Description" /><meta name="Keywords" />
</p><style type="text/css"><!--

TABLE {
float : center;
margin-left : px;
}
--></style> <br /><br />

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un tableau HTML

Message par Calinepowa le Jeu 17 Avr 2014 - 11:48

J'ai déjà essayé de mettre center à la place de left.

Calinepowa
Nouveau membre

Messages : 9
Inscrit(e) le : 14/04/2014

http://veilleurs.pro-forum.fr/
Calinepowa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un tableau HTML

Message par Invité le Jeu 17 Avr 2014 - 11:49

J'ai édité le message Smile

essaie le tableau que j'ai fais

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un tableau HTML

Message par Calinepowa le Jeu 17 Avr 2014 - 12:04

Rien à faire ça reste toujours collé à gauche

Calinepowa
Nouveau membre

Messages : 9
Inscrit(e) le : 14/04/2014

http://veilleurs.pro-forum.fr/
Calinepowa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un tableau HTML

Message par Invité le Jeu 17 Avr 2014 - 12:06

Flûte ça marche sur mon forum test  What's happen ?!?

regarde

http://redcenter.forumgratuit.org/

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un tableau HTML

Message par Tech le Jeu 17 Avr 2014 - 12:12

Bonjour,

Votre structure est tout à revoir... Je ne comprends pas pourquoi vous avez autant de table alors qu'une suffirait...
La structure suivante suffirait :
Code:
<table><tr>
<td>Ligne 1 / Colonne 1</td><td>Ligne 1 / Colonne 2</td>
</tr><tr>
<td>Ligne 2 / Colonne 1</td><td>Ligne 2 / Colonne 2</td>
</tr></table>

Mais sinon pour center le texte, il suffit de rajouter à votre table le style suivant text-align: center; ce qui donnera :
Code:
<table style="text-align: center;">...</table>

Et si c'est les cellules que vous voulez centrer et pas le texte, au lieu de mettre text-align: center; vous devez mettre margin: auto;

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21122
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un tableau HTML

Message par Calinepowa le Jeu 17 Avr 2014 - 12:20

Simple côté esthétique Tech Smile

Mais, à part incompréhension de ma part... Si j'ajoute le margin je perds mon padding toussa toussa et donc mon cadre. Excusez-moi je suis de niveau extrêmement débutant.

EDIT : Je suis phpBB3 si ça peut aider

Calinepowa
Nouveau membre

Messages : 9
Inscrit(e) le : 14/04/2014

http://veilleurs.pro-forum.fr/
Calinepowa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un tableau HTML

Message par Scoubifitz le Jeu 17 Avr 2014 - 18:06

bonjour,

ne serait-il pas plus simple de mettre le contenu dans 4 cellules , comme ceci ?

image
texte très long
texte
texte
remplacez tout le code par ceci :

Code:
<style type="text/css">
.accueil{
  border-spacing:3px;
  margin:auto;
}
.accueil td{
  padding:5px;
  border:5px ridge #e0e0e0;
  background-color:#212121;
  vertical-align:top;
}
.accueil p{
  font-size: 14px;
}
</style>
<table class="accueil">
<tbody>
<tr>
<td colspan="2"><img src="http://i56.servimg.com/u/f56/16/36/06/85/sc11.jpg" alt="Image hébergée par servimg.com" border="0" /></td>
</tr>
<tr>
<td colspan="2">
<h3>État du Bois (Rôle Play) :</h3>
<p> - On peut apercevoir un blocus d'ogres à Deuillevent à cause des sectateurs. <br />
- Les sectateurs menacent toujours le Bois <br />
- Quelques worgens sauvages ont été aperçus sur la route principal proche de la Colline aux Corbeaux<br />
- Nous rappelons que le Bosquet de Clairbois est libre d'accès </p>
</td>
</tr>
<tr>
<td>
<h3> Liens utiles (Hors Rôle Play) :</h3>
<p> Les articles de lois sont disponibles <a href="http://veilleurs.pro-forum.fr/t2-" class="postlink">ici</a><br />
Pour nous rejoindre c'est <a href="http://veilleurs.pro-forum.fr/t66-" class="postlink"> ici </a><br />
Pour communiquer avec nous en HRP c'est <a href="http://veilleurs.pro-forum.fr/f20-" class="postlink">ici</a><br />
Pour communiquer avec nous en RP c'est <a href="http://veilleurs.pro-forum.fr/f6-" class="postlink">ici</a>
</td>
<td>
<h3>Statut de recrutement</h3>
<h2 style="color: rgb(51, 204, 0)">OUVERT</h2>
</td>
</tr>
</tbody>
</table>

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: Centrer un tableau HTML

Message par Calinepowa le Jeu 17 Avr 2014 - 19:31

J'ai remanipulé et le code de mistermind marche ! Pourquoi il n'a pas marché la première fois je ne sais pas... Merci beaucoup !

Ps : Plusieurs cellules c'est vraiment pour le côté esthétique, c'est pour ça que le tout collé ne m'intéressait pas Smile

Calinepowa
Nouveau membre

Messages : 9
Inscrit(e) le : 14/04/2014

http://veilleurs.pro-forum.fr/
Calinepowa 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