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