Table centrée sur la page

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

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, 13h04

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, 13h51

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

Oui dans la feuille de style

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

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

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

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

Table centrée sur la page

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager