mettre tableaux cote a cote et centrés

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

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, 14h22

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, 15h21

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, 15h34

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, 16h30

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>