+ Répondre à la discussion
Affichage des résultats 1 à 7 sur 7
  1. #1
    Membre régulier
    Inscrit en
    avril 2005
    Messages
    223
    Détails du profil
    Informations forums :
    Inscription : avril 2005
    Messages : 223
    Points : 91
    Points
    91

    Par défaut [CSS] centrer un tableau

    Voila, j'éssai de centrer un tableau au milieu de la page avec du code CSS mais je n'y arrive pas.

    J'ai réussi à la centrer avec ce code :

    Code :
    1
    2
    3
    4
    5
    6
    table
    {
    	caption-side : top;
    	position : absolute;
    	left : centrer;
    }
    Le problème c'est que vu qu'il y a quatre tableaux, ils se chevauchent tous.

    Avez-vous la solution ?

    Merci.

  2. #2
    Membre éprouvé
    Avatar de ilood
    Inscrit en
    mars 2005
    Messages
    468
    Détails du profil
    Informations forums :
    Inscription : mars 2005
    Messages : 468
    Points : 498
    Points
    498

    Par défaut

    La prorpriét left: centrer me parait erronée.
    Pour centrer un tableau j'aurai fait :
    Code :
    table { margin : 0 auto }

  3. #3
    Membre régulier
    Inscrit en
    avril 2005
    Messages
    223
    Détails du profil
    Informations forums :
    Inscription : avril 2005
    Messages : 223
    Points : 91
    Points
    91

    Par défaut

    En effet, le left : center ne marche pas.

    Mais le auto ne marche pas non plus, le tableau reste sur le côté gauche.

  4. #4
    Membre éprouvé
    Avatar de ilood
    Inscrit en
    mars 2005
    Messages
    468
    Détails du profil
    Informations forums :
    Inscription : mars 2005
    Messages : 468
    Points : 498
    Points
    498

    Par défaut

    Le margin auto ne fonctionne sous IE que si tu as déclaré un doctype au début du document.

  5. #5
    Expert Confirmé
    Avatar de Nesmontou
    Homme Profil pro Benjamin PREVOT
    Architecte de système d'information
    Inscrit en
    septembre 2004
    Messages
    1 613
    Détails du profil
    Informations personnelles :
    Nom : Homme Benjamin PREVOT
    Âge : 32
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Architecte de système d'information
    Secteur : Finance

    Informations forums :
    Inscription : septembre 2004
    Messages : 1 613
    Points : 3 110
    Points
    3 110

    Par défaut

    Salut, en fait le margin: 0 auto; marche très bien sous FireFox mais pas sous IE ; pour remédier à cela, il faut mettre text-align: center; pour l'élément qui contient le tableau

    Voici un petit exemple :
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <html>
    <head>
    	<style type="text/css">
    	body {text-align: center;} /* Pour centrer dans IE */
    	table {background-color: #f00; margin: 0 auto;} /* Pour centrer dans FF */
    	</style>
    </head>
    <body>
    <table>
    	<tr>
    		<td>test</td>
    		<td>test</td>
    		<td>test</td>
    	</tr>
    	<tr>
    		<td>test</td>
    		<td>test</td>
    		<td>test</td>
    	</tr>
    </table>
    </body>
    Bon développement ;-)

  6. #6
    Membre régulier
    Inscrit en
    décembre 2005
    Messages
    72
    Détails du profil
    Informations personnelles :
    Âge : 30

    Informations forums :
    Inscription : décembre 2005
    Messages : 72
    Points : 77
    Points
    77

    Par défaut

    Salut, alors moi perso j'aurais pas mis la position en absolute pour centrer le tableau. Si tu fais ça il pourra pas centrer et mettra par défaut le tableau collée au bloc parent à 0px en partant du haut et 0px en partant de la gauche.

    fais plutôt

    table
    {
    margin-left:auto;
    margin-right:auto;
    }

    exemple (il faut mettre le doctype) :


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    table
    {
    margin-left:auto;
    margin-right:auto;
    border: 1px solid blue;
    }

    </style>
    </head>
    <body>
    <table>
    <tr><td>Hello</td><td>World</td></tr>
    </table>

    </body>
    </html>

  7. #7
    Membre régulier
    Inscrit en
    avril 2005
    Messages
    223
    Détails du profil
    Informations forums :
    Inscription : avril 2005
    Messages : 223
    Points : 91
    Points
    91

    Par défaut

    C'est bon, j'ai fait un div avec une classe qui a la propriété text-align : center, et ca marche très bien comme ca.


    Merci de votre aide.

+ Répondre à la discussion
Cette discussion est résolue.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •