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

HTML 4

  Largeurs (width)

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 donner la largeur de vos tableaux, voir de vos cellules.
  Principe
Il est possible de déclarer plusieurs types de largeurs, soit au niveau du tableau lui-même, soit au niveau des cellules.
Les largeurs dans un tableaux peuvent être exprimées de deux façons :
  1. en pourcentage :
    • appliquée au tableau, une largeur en pourcentage est appliquée par rapport à la largeur de la fenêtre du navigateur ou par rapport à la cellule de tableau dans laquelle le tableau est imbriqué
    • appliquée à une cellule, une largeur en pourcentage est appliquée par rapport aux autres cellules de la ligne à l'intérieur de la largeur totale du tableau, le total des largeurs ne doit pas dépasser 100%. Si vous déclarez la largeur d'une cellule en pourcentage, faîtes en de même pour les autres cellules, n'utilisez pas de largeurs en pourcentage et en pixel dans le même tableau.
  2. en pixels :
    • appliquée au tableau, une largeur en pixels ne tient pas compte de la largeur de la fenêtre du navigateur, le tableau peut donc dépasser horizontalement le cadre de la fenêtre et donc créer un ascenceur horizontal.
    • appliquée à une cellule, une largeur en pixels ne tient pas compte de la largeur de la fenêtre du navigateur, le tableau peut donc dépasser horizontalement le cadre de la fenêtre et donc créer un ascenceur horizontal. Si le total des largeurs de cellule dépasse la largeur déclarée dans le tableau, le tableau n'est pas aggrandi sauf si le contenu des cellules le nécessite.
Les largeurs en pourcentages permettent de présenter des données en fonction de leur importance relative les unes aux autres. Vous ne connaissez pas la largeur d'écran de vos visiteurs mais vous savez que par exemple la première colonne représentera la moitié de la largeur de l'écran tandis que les deux suivantes se partagerons le reste équitablement (50% - 25% - 25%).

Les largeurs en pixels permettent de fixer la largeur des tableaux et de leurs colonnes quelque soit la résolution d'écran de vos visiteurs, ce qui peut parfois créer des ascenceur horizontaux.

Si le total des largeurs ne fait pas 100% ou n'est pas égal à la largeur en pixels du tableau, les largeurs 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 largeurs données, le tableau et ou les cellules seront aggrandis pour englober totalement le contenu.
En effet, les spécifications du HTML sont claires : les largeurs indiquées sont des largeurs 'minimum'.

Attention :
  • Netscape a une facheuse tendance, lorsqu'on déclare des largeurs de cellules en contradiction avec le volume de données inclus dans chacune des cellules, à 'équilibrer la largeur des cellules en fonction de leur contenu (une cellule 'petite' contenant beaucoup de texte par rapport à une grande cellule ne contenant que peu de texte).
  • si vous déclarez la largeur de la première cellule d'une ligne de tableau, toutes les premières cellules de chaque ligne prennent cette valeur.
  • Au vu des différences d'interprétation qui peuvent apparaître dans la gestion des largeurs dans les tableaux, il est conseillé d'utiliser des cales bloquant les largeurs de cellules des tableaux (voir utilisation d'une image transparente)
  •   Les méthodes
    Exemple 1
    <table border="1" width="50%">
    <tr>
    <td>Ce tableau a une largeur représentant 50% du tableau dans lequel il est imbriqué</td>
    </tr>
    </table>

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

    Exemple 3
    <table border="1" width="300">
    <tr>
    <td>Cette cellule fait 300 pixels de large.</td>
    </tr>
    </table>

    Exemple 4
    <table border="1" width="300">
    <tr>
    <td width="200">Cette cellule fait 200 pixels de large.</td>
    <td width="200">Cette cellule fait aussi 200 pixels de large.</td>
    </tr>
    <tr>
    <td colspan="2">Soit un tableau de 300 pixels et non 400 comme on pourrait s'y attendre.</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
    Ce tableau a une largeur représentant 50% du tableau dans lequel il est imbriqué (cadre bleu)

    Exemple 2
    Cette cellule représente 50% du tableau Cette cellule représente 25% du tableau Cette cellule représente 25% du tableau

    Exemple 3
    Cette cellule fait 300 pixels de large.

    Exemple 4
    Cette cellule fait 200 pixels de large. Cette cellule fait aussi 200 pixels de large.
    Soit un tableau de 300 pixels et non 400 comme on pourrait s'y attendre.

    Exemple 5
    Cette cellule devrait représenter 50% du tableau Cette cellule devrait représenter 25% du tableau Cette cellule devrait représenter 12% du tableau
    Recherche
    aide sur la recherche
    hit-parade
    Votez TOP Ouaibe !

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