Table centrée sur la page
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:
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:
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
http://img193.imageshack.us/img193/8858/35155035.th.jpg
et IE6 ça
http://img195.imageshack.us/img195/2631/43414942.th.jpg
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 :aie:
