Bonjour,
Le seul moyen à ma connaissance de faire ce que tu cherches à faire est d'utiliser des conteneurs div (un par table) en
display: inline-block. Problème:
- pas implémenté par Firefox 2 (ok dans Firefox 3);
- pas implémenté pour les éléments de type bloc tels que
div dans Internet Explorer.
En l'absence d'une implémentation correcte pour
display: inline-block, la seule solution que je vois consiste à utiliser un tableau de mise en forme pour caser les tableaux de données. On peut utiliser un tableau à une seule cellule, qui a pour avantage de pouvoir être centré via les marges automatiques (
margin: 0 auto;) même sans avoir de largeur déterminée à l'avance (contrairement à un élément de type bloc tel que
div, qui a besoin d'un
width ou d'un
max-width).
Ce qui peut donner:
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
table#test {
margin: 0 auto;
}
table#test table {
float: left;
}
</style>
</head>
<body>
<table id="test"><tr><td>
<table><tr><td>Table 1</td></tr><tr><td>Table 1</td></tr><tr><td>Table 1</td></tr></table>
<table><tr><td>Table 2</td></tr><tr><td>Table 2</td></tr><tr><td>Table 2</td></tr></table>
<table><tr><td>Table 3</td></tr><tr><td>Table 3</td></tr><tr><td>Table 3</td></tr></table>
</td></tr></table>
</body>
</html>
Voilà pour une première solution.
J'ai trouvé une deuxième solution qui n'oblige pas à utiliser un tableau de mise en forme à une seule cellule, en passant par un
display: inline sur les tableaux. Bon, là c'est du pifomètre total, ça m'étonne un peu que ça marche (d'ailleurs ça marche avec IE 6-7, FF2 et Opera 9, mais pas avec Konqueror 3.5 et Safari 3). Mais voilà ce que ça donne:
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
div#test {
text-align: center;
}
div#test table {
display: inline;
}
</style>
</head>
<body>
<div id="test">
<table><tr><td>Table 1</td></tr><tr><td>Table 1</td></tr><tr><td>Table 1</td></tr></table>
<table><tr><td>Table 2</td></tr><tr><td>Table 2</td></tr><tr><td>Table 2</td></tr></table>
<table><tr><td>Table 3</td></tr><tr><td>Table 3</td></tr><tr><td>Table 3</td></tr></table>
</div>
</body>
</html>
Pour information, la solution avec
display: inline-block, qui pour le coup marche avec Safari et Konqueror (et Opera et Firefox 3) peut ressembler à ceci:
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
div#test {
text-align: center;
}
div#test div.conteneur {
display: inline-block;
}
</style>
</head>
<body>
<div id="test">
<div class="conteneur"><table><tr><td>Table 1</td></tr><tr><td>Table 1</td></tr><tr><td>Table 1</td></tr></table></div>
<div class="conteneur"><table><tr><td>Table 2</td></tr><tr><td>Table 2</td></tr><tr><td>Table 2</td></tr></table></div>
<div class="conteneur"><table><tr><td>Table 3</td></tr><tr><td>Table 3</td></tr><tr><td>Table 3</td></tr></table></div>
</div>
</body>
</html>
PS pour Igor: je ne fais pas le travail de jeyce à sa place, je lui donne des informations et des solutions techniques, à lui maintenant de choisir la bonne solution ou d'en trouver une autre. Et s'il utilise une des solutions que je lui présente, il faudra qu'il se charge lui-même du travail d'adaptation pour son site, des tests complémentaires dans les navigateurs, etc.
Ceci dit, ça ne fait jamais de mal de rappeler cette règle.
Modifié par Florent V. (04 Feb 2008 - 11:50)
