HTML - CSS tableau taille de case différente

Bonjour à tous =)

après plusieurs tests et recherches sur internet je n'arrive pas à positionner mes tableaux correctement, je souhaite que les 3 tableaux en colonne à gauche soit à la même hauteur que le premier rectangle rouge et que le tout soit aligné à gauche comme la bannière.

j'ai beau essayer plusieurs options css, mettre différemment mon html impossible d'avoir le résultat voulu :/

http://nsa30.casimages.com/img/2012/...4506300645.png

Code html :

Code:

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
        <title>test</title>
    </head>
    <body>
		<div id="bandeau_1">
			<table align="right">
				<tr>
					<td>login:</td>
					<td><input type="text"></td>
					<td>password:</td>
					<td><input type="text"></td>
					<td><input type="button" value="connexion"></td>
				</tr>
			</table>
		</div>
		<div id="banniere">
			<img src="img/banniere.png">
		</div>
		<div id="bandeau_2">
			<table>
				<tr>
					<td>a</td>
					<td> | </td>
					<td>Galerie</td>
					<td> | </td>
					<td>Mes Favoris</td>
					<td> | </td>
					<td>Ma Liste</td>
					<td> | </td>
					<td>Mon Menu</td>
				</tr>
			</table>
		</div>
		<div id="centre_page">
			<table>
				<tr>
					<td width="20%">
						<table>
							<tr>
								<td>
									<div id="nouveaute">
										<table>
											<tr><th>Nouveauté</th></tr>
											<tr><td>a</td></tr>
											<tr><td>b</td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
										</table>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div id="mon_menu">
										<table>
											<tr><th>Mon menu</th></tr>
											<tr><td>a</td></tr>
											<tr><td>b</td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
										</table>
									</div>
									<div id="pub">
										<table>
											<tr><th>PUB</th></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
										</table>
									</div>
								</td>
							</tr>
						</table>		
					</td>
					<td width="80%">
						<table>
							<tr>
								<td>
									<div id="recherche">
										<table>
											<tr></tr>
											<tr>
												<td>Mot clé:</td> 
												<td><input type="text"></td>
												<td><input type="button" value="Rechercher"></td>
											</tr>
											<tr><td>avancé</td></tr>
										</table>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div id="liste_recherche">
										<table>
											<tr><td></td></tr>
											<tr><td></td></tr>	
											<tr><td></td></tr>
										</table>
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
 
 
 
 
    </body>
</html>

code CSS :

Code:

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
#bandeau_1{
width:800px;
height:30px;
background-color:black;
margin-left: auto; 
margin-right: auto;
margin-top:-10px;
}
#bandeau_1 td{
color:white;
 
 
}
 
#bandeau_1 input[type="text"]{ 
width:100px; 
height:20px; 
font-size:14px; 
}
 
 
#banniere{
margin-left: auto; 
margin-right: auto;
width:800px;
}
 
#bandeau_2{
width:800px;
height:30px;
background-color:black;
margin-left: auto; 
margin-right: auto;
margin-top:-2px;
}
#bandeau_2 td{
color:white;
}
 
 
 
#centre_page{
margin-left: auto; 
margin-top:0px;
width:800px;
}
 
 
#nouveaute{
margin-top:0px;
width:200px;
height:200px;
background-color:green;
}
 
#recherche{ 
margin-top:0px;
width:595px;
height:200px;
background-color:red;
}
 
 
#mon_menu{
margin-top:0px;
width:200px;
height:200px;
background-color:grey;
}
 
#pub{
margin-top:3px;
width:200px;
height:200px;
background-color:grey;
}
 
#liste_recherche{
margin-top:0px;
width:595px;
height:800px;
background-color:red;
}

merci de votre aide =) :ccool:

Il y a beaucoup d'erreurs de code. On ne met pas de formulaire dans un tableau, on n'imbrique pas des <table>, la propriété CSS align n'existe pas…

Pour votre problème, peut-être que l'usage de la propriété float vous aidera.

bonsoir,

je ne comprend pas pourquoi on ne peux pas imbriquer un formulaire dans un tableau ça permet de mieux structurer, l'attribut align existe bien et fonctionne parfaitement ;)

après quelque bidouille j'ai réussi il fallait mettre une taille au body et rajouter des floats pour que tout ce place bien je doit mettre les menus dans un certains ordre j'espère juste que ça ne bougera pas par la suite :/

merci ;)

Html - CSS tableau de raille de case différente

En effet, je confirme, on n'utilise pas de tableau pour la mise en forme (c'est dépassé et mal traité par les moteurs).
Un tableau sert à structurer des données (comme un tableau Excel) et non à les mettre en forme. On met en forme les div pour cela avec le css.
De même, la propriété align s'utilise en html mais elle est devenue obsolète vu qu'on utilise du css pour la mise en forme. Le html est réservé aux données et le css à les mettre en forme. Donc pour être cohérent, on ne peut utiliser la propriété align en html mais son équivalent en css.

personnellement

text-align:right;

ne fonctionne pas du tout y a t'il un autre code?

edit : il fonctionne si j'enlève le tableau :cry:

Html - CSS tableau de taille de case différente

Ben oui il faut enlever le tableau, ce n'est pas chinois, il suffit de remplacer le tableau et les cellules par des div...