Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

HTML 4

  Hauteurs (height)

fonction  principe  les methodes  demonstrations  Compatibilite du script... a partir de : 

  Fonction
Pour mettre en page vos présentation, l'utilisation des tableaux est fortement recommandée, mais encore faut-il parfois donner la hauteur de vos tableaux, voir de vos cellules.
  Principe
Il est possible de déclarer plusieurs types de hauteurs, soit au niveau du tableau lui-même, soit au niveau des cellules.
Les hauteurs dans un tableaux peuvent être exprimées de deux façons :
  1. en pourcentage :
    • appliquée au tableau, une hauteur en pourcentage est appliquée par rapport à la hauteur de la fenêtre du navigateur
    • appliquée à une cellule, une hauteur en pourcentage est appliquée par rapport aux autres lignes du tableau à l'intérieur de la hauteur totale du tableau uniquement si celle-ci est déclarée. Le total des hauteurs ne doit pas dépasser 100%. Si vous déclarez la hauteur d'une cellule en pourcentage, faîtes en de même pour les autres cellules, n'utilisez pas de hauteurs en pourcentage et en pixel dans le même tableau.
  2. en pixels :
    • appliquée au tableau, une hauteur en pixels ne tient pas compte de la hauteur de la fenêtre du navigateur, le tableau peut donc dépasser verticalement le cadre de la fenêtre et donc créer un ascenceur vertical.
    • appliquée à une cellule, une hauteur en pixels ne tient pas compte de la hauteur de la fenêtre du navigateur, le tableau peut donc dépasser verticalement le cadre de la fenêtre et donc créer un ascenceur vertical. Si le total des hauteurs de cellule dépasse la hauteur déclarée dans le tableau, le tableau n'est pas aggrandi sauf si le contenu des cellules le nécessite.
Les hauteurs en pourcentages permettent de présenter des données en fonction de leur importance relative les unes aux autres. Pour marquer la différence entre la ligne de titre et le corps du tableau par exemple.

Les hauteurs en pixels permettent de fixer la hauteur des tableaux et de leurs lignes quelque soit la résolution d'écran de vos visiteurs, ce qui peut parfois créer des ascenceur verticaux.

Si le total des hauteurs ne fait pas 100% ou n'est pas égal à la hauteur en pixels du tableau, les hauteurs données seront interprétées relativement les unes aux autres (vous déclarez 50%, 25% et 12%, vous obtiendrez des pourcentages proches de 57% [50/87*100], 29% [25/87*100] et 14% [12/87*100])

Dans tous les cas, si le contenu des cellules ou du tableau dans son ensemble dépasse les hauteurs données, le tableau et ou les lignes seront aggrandis pour englober totalement le contenu.
En effet, les spécifications du HTML sont claires : les hauteurs indiquées sont des hauteurs 'minimum'.

Attention :
  • Netscape a une facheuse tendance, lorsqu'on déclare des hauteurs de lignes, à ne pas les prendre en compte.
  • si vous déclarez la hauteur de la première cellule d'une ligne de tableau, toutes les cellules de cette ligne prennent cette valeur.
  • Au vu des différences d'interprétation qui peuvent apparaître dans la gestion des hauteurs dans les tableaux, il est conseillé d'utiliser des cales bloquant les hauteurs de lignes des tableaux (voir utilisation d'une image transparente)
  •   Les méthodes
    Exemple 1
    <table border="1" height="50%">
    <tr>
    <td>Ce tableau a une hauteur représentant 50% de la page qui l'accueille</td>
    </tr>
    </table>

    Exemple 2
    <table border="1" height="100%">
    <tr>
    <td height="50%">Cette cellule représente 50% de la hauteur du tableau</td>
    </tr>
    <tr>
    <td height="25%">Cette cellule représente 25% de la hauteur du tableau</td>
    </tr>
    <tr>
    <td height="25%">Cette cellule représente 25% de la hauteur du tableau</td>
    </tr>
    </table>

    Exemple 3
    <table border="1" height="100">
    <tr>
    <td>Ce tableau fait 100 pixels de haut.</td>
    </tr>
    </table>

    Exemple 4
    <table border="1" height="100">
    <tr>
    <td height="50">Cette cellule fait 50 pixels de haut.</td>
    <td rowspan="3">Soit un tableau de 150 pixels et non 100 comme on pourrait s'y attendre.</td>
    </tr>
    <tr>
    <td height="50">Cette cellule fait aussi 50 pixels de haut.</td>
    </tr>
    <tr>
    <td height="50">Cette cellule fait aussi 50 pixels de haut.</td>
    </tr>
    </table>

    Exemple 5
    <table border="1" width="100%">
    <tr>
    <td width="50%">Cette cellule devrait représenter 50% du tableau</td>
    <td width="25%">Cette cellule devrait représenter 25% du tableau</td>
    <td width="12%">Cette cellule devrait représenter 12% du tableau</td>
    </tr>
    </table>

      Démonstrations
    Exemple 1
    Voir la démonstration

    Exemple 2
    Voir la démonstration

    Exemple 3
    Ce tableau fait 100 pixels de haut.

    Exemple 4
    Cette cellule fait 50 pixels de haut. Soit un tableau de 150 pixels et non 100 comme on pourrait s'y attendre.
    Cette cellule fait aussi 50 pixels de haut.
    Cette cellule fait aussi 50 pixels de haut.

    Exemple 5
    Voir la démonstration
    Recherche
    aide sur la recherche
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter