mettre tableaux cote a cote et centrés

**Emcy** · 16/11/2007, 14h44

bonjour,

Je voudrais mettre en page des tableau comme sur l'image ci-dessous.
Les tableaux doivent etre centrés horizontalement par rapport à la ZONE 1 : je ne vois pas comment faire

...
J'arrive a centrer TAB 3 mais pour les deux autres tableaux, la seule solution que j'ai trouvé, c'est de les mettre dans un autre tableau : mais ce n'est pas très élégant...

Gunner4902 · 16/11/2007, 15h22

Tu as presque la solution.
Précise dans le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
tableau1, tableau2 {
display:inline;
}

et les deux tableaux seront côte à côte.
Ensuite il te suffit de faire préciser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
html /* ou tout autre contenant des tableaux */  {
width:100%;
text-align:center;
}

**Emcy** · 16/11/2007, 16h21

désolé mais avec cette methode, ça ne marche pas bien sous firefox

exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<!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" >
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
		<style type="text/css">
			body
			{
				width: 100%;
				text-align:center;
				background-color: blue;
			}
 
			#zone1
			{
				width: 80%;
				background-color: red;
			}		
 
			table
			{
				display:inline;
				margin: 20px;
				padding: 0;
				font-size: 0.9em;
				border-collapse: collapse;
				border: 2px solid rgb(0,3,158);
				color: rgb(0,3,158);
			}
 
			th
			{
				font-weight: bold;
				background-color: rgb(0,3,158);
				color: white;
				font-weight: bold;
			}
 
			th, td
			{
				border: 1px solid rgb(0,3,158);
				padding: 0.2em 1em;
				margin: 0;
			}
		</style>
 
	</head>
 
	<body>
		<div id="zone1">	
 
			<table>
				<thead>
					<tr>
						<th colspan="2">A</th>
					</tr>
				</thead>
 
				<tbody>
					<tr>
					   <td>AAAAAAA</td>
					   <td>BBBBBBB</td>
					</tr>
 
					<tr>
					   <td>AAAAA</td>
					   <td>BBBBB</td>
					</tr>
				</tbody>
			</table>			
 
			<table>
				<thead>
					<tr>
						<th colspan="2">A</th>
					</tr>
				</thead>
 
				<tbody>
					<tr>
					   <td>AAAAAAA</td>
					   <td>BBBBBBB</td>
					</tr>
 
					<tr>
					   <td>AAAAA</td>
					   <td>BBBBB</td>
					</tr>
				</tbody>
			</table>
 
		</div>
	</body>
</html>

aussi, c'est normale que la zone rouge ne prend pas en compte le margin du tableau sous firefox ?

Gunner4902 · 16/11/2007, 16h34

En rajoutant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

margin: 0 auto;

à body et en suprimant zone1, ça fonctionne sans problème.
Il ne reste donc plus qu’à reproduire le comportement de body pour zone1

**Emcy** · 16/11/2007, 17h30

j'ai essayé de faire ce que tu as dis mais ça ne marche toujours pas sous firefox

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<!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" >
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
		<style type="text/css">
			body
			{
				width: 100%;
				text-align:center;
				background-color: blue;
				margin: 0 auto;
			}
 
			table
			{
				display:inline;
				margin: 20px;
				padding: 0;
				font-size: 0.9em;
				border-collapse: collapse;
				border: 2px solid rgb(0,3,158);
				color: rgb(0,3,158);
			}
 
			th
			{
				font-weight: bold;
				background-color: rgb(0,3,158);
				color: white;
				font-weight: bold;
			}
 
			th, td
			{
				border: 1px solid rgb(0,3,158);
				padding: 0.2em 1em;
				margin: 0;
			}
		</style>
 
	</head>
 
	<body>
 
			<table>
				<thead>
					<tr>
						<th colspan="2">A</th>
					</tr>
				</thead>
 
				<tbody>
					<tr>
					   <td>AAAAAAA</td>
					   <td>BBBBBBB</td>
					</tr>
 
					<tr>
					   <td>AAAAA</td>
					   <td>BBBBB</td>
					</tr>
				</tbody>
			</table>			
 
			<table>
				<thead>
					<tr>
						<th colspan="2">A</th>
					</tr>
				</thead>
 
				<tbody>
					<tr>
					   <td>AAAAAAA</td>
					   <td>BBBBBBB</td>
					</tr>
 
					<tr>
					   <td>AAAAA</td>
					   <td>BBBBB</td>
					</tr>
				</tbody>
			</table>
 
	</body>
</html>

**BnA** · 16/11/2007, 18h00

Salut!!

Centrer n'importe quel élément en CSS

Sinon, pour tes 2 tableaux côte à côte, il faut que tu leur spécifie un width, et un float:left;

Gunner4902 · 16/11/2007, 18h18

Envoyé par Emcy

j'ai essayé de faire ce que tu as dis mais ça ne marche toujours pas sous firefox

C’est bizarre j’ai essayé et ça fonctionnait (sans zone1).

**Emcy** · 19/11/2007, 14h20

merci pour vos reponse : maintenant zone 1 est centrée sous firefox

mais j'ai toujours ce porblème sur les bordures de mes tableaux => a priori, firefox n'aime pas trop "display:inline;"...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<!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" >
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
		<style type="text/css">
			body
			{
				width: 100%;
				margin: 0;
				padding: 0;
				text-align:center;
				background-color: blue;
			}
 
			#zone1
			{
				width: 80%;
				margin: 20px auto;
				background-color: red;
			}		
 
			table
			{
				display:inline;
				/*float: left;*/
				margin: 20px;
				padding: 0;
				font-size: 0.9em;
				border-collapse: collapse;
				border: 2px solid rgb(0,3,158);
				color: rgb(0,3,158);
			}
 
			th
			{
				font-weight: bold;
				background-color: rgb(0,3,158);
				color: white;
				font-weight: bold;
			}
 
			th, td
			{
				border: 1px solid rgb(0,3,158);
				padding: 0.2em 1em;
				margin: 0;
			}
		</style>
 
	</head>
 
	<body>
		<div id="zone1">	
			<table>
				<thead>
					<tr>
						<th colspan="2">A</th>
					</tr>
				</thead>
 
				<tbody>
					<tr>
					   <td>AAAAAAA</td>
					   <td>BBBBBBB</td>
					</tr>
 
					<tr>
					   <td>AAAAA</td>
					   <td>BBBBB</td>
					</tr>
				</tbody>
			</table>			
 
			<table>
				<thead>
					<tr>
						<th colspan="2">A</th>
					</tr>
				</thead>
 
				<tbody>
					<tr>
					   <td>AAAAAAA</td>
					   <td>BBBBBBB</td>
					</tr>
 
					<tr>
					   <td>AAAAA</td>
					   <td>BBBBB</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

Gunner4902 · 19/11/2007, 15h06

Le problème n’est pas isolé à Firefox.

voici les captures d’écran sous Firefox, Opera et IE de ton code actuel :

Firefox

Opera

IE

Il te suffit de supprimer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

table {border: 2px solid rgb(0,3,158);}

et tout est ok sur les trois navigateurs.

ps : il y a plus simple que rgb(0,3,158) pour le code couleur => #00039E

**Emcy** · 19/11/2007, 17h11

mais c'est moins joli....

=> je crois qu'il n'y a pas de remède miracle...

Gunner4902 · 19/11/2007, 18h19

Mais si, mais si…

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

tbody, thead {border: 2px solid #00039E;}

en fait tu appliques non pas le style au tableau (puisqu’étant mis en inline qui semble ici avoir un conflit avec table), mais à thead et tbody…

essaye et tu verras que tu as de nouveau les bords bleu en 2px d’épaisseur, et ce sur les trois navigateurs sus-cités

**Emcy** · 20/11/2007, 09h26

mauvaise nouvelle : ça ne marche plus sous IE maintenant (les bordures ne font que 1px....ghrrrrr
de plus sous firefox, les margin haut ne sont pas pris en compte....

Gunner4902 · 20/11/2007, 11h28

Pour l’épaisseur des bordures sous IE, tu peux utiliser un hack

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 * html body table {border: 2px solid rgb(0,3,158);}

* signifie toute balise avant html.Evidemment il n’y en a aucune, donc celà n’est pas accepté par les nouveaux navigateurs, mais IE ne comprend pas cet ordre et lit html > body > table.
Si tu places cette ligne après

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

table {}

celà te donnera une bordure de tableau de 2px sur IE comme sur Firefox et Opera.

Pour ce qui est du centrage, Firefox et Opera se comporte quasiment pareil (Opera sans aucune marge verticale, Firefox avec une légère marge basse).
Etant donné que tu as un display:inline sur ton tableau, tu ne peux pas le centrer en vertical-align. Donc si tu connais la hauteur finale du tableau, tu peux jouer avec les marges négatives, mais bon, cette solution est à mon avis du bidouillage palliant un gros problème du CSS2…

**Emcy** · 20/11/2007, 11h51

OK, merci pour les infos

mettre tableaux cote a cote et centrés

Tableau en CSS

Discussions similaires

Partager

Partager