[CSS] centrer un tableau

Version imprimable

08/01/2006, 14h55
Azharis

[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.
08/01/2006, 15h19
ilood

La prorpriét left: centrer me parait erronée.
Pour centrer un tableau j'aurai fait :

Code:

table { margin : 0 auto }
08/01/2006, 15h30
Azharis

En effet, le left : center ne marche pas.

Mais le auto ne marche pas non plus, le tableau reste sur le côté gauche.
08/01/2006, 15h37
ilood

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

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 ;-)

08/01/2006, 17h07
djnos

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>
08/01/2006, 18h19
Azharis

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.