Table centrée sur la page

**GriffinK** · 03/06/2009, 11h26

Bonjour tout le monde

Je suis nouveau sur css, je souhaite faire une page avec une table centrée qui prend toute la taille de la page en hauteur.

Ensuite, je voudrais, dans cette table, faire une ligne qui prend 10% de la page en haut, la même chose en bas, et au centre une ligne qui prend l'espace restant.

Le code que j'ai pour l'instant:

index.html

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
<!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=iso-8859-1"/>
	<title>test</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<table summary="Tableau central" id="mainTab">
		<thead><tr style:"height=10%">
      			<th>1</th>
      			<th>2</th>
      			<th>3</th>
			</tr></thead>
		<tbody><tr style:"height=80%">
			<td colspan="3">4</td>
		</tr></tbody>
		<tbottom><tr style:"height=10%">
			<td colspan="3">5</td>
		</tr></tbottom>
	</table>
</body>
</html>

css

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
html, body {
	height:100%;
      margin: 0;
      padding: 0;
}
thead {
	background-color:red;
	border:1px solid #6495ed;
}
tbody {
	background-color:yellow;
	border:1px solid #6495ed;
}
tbottom {
	background-color:blue;
	border:1px solid #6495ed;}
#mainTab {
	border:1px solid #1F4155 hidden;
	height:100%;
	width:50%;	
	margin: 0 auto;
	padding: 0px;
	border-spacing: 0px;
	border-collapse:collapse;
}

Avec firefox ca donne ça

et IE6 ça

Sous firefox, je ne comprends pas ce qu'est la petite barre en haut à gauche

Que je mette les height pour les lignes dans le css ou dans l'html, rien ne change. Savez vous ce qui explique la différence entre les deux browsers ? je m'y prends sûrement mal

FoxLeRenard · 03/06/2009, 12h04

Bonjour,
Il serait util, que tu relises tes cours de HTML,
il y a tellement de balises, qu'il est inutil d'en rajouter

Je t'ais remis le CSS dans ta page html pour simplifier
ça marche avec tout navigateurs

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
 
 
 
<!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=iso-8859-1"/>
	<title>test</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
<style>
html, body {
	height:100%;
      margin: 0;
      padding: 0;
}
thead {
	background-color:red;
        height=10%;
	border:1px solid #6495ed;
}
tbody {
	background-color:yellow;
	border:1px solid #6495ed;
}
tfoot {
	background-color:blue;
        height=10%;
	border:1px solid #6495ed;}
#mainTab {
	border:1px solid #1F4155 hidden;
	height:100%;
	width:50%;	
	margin: 0 auto;
	padding: 0px;
	border-spacing: 0px;
	border-collapse:collapse;
}
 
 
</style>
</head>
<body>
 
	<table summary="Tableau central" id="mainTab">
                <thead><tr>
      			<th>1</th>
      			<th>2</th>
      			<th>3</th>
			</tr></thead>
                <tbody><tr>
                        <td colspan="3">xxxxxxxxxxx4xxxxxxxxxxxxx</td>
		</tr></tbody>
                <tfoot><tr>
                        <td colspan="3">xxxxxxxxxxxx5xxxxxxxxxxxxx</td>
		</tr></tfoot>
	</table>
</body>
</html>

**GriffinK** · 03/06/2009, 12h51

Envoyé par FoxLeRenard

Bonjour,
Il serait util, que tu relises tes cours de HTML,
il y a tellement de balises, qu'il est inutil d'en rajouter

Je t'ais remis le CSS dans ta page html pour simplifier
ça marche avec tout navigateurs

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
 
 
 
<!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=iso-8859-1"/>
	<title>test</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
<style>
html, body {
	height:100%;
      margin: 0;
      padding: 0;
}
thead {
	background-color:red;
        height=10%;
	border:1px solid #6495ed;
}
tbody {
	background-color:yellow;
	border:1px solid #6495ed;
}
tfoot {
	background-color:blue;
        height=10%;
	border:1px solid #6495ed;}
#mainTab {
	border:1px solid #1F4155 hidden;
	height:100%;
	width:50%;	
	margin: 0 auto;
	padding: 0px;
	border-spacing: 0px;
	border-collapse:collapse;
}
 
 
</style>
</head>
<body>
 
	<table summary="Tableau central" id="mainTab">
                <thead><tr>
      			<th>1</th>
      			<th>2</th>
      			<th>3</th>
			</tr></thead>
                <tbody><tr>
                        <td colspan="3">xxxxxxxxxxx4xxxxxxxxxxxxx</td>
		</tr></tbody>
                <tfoot><tr>
                        <td colspan="3">xxxxxxxxxxxx5xxxxxxxxxxxxx</td>
		</tr></tfoot>
	</table>
</body>
</html>

Merci pour ta réponse !

Oui pas faux

Sinon, ok ça fonctionne, mais les trois lignes ont la même taille. On peut travailler avec les pourcentages pour la taille ou pas ?

FoxLeRenard · 03/06/2009, 13h39

Oui dans la feuille de style

Merci de valider en bas de cette page RESOLU si c'est ok

**GriffinK** · 03/06/2009, 13h54

Oui tu as raison, ça fonctionne o_O tu peux m'expliquer quelle était mon erreur stp ?

Mbon apparement cela vient du fait que j'utilise tbottom et non pas tfoot

**GriffinK** · 03/06/2009, 14h29

Petite correction, ça fonctionne sous firefox mais pas sous IE6 chez moi. Ca passe chez toi ?

FoxLeRenard · 03/06/2009, 18h49

Envoyé par GriffinK

Petite correction, ça fonctionne sous firefox mais pas sous IE6 chez moi. Ca passe chez toi ?

IE6 interpréte mal les styles !! faux mieux oublier

Si nom, il y avait plusieurs erreurs
1) tbottom EXISTE PAS c'est tfoot qui existe
2) tes % étaient mal placés

**GriffinK** · 03/06/2009, 21h39

Envoyé par FoxLeRenard

IE6 interpréte mal les styles !! faux mieux oublier

Si nom, il y avait plusieurs erreurs
1) tbottom EXISTE PAS c'est tfoot qui existe
2) tes % étaient mal placés

Merci

Eviter les styles?
Bon, il me reste plus qu'à trouver un autre moyen d'arriver à ce résultat

Tant que j'y suis, existe t-il un site qui recense les différences html entre les web browsers, ce qui passe sous firefow et pas sous IE par exemple ?

FoxLeRenard · 03/06/2009, 21h50

Envoyé par GriffinK

Merci

Eviter les styles?
Bon, il me reste plus qu'à trouver un autre moyen d'arriver à ce résultat

Tant que j'y suis, existe t-il un site qui recense les différences html entre les web browsers, ce qui passe sous firefow et pas sous IE par exemple ?

Non pas éviter les styles SURTOUT PAS, mais IE6 s' en sort mal

Oui j'ais déjas vu ça quelque part , mais actuellement en déplacement, j'ais pas ça sous la main ... je rentre lundi !!!

En attendant sur google "HTML CSS comparatif browser" ou un truc comme ça !