comment faire pour aligner deux partie d'une table enboitée

**felosa** · 27/05/2008, 14h55

Bonjour a tous ,

j'essaye de realiser un formulaire avec un menu,
pour cela j'etulise des balises table imbriqués avec une feuille de style, une table qui contient deux tables, pour former une cadre , alors le probleme que j'ai c'est que la partie du menu est legerement en acart verticalement par rapport a la partie en dessous , je ne sais pas quel attribut dois je utiliser , j'ai essayer le valign = top; mais ca ne marche pas voila mon code :

Code html :

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
99
100
101
102
103
104
105
106
107
108
109
110
111
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<style>
 
 
ul#menu { 
     margin:0px;
     padding:0px;
     width: 650px; 
     height: 43px; 
     background: #FFF url(menu-bg.gif) top left repeat-x; 
     font-size: 12px; 
     font-family:Arial, Helvetica, sans-serif;
     font-weight: bold; 
     list-style-type: none; 
 
     padding: 0; }
 
ul#menu li {  
        float: left; 
        margin: 0 0 0 5px; }
ul#menu li a { 
        height: 43px; 
        color: #000; 
        text-decoration: none;
         
        float: left; 
        line-height: 200%; 
        padding: 8px 25px 0; }
ul#menu li a:hover { 
        color: #333; }
ul#menu li a.current{ 
        color: #FD0000;
        background: url(current-bg.gif) top left repeat-x; padding: 5px 15px 0; }
 
#container_screen{
width:100%;
}
 
 
#Bottonn{
width:200px;
}
 
</style>
 
<body>
<table border="2px"; cellspacing="0"; cellpadding="0"; align="left"; style="width=650px;">
	<tr>
		<table border="1px">
			<tr>
				<td>
					<ul id="menu">
        				<li ><a class="current" href="/onglet1">onglet1</a></li>
        				<li ><a href="/onglet2">onglet2</a></li>
        				<li ><a href="/onglet3">onglet3</a></li>
        				<li ><a href="/onglet4">onglet4</a></li>
					 </ul>
				</td>
			</tr>
		</table>
	</tr>
	<tr>
		<table style="background-color:#d9d9d9; width:650px;" border="1px" >
			<tr>
				<td>
					<FORM ACTION="#" METHOD=POST>
						<table>
							<tr>
								<td id="Botton1">
									<input style="width:180px;" type="button" value="botton1">
								</td>
								<td id="Bottonn">
									<input style="width:180px;" type="button" value="botton2">
								</td>
								<td rowspan="3" id="bottonn">
									<img src="Post_IT4g.gif"/>
								</td>					
							</tr>
							<tr>
								<td id="Bottonn">
									<input style="width:180px;" type="button" value="botton3">
								</td>
								<td id="Bottonn">
									<input style="width:180px;" type="button" value="botton4">
								</td>
							</tr>
							<tr>
								<td id="Bottonn">
									<input style="width:180px;" type="button" value="botton5">
								</td>
								<td id="Bottonn">
									<input style="width:180px;" type="button" value="botton6">
								</td>
							</tr>
						</table>
					</form>
				</td>
			</tr>
		</table>
	</tr>
</table>
 
</body>
</html>

merci pour vos eventuelles reponses .

**koala01** · 27/05/2008, 15h18

Salut,

Comme tu as déjà pris une bonne initiative en optant pour l'usage des CSS (qu'il serait pas mal de séparer de ton fichier HTML), je te conseillerais volontier de continuer sur ta lancée en... banissant l'utilisation de tableau comme outils de mise en forme.

En effet, les tableaux posent énormément de problème d'accessibilité et, même si on n'en croise pas tous les jours, je trouve normal de penser à ceux qui doivent avoir recours à des outils "particuliers" (tablettes brail, synthétiseurs vocaux ou navigateur "text only") pour naviguer sur internet, et donc de limiter l'utilisation des tableaux à... l'affichage de données tabulaires.

Bien que je ne semble pas répondre à ta question, détrompes toi: je t'ouvre des voies de réflexions qui sont de nature à te fournir un résultat au moins aussi bon que ce que tu cherches à faire... l'accessibilité en plus

**Erwan31** · 27/05/2008, 15h29

Envoyé par koala01

et donc de limiter l'utilisation des tableaux à... l'affichage de données tabulaires.

Je ne serais pas aussi ferme: un usage mesuré des tableaux de mise en forme
non imbriqués et bien linéarisés peut parfois pallier à un limitation propre à la
mise en forme CSS (support CSS ou interprétations de rendu trop inégaux).

Mais mieux vaut éviter leur utilisation quand cela reste possible

**felosa** · 27/05/2008, 15h40

je vous remercie de vos reponse,
parcontre j'ai essayé d'utiliser des balise <div> , c'est encore pire , et comme je ne maitrise ni l'un ni l'autre j'ai fait appel a vous

**koala01** · 27/05/2008, 16h02

Envoyé par Erwan31

Je ne serais pas aussi ferme: un usage mesuré des tableaux de mise en forme
non imbriqués et bien linéarisés peut parfois pallier à un limitation propre à la
mise en forme CSS (support CSS ou interprétations de rendu trop inégaux).

Mais mieux vaut éviter leur utilisation quand cela reste possible

A vrai dire, depuis que j'ai été sensibilisé au problème par une personne, je n'ai jamais éprouvé la moindre difficulté à me passer des tableaux pour la mise en formre, du moins, depuis que la sensibilisation m'a incité à les bannir pour cet usage.

Envoyé par felosa

je vous remercie de vos reponse,
parcontre j'ai essayé d'utiliser des balise <div> , c'est encore pire , et comme je ne maitrise ni l'un ni l'autre j'ai fait appel a vous

Alors, là, il y a sans doute un peu de travail.

Il est important de comprendre que les différentes balises, si elles sont affichées d'une manière particulière par le navigateur internet, c'est parce qu'elles sont porteuse d'une certaine sémantique et que le navigateur peut décider à tout moment de changer la manière "par défaut" d'afficher une balise, mais qu'il ne pourra pas en changer la sémantique.

Je te rassure tout de suite: sur plus ou moins 120 (peut-être est-ce 130

) balises connues en HTML, il n'y en a, une fois que tu as écarté celles qui sont dépréciées, obsolètes ou qui n'ont jamais été proposées à la normalisation, il n'en reste qu'un grosse trentaine (en comptant large) qui soient d'utilisation "régulière" (même si, pour l'occasion, le terme "régulier" signifie en moyenne trois fois par site

), et donc, il reste relativement simple de se souvenir de la sémantique prise par ces balises

Ainsi, la balise <div> est une balise "de bloc" tout à fait générique, à laquelle il t'appartient de donner le style d'affichage selon le contexte et tes souhaits/besoins.

Dans le cas présent, il est peut être bon de t'intéresser à la sémantique des balises et de voir si, sémantiquement parlant, il n'en existe pas une qui serait "plus adaptée"

N'oublie jamais que le C de CSS signifie "cascade", et que, par défaut, toute balise imbriquée dans une autre va donc "hériter" des paramètres d'affichage de celle dans laquelle elle est imbriquée, à moins que tu ne les redéfinisse.

Peut-être serait il également intéressant pour toi d'aller jeter un œil du du coté de la FAQ et des cours

Maintenant, tu me diras sans doute que, quitte à répondre, je devrais peut etre envisager de t'apporter une solution... et tu n'as pas tort... mais je manque un peu de temps pour m'y atteler

**felosa** · 27/05/2008, 16h15

tu t'es donné du mal a me composer ttes ces lignes , t'aurais pu me repondre et me faire gagner du temps !

, ca fait une semaine que je tourne au rond !

**Erwan31** · 27/05/2008, 15h18

Bonjour,
tu as choisi un doctype xHTML mais il faut savoir que la syntaxe qui en découle exige un certain nombres de règles que tu ne respectes qu'en partie: pas de code en lettre capitale.
D'autre part tu pourrais nettement simplifier la structure de ton code en t'abstenant d'utiliser les tableaux comme celui englobant ton menu.
Eviter autant que possible l'imbrication de table qui est une méthode de structuration dépassée, souvent préjudiciable pour l'accessibilité, le poids du code, le temps d'affichage, etc.

Grillé

comment faire pour aligner deux partie d'une table enboitée

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager