Niveau
..........
En rapport...

Tableau avec un Height de 100%

Vous l'avez sûrement remarquez, spécifier un height 100% sur un tableau comme ceci :

html4strict
<table height="100%">

n'est pas valide. Le W3C le refuse…
Il existe pourtant une méthode.
Si la balise “table” n'a pas d'attribut “height”, en revanche, on peut lui affecter un CSS. Et c'est ce CSS qui va définir la hauteur du tableau :

html4strict
<html>
<head>
<title>...</title>
<style type="text/css">
table {
	width:100%;
	height:100%;
	border:1px solid #000; /*le border n'est la que pour "voir" les contours du tableau*/
}
 
</style>
</head>
<body>
<table>
<tbody>
<tr><td>a</td><td>b</td></tr>
</tbody>
</table>
</body>
</html>
On remarque ici, que la balise “table” n'a aucun attribut. En effet, hors mis le cellspacing (FIXME ?) qui n'a pas encore d'équivalent CSS, tous les autres attributs peuvent être remplacés par du CSS.

Si On essaye le code, on remarquera que… ça ne fonctionne pas… le tableau n'a pas la bonne hauteur… il ne fait pas 100%…

Pourquoi ne fait-il pas 100% en height ?

En fait, lorsque vous demandez une dimension en pourcentage, le navigateur se base sur la taille du parent.
Dans notre cas, le parent du tableau est body ( et le parent de body est html).
Nous n'avons pas défini de height pour body donc lorsque qu'on demande 100% de la hauteur du body, le navigateur ne sait pas nous le donner.
On va donc définir un height à notre balise body.
Pour ne pas “rogner” le contenu de la page, on va dire que body fait 100% en hauteur et en largeur :

css
body {
width:100%;
height:100%;
}

Seulement vous demandez un body qui fait 100% de son parent. Hors son parent (la balise HTML) n'a pas de dimension… Donc même problème que précédemment et même solution,
on va affecter une dimension à la balise html.

css
html,body {
width:100%;
height:100%;
}

Si html n'était pas la balise d'origine, il faudrait réitérer l'opération jusqu'à ce que tous les parents aient une dimension.

Si vous définissez une dimension en pixel, il n'est pas utile de définir les dimensions du parent.

Ici, HTML est la balise de départ notre code est donc :

html4strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>...</title>
<style type="text/css">
body {
	width:100%;
	height:100%;
}
table {
	width:100%;
	height:100%;
	border:1px solid #000;
}
 
</style>
</head>
<body>
<table>
<tbody>
<tr><td>a</td><td>b</td></tr>
</tbody>
</table>
</body>
</html>

Avec cette méthode, vous obtenez un tableau de 100% de hauteur, comme de largeur et un code 100% valide W3C.



06/06/2006 15:14 -

iDo –