28216 sujets

CSS et mise en forme, CSS3

[RESOLU] Centrer un tableau dans un bloc flottant

Salut à tous

J'ai un petit soucis de centrage de tableau.
Je m'explique :
Je voudrais que le tableau du code ci-dessous soit au centre du bloc et non pas "collé sur la gauche de mon bloc"
Sachant que la solution idéale serait de positionner tous les tableaux de mon futur site au centre du bloc, je comptais mettre le code du centrage des tableaux dans une feuille de style externe

Quelqu'un peut il m'aider ? merci


C:\Documents and Settings\Cedric\amaya\1\le_gite.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta name="author" content="C Girollet" />
  <meta name="owner" content="C Girollet" />
  <meta name="Identifier-URL"
  content="http://www.chalet-lalouviere.net/le_gite.html" />
  <meta name="revisit-after" content="2 days" />
  <meta name="Copyright" content="C Girollet" />
  <meta name="verify-v1" content="EfDD2yl7HhnMSRVWOuR+zVkS7sAC2Kk+2vRWnH71GAM="
  />
  <meta name="generator" content="Amaya, see  http://www.w3.org/Amaya/"  />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Chalet La Louvière La Toussuire Savoie France / Le gite </title>
  <!-- La feuille de styles "base.css" doit être appelée en premier. -->
  <link rel="stylesheet" type="text/css" href="styles/base.css" media="all" />
  <link rel="stylesheet" type="text/css" href="styles/modele04.css"
  media="screen" />
</head>

<body>

<div id="global">

<div id="navigation">
<ul>
  <li>
    <table border="0" cellspacing="0">
      <tbody>
        <tr>
          <th><a href="index.html"><img alt="Version Française"
            src="images/logo_flag_fr.gif" width="22" height="16" /></a></th>
        </tr>
      </tbody>
    </table>
  </li>
  <li><a href="index.html">Accueil</a></li>
  <li><a href="le_gite.html">Le gîte</a></li>
  <li><a href="acces.html">Accès</a></li>
  <li><a href="reservation.html">Disponibilités</a></li>
  <li><a href="faune_flore.html">Faune et flore</a></li>
  <li><a href="livre_d_or.html">Livre d'or</a></li>
  <li><a href="liens.html">Liens</a></li>
  <li><a href="partenaires.html">Partenaires</a></li>
  <li><a href="a_propos.html">A propos</a></li>
</ul>
</div>
<!-- #navigation -->

<div id="contenu">
<h2 style="text-align:center;"><a href="http://www.chalet-lalouviere.net/"><img
alt="Louer votre appartement dans le chalet La Louvière à La Toussuire, en Savoie au coeur des Alpes françaises"
src="images/image_croix_chalet_90x103.GIF" width="90" height="70" /></a></h2>

<h3 style="text-align:center;">Le gîte</h3>

<p style="text-align:center;">Gîte de France 2 étoiles.<br />
Appartement plein sud de 50 m² (3 pièces), situé au rez de chaussée dans le
chalet du propriétaire (n° 142 sur le plan de la station), lieu très
calme.<br />
Le chalet se situe à 8 minutes à pied du centre de <a
href="http://www.la-toussuire.com/">La Toussuire</a><br />
</p>

<p style="text-align:center;">Le chalet est situé face aux Aiguilles d'Arves.
En été, observez les marmottes, les chamois et les aigles. En hiver, arrivez
"les skis aux pieds" sur la terrasse plein sud du chalet.</p>
<ul>
  <li>
    <table summary="Elements constitutifs du gîte" border="3" cellspacing="2">
      <caption><h3>Composition du gîte :</h3>
      </caption>
      <thead>
        <tr>
          <th style="text-align:center;"><h3><em>Coin cuisine</em></h3>
          </th>
          <th style="text-align:center;"><h3><em>Coin séjour</em></h3>
          </th>
          <th style="text-align:center;"><h3><em>Les 2 chambres</em></h3>
          </th>
          <th style="text-align:center;"><h3><em>Cadre de vie</em></h3>
          </th>
          <th style="text-align:center;"><h3><em>Divers</em></h3>
          </th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th style="text-align:left;">- 4 feux-gaz<br />
            - Four micro-onde<br />
            - Batterie de cuisine<br />
            - Cafetière électrique<br />
            - Cocotte minute</th>
          <th style="text-align:left;">Penderie</th>
          <th style="text-align:left;">Couvertures et oreillers</th>
          <th style="text-align:left;">Parking</th>
          <th style="text-align:left;">Coordonnées bancaires :<br />
            IBAN :<br />
            FR 76 1054 8000 1800 0461 8688 480<br />
            BIC :<br />
            BSAVFR2C</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <th style="text-align:left;">Lave-vaisselle</th>
          <th style="text-align:left;">Un canapé-gigogne</th>
          <th style="text-align:left;">Une chambre avec couchage :<br />
            - 1 lit superposé (2 pers.)<br />
            - et 1 lit gigogne (2 pers.)</th>
          <th style="text-align:left;">Terrasse de 50 m² plein sud<br />
            face aux <a
            href="http://picasaweb.google.fr/chaletlalouviere/ChaletLaLouvierePaysages#">Aiguilles
            d'Arves</a></th>
          <th style="text-align:left;">- Dépôt de garantie : chèque de 250
            €<br />
            - Taxe de séjour non incluse (0,50€/j/pers)<br />
            - Ménage : dépôt d'un chèque de 70 €<br />
            restitué si la propreté de l'appartement est irréprochable<br />
            - Frais de chauffage et d'électricité inclus<br />
            - Chèques-vacances acceptés</th>
        </tr>
        <tr>
          <th style="text-align:left;">Réfrigérateur</th>
          <th style="text-align:left;">Placards</th>
          <th style="text-align:left;">Une autre chambre avec couchage :<br />
            - 1 lit de 140cm (2 pers.)<br />
            - placards</th>
          <th style="text-align:left;">Terrain de 2 000 m<sup>2</sup></th>
          <th style="text-align:left;">- Possibilité de location de draps et
            linge<br />
            (8€ la paire / semaine)<br />
            - Prise TV<br />
            - Local à skis<br />
            - Animaux non-admis</th>
        </tr>
      </tbody>
    </table>
  </li>
