La nécessité d'étendre le tableau à tout l'espace de la fenêtre du navigateur survient, par exemple, lorsque la conception de la page est placée à l'intérieur du tableau. La solution à ce problème ne nécessite pas l'écriture de code complexe, mais elle implique la prise en compte de certaines des caractéristiques du balisage des pages web.
Nécessaire
Connaissances de base en HTML
Instructions
Étape 1
Tout d'abord, vous devez clarifier le sens de l'opération à venir. En code HTML, les pages de tableau sont un ensemble de balises appariées imbriquées (une ouverture et une fermeture). Balises de cellule (
) sont imbriqués dans des balises de chaîne (
), et celles-ci, à leur tour, en balises de table (
). Dans la balise d'ouverture du tableau, vous pouvez définir sa largeur et sa hauteur en unités absolues (pixels) et relatives (pourcentages). Avec des tailles relatives, la largeur et la hauteur de l'élément parent du tableau sont considérées comme 100 %. Si vous placez un tableau directement dans le corps de la page (et non dans un calque, formulaire, autre tableau, etc.), alors les dimensions de son élément parent seront la largeur et la hauteur de la page. Cela signifie que pour étendre la table à tout l'espace libre, vous devez spécifier des dimensions horizontales et verticales à 100%.
Étape 2
Vous pouvez maintenant commencer à mettre cela en pratique en HTML. La largeur et la hauteur du tableau sont spécifiées par les attributs width et height. Ainsi, le code du tableau indiquant 100 % des dimensions dans toutes les directions et, par exemple, avec deux cellules sur une ligne, peut ressembler à ceci:
| cellule gauche du tableau | cellule de droite du tableau |
Étape 3
Spécifier 100% de largeur et de hauteur sera suffisant pour étirer le tableau si vous choisissez la bonne norme HTML selon laquelle le navigateur doit lire le code de la page. La balise est placée sur la toute première ligne du document. Vous avez besoin d'une balise avec le contenu suivant:
Étape 4
Et un autre point doit être pris en compte dans votre code: par défaut, la page est en retrait des bords de la fenêtre de quelques pixels, donc le tableau, même après avoir rempli toute la page, ne s'étendra pas sur toute la fenêtre. Pour éliminer ces champs inutiles, vous pouvez spécifier zéro retrait dans les attributs correspondants dans la balise d'ouverture du corps de la page ():
Étape 5
Une fois assemblé, le code de la page entière avec un tableau étiré sur toute la largeur et la hauteur de l'écran ressemblera à ceci:
Table tendue
| cellule gauche du tableau | cellule de droite du tableau |