</ul>

<h3 style="text-align:center;">M et Mme Marc-Henri GIROLLET<br />
Chalet La Louvière<br />
73300 La Toussuire<br />
04.79.56.73.14<br />
06.62.48.33.60</h3>

<p style="text-align:center;"><a
href="mailto:reservation@#NOSPAM#chalet-lalouviere.net?subject=Demande de réservation"><img
alt="Envoyez un e-mail au propriétaire" src="images/logo_e-mail.gif"
width="60" height="30" /></a> </p>

<p style="text-align:center;">(A l'ouverture de votre client de messagerie et
avant d'envoyer l'e-mail,</p>

<p style="text-align:center;">supprimez "<strong><em>#NOSPAM#</em></strong>"
dans l'adresse qui s'affiche)</p>
</div>
<!-- #contenu -->

<p id="copyright"><br />
<br />
</p>
<!-- DEBUT Google Analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-675533-2");
pageTracker._initData();
pageTracker._trackPageview();</script>
<!-- FIN Google Analytics -->
<!-- #copyright -->
</div>
<!-- #global -->
</body>
</html>
upload/18785-imagecentr.jpg
Modifié par miroune (05 Jan 2009 - 19:40)
Bonjour,

Les marges automatiques permettent de centrer un tableau horizontalement quelle que soit sa largeur. Donc: utiliser les marges automatiques. Smiley smile

En passant: pourquoi ces tableaux sont-ils placés dans des listes? Ça me semble un peu étrange et pas très justifié comme choix.
J'ai enlevé les listes de mes tableaux (...c'est déjà cela).

Par contre je ne comprends pas ou je dois placer le margin="auto" dans mon code pour centrer mon tableau, car si je regarde bien, je vois que celui-ci est centré par rapport à la page dans son entier (et non pas par rapport au bloc qui contient mon tableau).

Désolé pour mes questions de débutants.... Smiley cligne
miroune a écrit :
Par contre je ne comprends pas ou je dois placer le margin="auto" dans mon code pour centrer mon tableau

Il ne s'agit pas d'utiliser un attribut margin en HTML avec la valeur "auto" (cet attribut n'existe pas de toute manière...), mais d'utiliser la propriété CSS margin avec la valeur "auto".

Faire une recherche sur le centrage grâce à la technique des marges automatiques serait pertinent. Smiley cligne
je reviens à nouveau vers vous.

Donc dans mon fichier css qui est appelé lors du chargement de la page html, j'ai mis l'attribut suivant :

.centragetableau {
	margin: auto;
}


Mon probleme est que je ne sais pas ou placer le code (et surtout quel code !) qui fera que le tableau (par exemple celui ci-dessous) sera centré :

    <table summary="Les photos du gîte" border="3" cellspacing="2">
      <caption><h3>Les photos du gîte :</h3>
      </caption>
        <tr>
          <th style="text-align:center;"><a href="http://picasaweb.google.fr/chaletlalouviere/ChaletLaLouviereVueInterieureDuMeubl?"><img alt="Voir les photos de l'intérieur du chalet La Louvière" src="http://lh6.ggpht.com/_W3rDuFV7BIE/R-k_PJ15KJE/AAAAAAAABRs/Wwzy4Vi-5oQ/s160-c/ChaletLaLouviereVueInterieureDuMeubl.jpg" width="160" height="160" /><br />Chalet La Louviere<br />Vue Interieure du meublé</a>
          </th>
          <th style="text-align:center;"><h3><em>tralala</em></h3>
          </th>
          <th style="text-align:center;"><h3><em>tralala</em></h3>
          </th>
        </tr>
    </table


Merci pour l'aide
Bonsoir miroune,

Soit tu assignes cette classe au tableau concerné (dans le code html) :

<table [b]class="centragetableau"[/b] 
summary="Les photos du gîte" border="3" cellspacing="2">
etc...

Soit tu définis ce centrage pour l'ensemble de tes tableaux :

table {
	margin: [#blue](tu peux définir une marge haute et basse ici)[/#] auto;
}


Cdt,
Sylvain
J'ai opté pour la 2e solution (qui me semble plus pérenne)... et ça fonctionne !

En fait, étant débutant en xhtml et css, je ne définissais pas le bon attribut dans mon fichier css (externe), et donc mon editeur (Amaya) me renvoyais une erreur !

Donc pour ceux pour qui ce probleme se présenterai, je donne ici les codes que j'ai placé dans mes fichiers :

- Dans le fichier css "externe" :
/* Tableau */
.centragetableau {
	margin: auto;
}


- dans le fichier html :
<table class="centragetableau" summary="Les photos du gîte" etc etc .....


Je mets ce post en résolu Smiley smile

Merci à tous pour votre aide ... jusqu'à la prochaine fois Smiley langue
Sujet clos
Aller à