Dessinez un tableau en HTML. Attributs ALIGN et VALIGN
En-têtes de tableau HTML
Il existe 2 types de cellules dans les tableaux HTML. La balise définit une cellule de type normal. Si une cellule fait office d'en-tête, elle est définie à l'aide du .
Exemple de tableau HTML avec en-tête
Volkswagen AG
Daimler AG
Groupe BMW
Audi
Mercedes-Benz
BMW
Skoda
Mercedes-AMG
Mini
Lamborghini
Intelligent
Rolls-Royce
Code source du tableau HTML avec les en-têtes
Volkswagen AG
Daimler AG
Groupe BMW
Audi
Mercedes-Benz
BMW
Skoda
Mercedes-AMG
Mini
Lamborghini
Intelligent
Rolls-Royce
Fusionner des cellules dans un tableau HTML
Les tableaux HTML ont la possibilité de fusionner des cellules horizontalement et verticalement.
À fusionner les cellules horizontalement utilisez l'attribut colspan=" X" , à la cellule ou , où X
À fusionner les cellules verticalement utilisez l'attribut rowspan=" X" , à la cellule ou , où X- nombre de cellules à fusionner.
Les cellules peuvent être fusionnées horizontalement et verticalement en même temps. Pour ce faire, utilisez les attributs colspan et rowspan pour la cellule souhaitée :
Texte de cellule
Veuillez noter que lorsque vous fusionnez des cellules, le nombre d'éléments dans la ligne change. Par exemple, si un tableau a 3 colonnes avec des cellules, et que nous combinons la première et la deuxième cellules, alors il y aura 2 éléments à l'intérieur de la balise définissant cette ligne, le premier d'entre eux contiendra l'attribut colspan="2".
Exemple de tableau HTML avec fusion de cellules
Code source du tableau HTML avec cellules fusionnées
Nissan
Modèle
Équipement
Disponibilité
Nissan Qashqai
VISIA
+
TEKNA
+
Nissan X-Trail
ACCENTA
+
CONNECTER
-
En-têtes et pieds de page dans les tableaux HTML
Les tableaux HTML peuvent être divisés en 3 zones : en-tête, corps, pied de page.
Cela se fait en enveloppant les lignes de la partie sélectionnée du tableau avec des balises. définit la zone d'en-tête, - la zone de pied de page, - la partie principale du tableau.
Par défaut, les en-têtes et pieds de page ne sont pas stylisés différemment (cela peut être fait via CSS si nécessaire), mais peuvent être utilisés par les navigateurs. Par exemple, lors de l'impression d'un tableau de plusieurs pages, les en-têtes et pieds de page peuvent être dupliqués sur chaque page imprimée.
L'ordre correct de placement des balises de zone dans le code HTML d'un tableau est le suivant : l'en-tête en premier, suivi du pied de page, puis du corps. Dans ce cas, la partie principale de la page sera affichée entre les en-têtes et les pieds de page.
Si nécessaire, vous pouvez ajouter une signature au tableau. Pour ce faire, utilisez la balise.
Exemple de tableau HTML avec en-têtes et pieds de page
Code source du tableau avec en-têtes et pieds de page
Configurations Renault Sandero Stepway
Caractéristique
SUTA 09H 6R
SUTA 09HR6R
SUTA 15H 5R
Disponibilité
+
+
+
Puissance du moteur
0,9 (90 ch)
0,9 (90 ch)
1,5 (90 ch)
Carburant
essence
essence
diesel
Norme de toxicité
6 euros
6 euros
5 euros
Colonnes et groupes de colonnes
Un tableau HTML peut être divisé en colonnes et groupes de colonnes à l'aide de balises et.
Cette division vous permet de définir des styles pour un tableau en utilisant un nombre minimum de propriétés CSS, réduisant ainsi la quantité de code du tableau (au lieu de définir des styles pour chaque cellule d'une colonne, vous pouvez définir des styles pour une ou plusieurs colonnes à la fois).
Les balises et sont placées à l'intérieur de la balise avant les balises, AKP6 (EDC)
Transmission
Code source du tableau HTML
Et
ZEN 2E2C AL A
ZEN 2E2C J5A
INTENSE 2E3C AL A
Caractéristique
1,5 (90 ch)
1.2 (115 ch)
1,5 (90 ch)
Puissance du moteur
diesel
essence
diesel
Carburant
Transmission automatique6 (EDC)
Transmission automatique6 (EDC)
Transmission automatique6 (EDC)
Transmission
Tableaux dans la mise en page du site
Sur les sites Web modernes, il est important que les pages s’affichent correctement sur les ordinateurs et les appareils mobiles. Il est déconseillé d'utiliser des tableaux pour créer le squelette d'une page HTML, car on perd la possibilité d'adapter le contenu à des écrans de différentes tailles (ordinateurs, smartphones, tablettes).
Les balises de groupe de tableaux sont mieux utilisées à l’intérieur d’une page pour afficher le contenu sous forme de tableau.
Chapitre 4
Tableaux en HTML
Les tableaux sont l’une des fonctionnalités les plus puissantes et les plus utilisées du HTML. Le concept de présentation tabulaire des données ne nécessite pas d’explications supplémentaires. En HTML, les tableaux sont utilisés non seulement traditionnellement comme méthode de présentation de données, mais également comme moyen de formatage des pages Web. Donnons des exemples de documents réels dans lesquels une représentation tabulaire est un moyen pratique de construire un document. En figue. La figure 4.1 montre un exemple typique d'utilisation de tableaux pour présenter des données numériques divisées en lignes et en colonnes. En figue. 4.2 l'utilisation d'un tableau sert uniquement à formater le document et à spécifier la position relative des éléments de la page. Lors de la visualisation d'un tel document, il n'est pas immédiatement évident qu'un tableau est utilisé pour le construire, puisque les cadres autour de ses cellules ne sont pas dessinés.
La première version du langage HTML ne prévoyait pas d'outils particuliers pour afficher les tableaux, puisqu'il était principalement destiné à l'écriture de texte simple. Avec le développement des domaines d'application des documents HTML, la tâche de présentation des données, qui sont généralement représentées par un certain nombre de lignes et de colonnes, est devenue urgente. La création de documents contenant des données alignées en colonnes a été initialement réalisée à l'aide de texte préformaté, à l'intérieur duquel l'alignement nécessaire était assuré par l'introduction du nombre d'espaces requis. Rappelez-vous que le texte à l'intérieur d'une paire de balises
ET
apparaît dans une police à espacement fixe et tous les espaces et tabulations sont significatifs. Le travail d'alignement de ce texte était effectué manuellement, ce qui ralentissait considérablement la création de documents. La prise en charge de la présentation des données tabulaires est devenue une norme de facto, puisqu'elle a été initialement implémentée dans tous les principaux navigateurs et n'a été inscrite qu'après une période de temps considérable dans la spécification HTML 3.2.
Les outils spéciaux de création de tableaux n'éliminent cependant pas la possibilité d'utiliser du texte préformaté. L'utilisation de tableaux ne se limite pas aux données constituées de lignes et de colonnes. Une application consiste à organiser la disposition de diverses données sur une page, qui peuvent être constituées de texte simple, d'images, d'autres tableaux, etc. Ce chapitre est consacré aux règles de création de tableaux et à des exemples de leur utilisation.
Riz .
4.1.
Exemple de tableau HTML typique
Riz .
4.2.
Exemple de tableau sans bordures
Création de tableaux HTML simples
Considérons d'abord l'ensemble minimum de balises et leurs paramètres, nécessaires et suffisants pour créer des tableaux simples, puis passons à leur description détaillée.
Les descriptions des tableaux doivent être situées dans la section du document.
. Un document peut contenir un nombre arbitraire de tableaux et l’imbrication des tableaux les uns dans les autres est autorisée. Chaque tableau doit commencer par la balise
et terminez par le tag
. À l’intérieur de cette paire de balises se trouve une description du contenu du tableau. Tout tableau se compose d'une ou plusieurs lignes, chacune contenant des données pour des cellules individuelles.
Chaque ligne commence par la balise
(Table Row) et se termine par la balise
. Une seule cellule consécutive est encadrée par une paire de balises
Et
(Données du tableau) ou
Et
(En-tête du tableau). Étiqueter
généralement utilisé pour les cellules d'en-tête de tableau, et
- pour les cellules de données. La différence d'utilisation réside uniquement dans le type de police utilisé par défaut pour afficher le contenu des cellules, ainsi que dans l'emplacement des données dans la cellule. Contenu des cellules de type
est affiché en caractères gras et situé au centre (ALIGN=CENTER, VALIGN=MIDDLE). Cellules définies par balise
par défaut, affichez les données alignées à gauche (ALIGN=LEFT) et au milieu (VALIGN=MIDDLE) dans le sens vertical.
Mots clés
Et
ne peut pas apparaître en dehors de la description de la ligne du tableau
. Codes d'achèvement
, Et peut être omis. Dans ce cas, la fin de la description de la ligne ou de la cellule correspond au début de la ligne ou de la cellule suivante, ou à la fin du tableau. Balise de fin de table ne peut être omis.
Le nombre de lignes dans le tableau est déterminé par le nombre de balises d'ouverture
, et le nombre de colonnes est le nombre maximum
ou
parmi toutes les lignes. Certaines cellules peuvent ne contenir aucune donnée ; ces cellules sont décrites par une paire de balises qui se succèdent -
,
. Si une ou plusieurs cellules situées à la fin d'une ligne ne contiennent pas de données, leur description peut être omise et le navigateur ajoutera automatiquement le nombre requis de cellules vides. Il s'ensuit que la construction de tableaux dans lesquels différents nombres de colonnes de même taille sont situées dans des lignes différentes n'est pas autorisée.
Le tableau peut avoir un en-tête composé de quelques balises
Et
. La description de l'en-tête du tableau doit être située à l'intérieur des balises
Et
n'importe où, mais en dehors de la zone de description de l'une des balises
,
ou
. Selon la spécification du langage HTML, l'emplacement de la description de l'en-tête est plus strictement réglementé : elle doit être située immédiatement après la balise
et jusqu'au premier
. Nous vous recommandons de respecter cette règle.
Par défaut, le texte du titre du tableau est positionné au-dessus (ALIGN=TOP) et centré horizontalement.
Les balises répertoriées peuvent avoir des paramètres dont le nombre et les valeurs sont différents. Cependant, dans le cas le plus simple, les balises sont utilisées sans paramètres, qui prennent des valeurs par défaut.
Ces informations sont tout à fait suffisantes pour construire des tableaux élémentaires. Donnons un exemple d'un tableau simple, composé de deux lignes et de deux colonnes, dont l'affichage est illustré à la Fig. 4.3.
Un exemple de tableau simple
Cellule 1, ligne 1
Cellule 2, ligne 1
Cellule 1 ligne 2
Cellule 2, ligne 2
Riz. 4.Z. Un exemple de tableau simple
Présentation des tableaux sur une page
Examinons l'utilité des différents paramètres pouvant être utilisés dans les balises décrivant les tableaux.
Titre du tableau
Balise d'en-tête de tableau
possède un seul paramètre valide ALIGN, qui prend les valeurs TOP (en-tête au dessus du tableau) ou BOTTOM (en-tête en dessous du tableau). Le paramètre ALIGN peut être omis, ce qui correspond à la valeur ALIGN=TOP. Dans le sens horizontal, l'en-tête du tableau est toujours situé au centre du tableau. Le tableau ne peut pas avoir d'en-tête. Dans la plupart des cas, le texte brut est utilisé comme titre du tableau, ce qui est réglementé par la spécification HTML, mais en réalité entre les balises.
Et
il est acceptable d'écrire tous les éléments HTML utilisés dans la section . Voici un exemple d'entrée d'en-tête de tableau :
Rubrique située en bas du tableau
Si cette description d'en-tête est ajoutée à l'exemple ci-dessus, le tableau sera affiché comme indiqué sur la Fig. 4.4.
Riz. 4.4. Tableau avec en-tête
Microsoft Internet Explorer fournit des options supplémentaires pour sélectionner l'emplacement de l'en-tête. Le paramètre ALIGN accepte les valeurs LEFT, CENTER et RIGHT pour l'alignement horizontal, ainsi que les valeurs décrites ci-dessus. Notez qu'il s'agit de l'un des rares cas où le paramètre ALIGN, largement utilisé, peut être utilisé à la fois pour l'alignement horizontal et vertical. Par exemple, écrire ALIGN=RIGHT garantira que l’en-tête est positionné au ras du côté droit et positionné au-dessus de la table. Si vous écrivez ALIGN=BOTTOM, alors, tout comme dans l'exemple ci-dessus, l'en-tête sera situé sous le tableau. Cependant, l'utilisation du paramètre ALIGN deux fois dans le même en-tête n'est pas autorisée. Par conséquent, un paramètre spécial pour l'alignement vertical a été introduit en plus - VALIGN, qui prend les valeurs TOP ou BOTTOM. Par exemple, pour un titre situé en bas d’un tableau aligné à gauche, la description ressemble à ceci :
Titre positionné en bas, aligné à gauche
Un tableau avec cette description d'en-tête dans Microsoft Internet Explorer sera affiché comme suit (Fig. 4.5). Si cet exemple est visualisé dans Netscape, l'en-tête sera placé par défaut, c'est-à-dire au-dessus du tableau et au milieu dans le sens horizontal.
Riz. 4.5. Alignement horizontal des en-têtes de tableau dans Microsoft Internet Explorer
Les capacités d'alignement horizontal des en-têtes de tableau sont une extension de la spécification HTML et ne sont pas prises en charge par Netscape Navigator et ne doivent donc être utilisées qu'en cas d'absolue nécessité.
Options de balise
La balise principale utilisée lors de la création de tableaux est la balise
. Il peut être utilisé avec un certain nombre de paramètres, chacun pouvant être omis. L'ensemble des paramètres acceptables dépend du navigateur. Selon la spécification HTML dans la balise
Les paramètres suivants peuvent être utilisés : BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Les navigateurs NetScape et Microsoft Internet Explorer permettent d'utiliser les paramètres HEIGHT et BGCOLOR en plus des cinq paramètres listés. Certains navigateurs vous permettent également de définir d'autres options. Considérons le but des paramètres de balises couramment utilisés
.
Paramètre BORDURE
Le paramètre BORDER contrôle l'apparence de la bordure autour de chaque cellule, qui correspond essentiellement aux lignes de la grille du tableau, et autour de l'ensemble du tableau. Par défaut, les cadres ne sont pas dessinés et l'utilisateur ne verra à l'écran que le texte régulièrement espacé des cellules du tableau. Il existe de nombreuses situations où l'utilisation de tableaux sans cadres est tout à fait justifiée, par exemple pour les listes multicolonnes réalisées à l'aide de tableaux, ou pour spécifier la position relative exacte des images et du texte. Cependant, dans la plupart des cas, pour une utilisation traditionnelle du tableau, il est utile de séparer ses cellules les unes des autres par des lignes de quadrillage, ce qui rend les informations contenues dans le tableau plus faciles à percevoir et à comprendre.
Pour ajouter des frames au tableau, vous devez inclure dans le code
Paramètre BORDER, qui peut avoir une valeur numérique.
Par exemple,
ou
.
La valeur numérique du paramètre détermine l'épaisseur de la bordure en pixels qui est dessinée autour de l'ensemble du tableau, mais cette valeur n'affecte pas l'épaisseur des bordures autour de chaque cellule. S'il n'y a pas de valeur numérique, on suppose généralement qu'il s'agit de la valeur minimale (1), bien que le style d'affichage des bordures puisse différer d'un navigateur à l'autre. Il n'est pas possible de contrôler indépendamment l'affichage d'une bordure autour de l'ensemble du tableau et des bordures autour des cellules.
Un exemple de tableau avec un cadre de 10 pixels d'épaisseur est présenté sur la Fig. 4.6.
Riz. 4.6. Tableau avec bordure de 10 pixels
La spécification HTML 3.0 n'incluait pas de valeur pour le paramètre BORDER. Cela ne se fait qu'en HTML 3.2. Ainsi, en particulier, les premières versions de Microsoft Internet Explorer ne permettaient pas de définir une valeur numérique.
Notez que si le paramètre BORDER est absent, les bordures ne sont pas dessinées, mais un espace leur est laissé (cela ne s'applique qu'à Netscape). La taille totale du tableau ne change pas en l'absence ou en présence du paramètre BORDER (l'exception est lorsque BORDER=0 est spécifié). Ainsi, la distance minimale entre deux cellules adjacentes sera dans ces cas égale à deux fois l'épaisseur du cadre, soit deux pixels. Il est possible de placer les cellules aussi près que possible les unes des autres en définissant BORDER=0, ce qui signifie pas de frames. Certains navigateurs peuvent ne pas prendre en charge la définition du paramètre BORDER sur une valeur numérique, auquel cas une valeur de zéro sera ignorée et le tableau sera dessiné avec des bordures.
Voici quelques exemples:
Les trois exemples donnés ci-dessus seront affichés différemment par le navigateur Netscape. Notez qu’il s’agit d’un cas assez unique où l’on ne peut pas parler de valeur par défaut. Le troisième exemple, dans lequel le paramètre BORDER est omis, est différent de tout exemple où ce paramètre est présent. Pour Microsoft Internet Explorer, les deuxième et troisième exemples sont identiques, donc pour ce navigateur, la valeur par défaut du paramètre BORDER est zéro.
Paramètre CELLSPACING
Forme d'écriture du paramètre : CELLSPACING=num, où num est la valeur numérique du paramètre en pixels, qui ne peut être omise. La valeur num détermine la distance entre les cellules adjacentes (plus précisément entre les cadres de cellules) à la fois horizontalement et verticalement. La valeur par défaut est définie sur deux. Notez que traditionnellement dans les systèmes de publication, les cellules de tableau adjacentes ont une bordure commune. Dans les tableaux HTML, par défaut, un espace est laissé entre eux, comme le montre clairement la figure ci-dessus (Figure 4.6). Lorsque vous définissez CELLSPACING=0, les cadres des cellules adjacentes fusionneront et créeront l'impression d'une seule grille de tableau (Fig. 4.7).
Riz. 4.7. Tableau avec la valeur CELLSPACING=0
Paramètre CELLPADDING
La forme d'enregistrement du paramètre est similaire à CELLSPACING. La valeur num détermine la quantité d'espace libre (marge) entre le cadre de la cellule et les données à l'intérieur de la cellule. Par défaut, la valeur est définie sur un. Si vous définissez CELLPADDING sur zéro, une partie du texte de la cellule peut toucher la bordure de la cellule, ce qui n'est pas très esthétique.
En figue. La figure 4.8 montre un exemple de tableau avec la valeur CELLPADDING=10.
Riz. 4.8. Tableau avec la valeur CELLPADDING=10
L'effet des paramètres CELLPADDING et CELLSPACING est très similaire. Pour un tableau sans bordures, modifier l'un ou l'autre paramètre conduit au même résultat. Les deux paramètres affectent les retraits correspondants simultanément horizontalement et verticalement. Malheureusement, il existe un contrôle séparé des retraits horizontaux et verticaux comme cela se fait par exemple pour les retraits d'images (paramètres HSPACE et VSPACE de la balise ), non fourni.
Les trois paramètres - BORDER, CELLPADDING et CELLSPACING agissent indépendamment les uns des autres ; si l'un d'entre eux est omis, alors sa valeur par défaut est prise. En particulier, si tous les paramètres répertoriés sont omis, alors la distance minimale entre les données des cellules adjacentes sera de 6 pixels (pour Netscape). Cette valeur est la somme de deux pixels pour CELLSPACING, d'un pixel pour CELLPADDING et d'un pixel pour la bordure de chaque cellule. Le tableau le plus compact sera obtenu en précisant la description suivante :
Ce n'est que dans cette version que les cellules seront proches les unes des autres. Un exemple de cas d'utilisation serait un tableau dont les cellules contiennent toutes des images de même taille qui doivent être placées les unes à côté des autres.
Paramètres LARGEUR et HAUTEUR
Lors de l'affichage des tableaux, leur largeur et leur hauteur sont automatiquement calculées par le navigateur et dépendent de nombreux facteurs : les valeurs des paramètres spécifiés dans la description de l'ensemble du document, de ce tableau, de ses lignes et cellules individuelles, du contenu des cellules , ainsi que les paramètres spécifiés lors de la visualisation du document dans un navigateur particulier , par exemple, le type et la taille de la police, la taille de la fenêtre d'affichage, etc. Lorsqu'elles sont affichées, les tailles des tableaux sont calculées automatiquement en tenant compte de ces facteurs et une tentative est faite pour présentez le tableau sous la forme la plus pratique - pour disposer le tableau de manière à ce qu'il tienne dans la fenêtre de visualisation. En règle générale, le schéma général de visualisation de documents volumineux se résume au défilement linéaire du contenu du document verticalement et à la lecture de texte entrecoupé de divers tableaux, images, etc. Cela s'applique à la fois aux documents HTML et aux documents ordinaires créés dans n'importe quel éditeur de texte. . La plupart des éditeurs de texte (tels que Microsoft Word) et des navigateurs HTML formatent automatiquement le texte (si possible) afin que les lignes ne soient pas plus longues que la largeur de la fenêtre. Cela évite d'avoir à faire défiler horizontalement le document. Les navigateurs effectuent des actions similaires avec les tableaux - si possible, formatez-les de manière à ce que la largeur du tableau ne dépasse pas la largeur de la fenêtre de visualisation. On peut conclure que la largeur des tables est un paramètre primaire plus important, dont le calcul s'effectue en premier par rapport à la hauteur.
Dans la plupart des cas, le dimensionnement dynamique du tableau donne une image esthétiquement proportionnée qui utilise efficacement la zone réelle de la fenêtre. Il peut toutefois être nécessaire de forcer la spécification de la largeur ou de la hauteur du tableau. A cet effet, les paramètres WIDTH (largeur du tableau) et HEIGHT (hauteur du tableau) de la balise sont utilisés
. Forme de notation : WIDTH=num ou WIDTH=num%, où num est la valeur numérique de la largeur de l'ensemble du tableau en pixels ou en pourcentage de la taille totale de la fenêtre. Notez qu'il est acceptable de définir des valeurs supérieures à 100 %, même s'il est difficile d'imaginer un cas où cela serait nécessaire. Exemple:
.
Des paramètres similaires peuvent être définis pour des cellules individuelles. Notez que la définition d'une valeur de paramètre spécifique, par exemple WIDTH=200, ne signifie en aucun cas que le tableau aura la largeur spécifiée, mais détermine uniquement la largeur recommandée, qui sera conservée autant que possible. Expliquons cela avec des exemples. Supposons qu'il y ait un tableau qui, dans ces conditions, aurait par défaut une largeur inférieure à celle spécifiée. Dans ce cas, le navigateur augmentera la largeur du tableau jusqu'à celle requise en agrandissant proportionnellement toutes les colonnes du tableau. Si vous réduisez la fenêtre, la largeur du tableau ne changera pas et vous devrez peut-être le faire défiler horizontalement pour l'afficher. Si le tableau par défaut a une largeur supérieure à celle spécifiée, le navigateur tentera de réduire sa largeur, d'une part en réduisant la largeur des colonnes individuelles pour lesquelles la largeur spécifiée est plus grande que nécessaire, et d'autre part, en divisant le texte en cellules individuelles en plusieurs lignes en augmentant la hauteur du tableau. Ces actions peuvent ne pas fournir la taille de tableau requise, auquel cas elle aura la largeur minimale possible. Les mêmes actions sont prises pour les tableaux qui n'ont pas de tailles spécifiées lors du rétrécissement de la fenêtre.
Les algorithmes spécifiques de configuration des tableaux pour différents navigateurs peuvent différer légèrement.
Paramètre ALIGN
Ce paramètre de balise
définit la position horizontale de la table dans la zone de visualisation. Les valeurs valides sont GAUCHE (alignement à gauche) et DROITE (alignement à droite). Par défaut, les tableaux sont alignés à gauche. Notez que parmi les valeurs valides, il n'y a pas de valeur typique pour le paramètre d'alignement - CENTER. Certaines publications HTML répertorient CENTER comme acceptable dans ce cas. Ceci est cohérent avec la spécification HTML, mais en pratique Netscape Navigator et Microsoft Internet Explorer n'implémentent que deux valeurs. Le fait est que la présence du paramètre ALIGN dans la balise
non seulement détermine l'emplacement de la table, mais vous permet également d'enrouler le texte autour de la table du côté opposé, de la même manière que pour enrouler des images. Il n’est pas prévu que le texte entoure la table des deux côtés. Pour un contrôle plus précis de l'emballage, vous devez utiliser la balise avec le paramètre CLEAR de la même manière que pour . Si ALIGN est omis, l'espace à droite et/ou à gauche du tableau sera toujours vide, quelle que soit sa largeur. Si le tableau ne nécessite pas que le texte soit enroulé autour de lui, vous pouvez vous assurer qu'il est positionné au centre de la fenêtre. Pour ce faire, par exemple, vous pouvez placer la description complète du tableau dans une paire de balises
Et
.
Donnons un exemple de tableau avec texte d'habillage, dont l'affichage est illustré à la Fig. 4.9.
Tableau avec du texte enroulé autour
adulte
population de Saint-Pétersbourg
Abram
Alexandre
Alexeï
Albert
Anatolie
Andreï
Arkadi
Boris
Vadim
Valentin
Valéry
Basilic
Victor
Vitaly
Vladimir
Vladislav
Viatcheslav
Gennady
Géorgie
Hermann
Grégory
Dmitri
Eugène
Éfim
Ivan
Igor
Il y a
Joseph
Constantin
un lion
Léonid
Michael
Nikolaï
Oleg
Paul
Pierre
Roman
Semyon
Sergueï
Stanislav
Édouard
Youri
Jacob
Les 43 noms les plus fréquents indiqués couvrent 92 % de l'échantillon.
Riz. 4.9. Tableau sans bordure avec texte d'habillage
Ce document se compose d'un tableau sans bordure avec le paramètre d'alignement ALIGN=LEFT, qui permet au texte suivant le tableau d'apparaître à droite de celui-ci. Le tableau se compose d’une seule ligne contenant deux cellules. Chaque cellule contient une partie d'une liste non ordonnée
. Utiliser un tableau pour afficher une liste est un moyen de forcer une liste à comporter plusieurs colonnes, comme l'illustre également cet exemple. Le texte situé à droite du tableau n’y tiendra peut-être pas entièrement, mais il continuera après le tableau. Essayez d'utiliser cet exemple pour réduire la largeur de la fenêtre du navigateur, et à un moment donné, tout le texte apparaîtra en bas du tableau. Rappelons que pour interrompre avec force le flux de texte le long du tableau (par exemple, si le texte suivant n'est pas logiquement lié au tableau et doit se trouver en dessous), vous devez utiliser le code avec le paramètre CLEAR réglé. Pour cet exemple, vous devez écrire ou . Certains navigateurs permettent d'écrire le paramètre CLEAR sans valeur, mais cela n'est pas recommandé. Pour accomplir la même tâche, en spécifiant plusieurs sauts de ligne sans le paramètre CLEAR (comme on le fait dans l'exemple avant le texte pour le décaler de plusieurs lignes) ni plusieurs codes pour le début d'un nouveau paragraphe
Mauvaise décision.
Donnons un exemple légèrement différent de création d'une telle page, dont l'affichage est illustré à la Fig. 4.10.
Tableau sans retour à la ligne du texte
Les prénoms masculins les plus courants
population adulte de Saint-Pétersbourg
Abram
Alexandre
Alexeï
Albert
Anatolie
Andreï
Arkadi
Boris
Vadim
Valentin
Valéry
Basilic
Victor
Vitaly
Vladimir
Vladislav
Viatcheslav
Gennady
Géorgie
Hermann
Grégory
Dmitri
Eugène
Éfim
Ivan
Igor
Il y a
Joseph
Constantin
un lion
Léonid
Michael
Nicolas
Oleg
Paul
Pierre
Roman
Semyon
Sergueï
Stanislav
Édouard
Youri
Jacob
Les données présentées ont été obtenues sur la base de l'analyse d'un échantillon représentatif contenant des informations sur 5 000 hommes de plus de 18 ans vivant à Saint-Pétersbourg. Ces 43 noms les plus fréquemment rencontrés couvrent 92 % de l’échantillon. La fréquence d'apparition de chacun des autres noms ne dépasse pas 0,3%
Riz. 4.10. Tableau sans bordures contenant trois colonnes
Contrairement à l’exemple précédent, il n’y a pas de texte autour du tableau. L'ensemble du document se compose d'un tableau avec un en-tête contenant trois cellules sur une ligne. Les deux premières cellules reprennent complètement l’exemple précédent. La troisième cellule contient du texte qui commente le contenu des deux premières cellules. Il n'est pas nécessaire de forcer la fin du texte ici, comme décrit dans le cas précédent. Tout le texte lié au tableau doit être situé à l'intérieur de la troisième cellule, et le texte suivant doit être situé après la fin de la description de l'ensemble du tableau.
. Les deux exemples semblent identiques lorsqu'ils sont visualisés en plein écran, à l'exception de l'en-tête, qui dans le premier cas est situé au milieu d'une liste à deux colonnes, et dans le second, il est situé au milieu des trois colonnes de la table. Cependant, lorsque la fenêtre est réduite dans le dernier exemple, aucune partie du texte ne peut passer en dessous du tableau, brisant ainsi sa structure.
Formatage des données dans un tableau
Chaque cellule individuelle d'un tableau peut être traitée comme une zone de formatage indépendant. Toutes les règles en vigueur pour contrôler l'affichage du texte peuvent être utilisées pour formater le texte dans une cellule. Dans une cellule, il est acceptable d'utiliser presque tous les éléments HTML pouvant apparaître dans le corps d'un document.
, y compris les balises qui contrôlent le placement du texte -
, ,
, codes d'en-tête - de
avant
, balises de formatage des caractères -<В>, , , , , ,
, insertion de tags d'images graphiques , liens hypertextes<А>etc. Nous soulignons immédiatement que la portée des balises spécifiées à l'intérieur d'une cellule distincte est limitée aux limites de cette cellule, quelle que soit la présence d'une balise finale. Par exemple, si une couleur de texte est définie à l'intérieur d'une cellule - , puis même en l'absence de code de résiliation ou en le plaçant sur plusieurs cellules ou lignes de tableau, le texte de la cellule suivante sera reflété dans la couleur par défaut.
Les options suivantes sont disponibles pour formater les données dans les cellules du tableau.
Les options d'alignement du contenu des cellules sont ALIGN et VALIGN. Peut être utilisé dans les codes
,
Et
. Le paramètre d'alignement horizontal ALIGN peut prendre les valeurs LEFT, RIGHT et CENTER (la valeur par défaut est LEFT pour
et CENTRE pour
). Le paramètre d'alignement vertical VALIGN peut prendre les valeurs suivantes : TOP (bord supérieur), BOTTOM (bord inférieur), MIDDLE (au milieu), BASELINE (ligne de base). La valeur par défaut est MILIEU. L'alignement de la ligne de base garantit que le texte d'une seule ligne dans toutes les cellules est ancré sur une seule ligne. Définition des options d'alignement au niveau du code
détermine l'alignement de toutes les cellules d'une ligne donnée, tandis que chaque cellule individuelle de la ligne peut avoir ses propres paramètres définis qui remplacent l'effet des paramètres spécifiés dans
.
Voici un exemple de tableau dans lequel les données des cellules de la première colonne sont alignées à droite, la deuxième colonne est centrée et la troisième est alignée à gauche (par défaut) :
Aligner les éléments du tableau
Cellule 1
Cellule 2
Cellule 3
Cellule 4
Cellule 5
Cellule 6
L'affichage du navigateur de cet exemple est illustré à la Fig. 4.11.
Riz. 4.11. Aligner les données dans les cellules du tableau
L'option NOWRAP désactive la possibilité de diviser automatiquement le texte d'une cellule en lignes. Peut être utilisé dans les codes
,
Et
. L'utilisation inutile de ce paramètre doit être évitée, car elle peut réduire considérablement la capacité de redimensionner dynamiquement les tableaux et nuire à leur lisibilité. Dans la plupart des cas, il suffit d'utiliser NOWRAP pour des cellules individuelles qui nécessitent réellement l'interdiction du retour à la ligne. Le retour à la ligne est effectué uniquement par des séparateurs entre les mots (espaces), et dans certains cas, pour interdire la coupure de texte à certains endroits, au lieu du caractère espace, vous devez définir le code d'espace insécable (NonBreaking Space). Les exemples incluent les cas où un écart n'est pas recommandé - entre une valeur numérique et les unités de mesure d'une valeur donnée ; entre le nom et les initiales. Ainsi, le texte est 650 km ou Eltsine B.N. Il est recommandé de l'écrire sous la forme 650 km et Eltsine B.N.
Les paramètres WIDTH et HEIGHT peuvent être utilisés dans les codes
Et
. Leur syntaxe est similaire à la syntaxe de ces paramètres pour la balise
. Leur valeur détermine la largeur ou la hauteur de la cellule pour laquelle ces paramètres sont enregistrés. Les valeurs peuvent être spécifiées en pixels ou en pourcentage de la taille de l'ensemble du tableau. Microsoft Internet Explorer permet uniquement de spécifier la LARGEUR en pixels. Puisqu'un tableau est une structure cohérente composée de lignes et de colonnes, la définition de la largeur de n'importe quelle cellule affecte la largeur de la colonne entière dans laquelle se trouve la cellule, et la définition de la hauteur affecte la ligne entière. Si la valeur de largeur d'une colonne est spécifiée dans une seule cellule, cette valeur devient la largeur de la colonne entière. S'il existe plusieurs indications de ce type, la valeur maximale est sélectionnée. Les mêmes propriétés s'appliquent aux chaînes.
Les tableaux complexes se caractérisent par la nécessité de combiner plusieurs cellules adjacentes horizontalement ou verticalement en une seule. Cette fonctionnalité est implémentée à l'aide des paramètres COLSPAN (COLiimn SPANning) et ROWSPAN (ROW SPANning) spécifiés dans les codes
ou
. Forme de notation : COLSPAN=num, où num est une valeur numérique qui détermine le nombre de colonnes dans lesquelles la cellule actuelle doit être développée horizontalement. L'utilisation du paramètre ROWSPAN est similaire, sauf qu'ici vous spécifiez le nombre de lignes que la cellule actuelle doit s'étendre verticalement. Par défaut, ces paramètres sont définis sur un. Il est permis de définir simultanément les valeurs des deux paramètres pour une cellule. Définir correctement les valeurs de ces paramètres n'est peut-être pas une tâche très simple, d'autant plus que la plupart des éditeurs HTML vous permettent de construire visuellement uniquement des tableaux simples avec génération ultérieure de codes HTML.
En figue. La figure 4.12 montre un exemple d'affichage de tableau obtenu à partir du code HTML suivant :
Utilisation des paramètres COLSPAN et ROWSPAN
Cellule s'étendant sur deux lignes
Cellule s'étendant sur deux colonnes
Cellule 3
Cellule 4
Cellule 5
Cellule 6
Cellule 7
Riz. 4.12. Tableau avec des cellules s'étendant sur plusieurs lignes ou colonnes
Un réglage inattentif des valeurs des paramètres de glissement des cellules peut conduire à leur chevauchement mutuel et à des conflits, dont le résultat est imprévisible. Une utilisation typique des cellules étendues est un en-tête commun pour plusieurs colonnes ou lignes adjacentes.
Voici un exemple de code HTML (dont l'affichage est illustré à la Fig. 4.13), dans lequel les cellules étendues sont formées de manière incorrecte.
Utilisation incorrecte des cellules étendues
Cellule 1
Cellule 2
Cellule 3 (commun Ha trois lignes)
Cellule 4
Cellule 5
Cellule 6
Cellule 7 (répartie sur deux colonnes)
Riz. 4.13. Résultat d'une définition incorrecte des cellules étendues (superposition de texte)
Le paramètre BGCOLOR spécifie la couleur d'arrière-plan du tableau entier, des lignes individuelles ou des cellules. Peut apparaître dans les balises
,
,
Et
. Cette fonctionnalité n'est pas fournie par la spécification HTML, mais est prise en charge par Netscape et Microsoft Internet Explorer. Le formulaire d'inscription est le même que pour le tag , à savoir : BGCOLOR=valeur, où la valeur est le contenu de la couleur au format RVB ou son nom.
Exemple:
ou
.
Tableaux imbriqués
Les cellules individuelles du tableau peuvent contenir pratiquement toutes les balises de langue et toutes les données autorisées dans la section.
document. En particulier, un autre tableau peut être placé entièrement à l’intérieur d’une cellule du tableau. De telles tables sont appelées imbriquées. Les règles de leur construction ne diffèrent pas de la construction des tables et ne nécessitent pas de description distincte. Notons simplement que tous les navigateurs prenant en charge les tableaux n'affichent pas correctement les tableaux complexes avec plusieurs niveaux d'imbrication, leur utilisation nécessite donc de la prudence.
Donnons un exemple de table utilisant un seul niveau d'imbrication.
Villes de la région de Léningrad
Villes de la région de Léningrad
H - population de la ville (milliers d'habitants, 1992)
P - distance de Saint-Pétersbourg (km)
Villes subordonnées à Saint-Pétersbourg
Ville
H
P.
Zelenogorsk
13.6
50
Kolpino
144.6
26
Cronstadt
45.2
48
Lomonossov
42.0
40
Pavlovsk
25.4
30
Pétrodvorets
83.8
29
Pouchkine
95.1
24
Sestroretsk
34.9
35
Toutes les villes soumises à administration Saint-Pétersbourg, ont ville directe numéros de téléphone.
Villes de subordination régionale
Ville
H
P.
Boksitogorsk
21.6
ALIGNER=DROITE>245
Bolkhov
50.3
ALIGNER=DROITE>122
Bsevolojsk
32.9
24
Vyborg
80.9
130
Vyssotsk
1.0
ALIGNER=DROITE>159
Gatchina
80.9
46
Ivangorod
11.9
ALIGNER=DROITE>147
Kamennogorsk
5.9
157
Kingissepp
51.5
ALIGNER=DROITE>138
Kirishi
53.8
ALIGNER=DROITE>115
Kirovsk
23.8
55
Pôle Lodeïnoye
27.3
ALIGN=DROITE>244
Lyga
41.8
139
(Suite du tableau)
Ville
H
P.
Lyuban
4.7
85
Novaïa Ladoga
11.2
ALIGNER=DROITE>141
Otradnoé
22. 9
ALIGNER=DROITE>40
Pikalevo
25.1
ALIGN=DROITE>246
Podporojie
23.1
285
Primorsk
6.7
137
Priozersk
20.5
ALIGNER=DROITE>145
Svétogorsk
15.8
ALIGNER=DROITE>201
Ardoises
42.6
ALIGNER=DROITE>192
Pinède
57.6
81
Tikhvine
72.0
ALIGNER=DROITE>200
Tosno
33.8
53
S Lisselbourg
12.5
64
Riz. 4.14. Exemple de tables imbriquées
Le résultat d'affichage de cet exemple est présenté sur la Fig. 4.14.
À première vue, il semble qu’il n’y ait pas d’imbrication de tables dans l’exemple. En fait, l’ensemble du document est un tableau sans bordures et constitué d’un en-tête et d’une seule ligne contenant cinq cellules. L'organisation d'un tel tableau a pour seul but d'organiser les données sur la page. À l'intérieur de la première cellule se trouve un autre tableau, qui a son propre titre et se compose de trois colonnes, suivies d'un texte aligné au milieu. Les troisième et cinquième cellules contiennent également des tableaux distincts. Les deuxième et quatrième cellules sont vides, elles ne contiennent aucune donnée et ont un seul paramètre WIDTH qui détermine sa largeur. Leur but est de définir le retrait entre la première et la troisième, ainsi que la troisième et la cinquième cellules dans lesquelles se trouvent les tableaux. C'est l'une des options possibles pour définir un tel retrait. Une autre option consiste à utiliser le paramètre CELLSPACING, qui détermine la distance entre les cellules. Cependant, ce paramètre spécifie le remplissage horizontal et vertical, ce qui n'est pas requis pour le moment. De plus, une cellule vide d'une largeur donnée rétrécira lorsque la fenêtre d'affichage sera rétrécie, contrairement à l'espace spécifié par le paramètre CELLSPACING (ainsi que CELLPADDING). En utilisant cet exemple, essayez de réduire la largeur de la zone d'affichage dans le navigateur ou, ce qui conduira aux mêmes résultats, d'augmenter la taille de la police dans laquelle le texte est affiché. La distance entre les tableaux sera réduite à zéro, permettant de voir toutes les informations simultanément le plus longtemps possible. Cependant, d'autres modifications n'entraîneront pas d'endommagement du tableau, mais offriront la possibilité de faire défiler horizontalement. En utilisant un schéma similaire, vous pouvez organiser le placement d'informations constituées non seulement de tableaux, mais également d'images, de fragments de texte, etc.
Caractéristiques de la construction de la table
Cette section aborde certaines fonctionnalités spécifiques des navigateurs individuels, ainsi que certaines subtilités de la construction et de l'affichage des tableaux.
Afficher les cellules vides dans les tableaux
L'une des caractéristiques de la présentation des tableaux dans divers navigateurs est l'affichage de cellules vides. Selon la description du langage, tous les navigateurs doivent remplir les lignes avec des cellules vides si dans une ligne leur nombre est inférieur à celui des autres lignes. De plus, certaines cellules du tableau peuvent ne contenir aucune donnée. Il existe une différence entre les cellules vides et les cellules contenant des données invisibles. Dans des cellules vides à l'intérieur d'une paire de balises
Et
ne contient aucune information ou un ou plusieurs espaces qui ne sont pas traités comme des données. Les cellules contenant des données invisibles, par exemple, peuvent contenir du code ou du code de saut de ligne , ou tout texte dont la couleur correspond à la couleur d'arrière-plan de la cellule. Alors que les cellules contenant des données (même invisibles) sont rendues de la même manière par tous les navigateurs, les cellules vides seront rendues différemment. Le navigateur Netscape n'affiche pas de cellule vide, c'est-à-dire que l'endroit où se trouve cette cellule sera rempli avec la couleur de fond de la page, et non la couleur de fond de la cellule, contrairement aux cellules contenant des données. Aucune bordure n'est tracée autour des cellules vides. Un exemple de tableau avec une cellule vide est présenté dans la Fig. 4.15.
Riz. 4.15. Les cellules de tableau vides s'affichent différemment selon les navigateurs
Microsoft Internet Explorer affiche les deux cellules en utilisant la couleur d'arrière-plan des cellules. Un navigateur tel que NSCA Mosaic offre à l'utilisateur la possibilité de déterminer la nature de l'affichage des cellules vides du tableau en sélectionnant les options appropriées. La connaissance de ces fonctionnalités vous permettra d'élaborer des tableaux qui s'afficheront de manière appropriée, quel que soit le navigateur choisi par l'utilisateur. Dans certains cas, il suffit de créer des cellules contenant un seul code au lieu de quelques cellules vides.
Aligner les données dans les colonnes du tableau
Un problème courant lors de la création de tableaux consiste à définir les paramètres d’alignement pour des lignes ou des colonnes individuelles. Pour aligner le contenu de toutes les cellules de la ligne actuelle, définissez simplement les paramètres requis dans le code
. Cependant, il est le plus souvent nécessaire d'assurer le même alignement pour tous les éléments d'une même colonne, puisque dans la plupart des cas la colonne contient des données homogènes. Dans les premières versions de HTML, il a été proposé d'utiliser pour cela le paramètre COLSPEC (COLUmn SPECification), qui était spécifié dans la balise
et déterminé l'alignement et la largeur de chaque colonne du tableau. Par exemple, la tâche colspec="L40 R50 C80" a déterminé l'alignement des données dans les cellules pour trois colonnes du tableau : pour la première colonne - GAUCHE, pour la deuxième - DROITE et pour la troisième - CENTRE, ainsi que le largeur de chaque colonne. Au fur et à mesure de l'évolution du HTML, cette option a été abandonnée et ne fait actuellement pas partie de la spécification du langage et n'est pas prise en charge par la plupart des navigateurs. Par conséquent, Netscape Navigator ne dispose pas d'outils spéciaux pour résoudre ce problème, et la seule option est soit d'utiliser l'alignement par défaut, soit de définir les valeurs appropriées dans chaque cellule lorsque cela est nécessaire.
Microsoft Internet Explorer fournit des balises spéciales -
Et
. Ces balises doivent être situées immédiatement après la description
avant la première apparition du tag
.
Paramètres de balise
Et
peut être SPAN, qui détermine le nombre de colonnes adjacentes affectées par les valeurs des paramètres, et ALIGN, qui détermine l'alignement horizontal des données dans toutes les cellules de la ou des colonnes correspondantes. Les valeurs valides pour ALIGN sont LEFT, RIGHT et CENTER. Le paramètre SPAN a la valeur par défaut un.
Étiqueter
vous permet en outre de définir le paramètre VALIGN, qui détermine l'alignement vertical des données dans les cellules. Les valeurs valides pour VALIGN sont MIDDLE, TOP et BOTTOM.
Différence entre les balises
Et
est que le premier d'entre eux, en plus de définir les paramètres d'alignement des données pour les colonnes, effectue également une union conditionnelle de plusieurs colonnes dans un groupe. L'effet de cette combinaison est visible lors de l'utilisation du paramètre RULES, décrit ci-dessous. Par défaut, toutes les colonnes du tableau sont considérées comme un seul groupe. Étiqueter
ne doit être utilisé que pour déterminer l’alignement des données dans les colonnes individuelles d’un groupe.
Donnons un exemple. Supposons que vous deviez créer un tableau contenant 6 colonnes et que les données des trois premières d'entre elles doivent être alignées à droite et les trois suivantes - au milieu. Pour résoudre ce problème, vous devez écrire le fragment de code HTML suivant :
(données pour le tableau)
Le résultat de l'affichage de ce code est présenté sur la Fig. 4.16.
Riz. 4.16. Tableau avec différentes options d'alignement des données dans des groupes de cellules
Un autre exemple. Supposons que dans le tableau précédent, les deux premières colonnes soient alignées à droite et la troisième au milieu, et que les trois colonnes soient combinées en un groupe. Les trois colonnes suivantes doivent également être regroupées et avoir un alignement similaire à celui du premier groupe. Pour résoudre ce problème, vous devez écrire le fragment de code HTML suivant :
(données pour le tableau)
Dans cet exemple, après la balise
les paramètres des colonnes individuelles de ce groupe sont spécifiés. En même temps, dans le tag
Si nécessaire, des paramètres d'alignement pourraient être spécifiés, dont les valeurs s'appliquent à toutes les colonnes d'un groupe donné. Valeurs des paramètres spécifiées dans la balise
, remplacez les valeurs de la balise
. Notez que dans la balise
dans cet exemple, contrairement au précédent, il n'y a pas de paramètre SPAN. Ici son utilisation n'a aucun sens, puisque le nombre d'éléments dans le groupe sera déterminé par ceux qui suivent la balise
Mots clés
. Par conséquent, toute valeur donnée du paramètre de balise SPAN
sera annulé.
En figue. La figure 4.17 montre le résultat de l'implémentation du code ci-dessus, ainsi qu'une option pour afficher un tel tableau avec l'entrée RULES=GROUPS dans la balise
, d'où le sens de la combinaison en groupes est clair.
Conseil
Depuis la portée des balises
Et
limités à un seul navigateur, Microsoft Internet Explorer, vous devez les utiliser avec prudence. La commodité d'utiliser ces balises est évidente, mais en pratique, la plupart des tableaux sont construits à l'aide du paramètre d'alignement ALIGN approprié pour chaque cellule du tableau où il est nécessaire, ce qui augmente considérablement la taille du code source du tableau, mais garantit qu'il peut être visualisé dans n’importe quel navigateur.
Riz. 4.17. Tableau avec colonnes regroupées
Définition de la couleur de la bordure du tableau
Plusieurs autres options, uniques à Microsoft Internet Explorer, vous permettent de sélectionner la couleur des bordures des tableaux : BORDERCOLOR, BORDERCOLORLIGHT et BORDERCOLORDARK. Ces paramètres peuvent être spécifiés dans des balises
,
,
Et
. La valeur de ces paramètres peut être le nom de la couleur ou sa valeur hexadécimale. Le paramètre BORDERCOLOR spécifie la couleur de tous les éléments de bordure de tableau et les deux autres paramètres spécifient la couleur des bordures de composants individuels, remplaçant la valeur BORDERCOLOR. Le paramètre BORDERCOLORLIGHT peint les bords gauche et supérieur de l'ensemble du tableau et, par conséquent, les bords droit et inférieur de chaque cellule dans la couleur spécifiée. Le deuxième paramètre BORDERCOLORDARK spécifie les couleurs des bords opposés. En raison de la combinaison de ces paramètres, le tableau apparaîtra légèrement surélevé au-dessus de la surface de la page ou en retrait. Tout dépend de la combinaison de couleurs choisie.
Note
La version 4.x du navigateur Netscape prend également en charge le paramètre BORDERCOLOR.
Définir une image d'arrière-plan pour un tableau
Microsoft Internet Explorer (ainsi que Netscape version 4.x) vous permet d'utiliser le paramètre BACKGROUND, qui spécifie une image d'arrière-plan pour un tableau de la même manière qu'elle peut être utilisée pour un document HTML entier. Ce paramètre peut être défini dans les balises
,
Et
.
Balises de structuration des tableaux , w
Le navigateur Microsoft Internet Explorer vous permet d'utiliser un certain nombre de nouvelles balises pour structurer les tableaux et contrôler de manière flexible le dessin des cadres et des lignes de grille.
Mots clés ,
Et définir plus strictement la structure de la description du tableau, en mettant en évidence les cellules d'en-tête du tableau, le contenu principal du tableau et la ligne récapitulative. Ces balises ne peuvent apparaître que dans les descriptions de tableaux au sein d'une paire de balises
Et
.
Mots clés Et
sont utilisés pour décrire l’en-tête et le pied de page d’un tableau. Ces balises ne peuvent apparaître qu'une seule fois dans le tableau. La balise de fin de ceux-ci peut être omise. L’utilisation de ces balises est pratique lors de la création de grands tableaux s’étendant sur une seule page.
Étiqueter
peut apparaître plusieurs fois dans la description d'un tableau, nécessitant l'utilisation d'une balise de fin. Cette balise effectue un regroupement logique des données de la même manière que la
, qui effectue un regroupement de colonnes adjacentes.
En utilisant de nouvelles balises, vous pouvez contrôler de manière plus flexible les bordures et le quadrillage de votre tableau.
Le dessin des cadres autour de la table est contrôlé par le paramètre de balise FRAME
et les lignes de grille du tableau - par le paramètre RULES. Par exemple, il devient possible de tracer uniquement des lignes verticales entre les colonnes et au lieu d'un cadre autour de tout le tableau, de donner des lignes horizontales en haut et en bas du tableau.
Le paramètre FRAME peut prendre les valeurs suivantes :
BOÎTE ou BORDURE - le cadre est dessiné sur les quatre côtés
AU-DESSUS DE - uniquement du côté supérieur
CI-DESSOUS - uniquement par le bas
CÔTÉS - les côtés inférieur et supérieur sont dessinés
CÔTÉS - les côtés gauche et droit sont dessinés
LHS - uniquement du côté gauche
R.H.S. - seulement du côté droit
VIDE - table sans cadres externes
Le paramètre RULES contrôle le dessin des lignes de grille internes du tableau et peut prendre les valeurs suivantes :
TOUS - toutes les lignes internes sont tracées
GROUPES - seules les lignes séparant les groupes sont tracées
LIGNES - des lignes sont tracées séparant les lignes
COLS - des lignes sont tracées divisant les colonnes
AUCUN - les lignes internes ne sont pas tracées
Exemple:
.
Note
Les lignes et les cadres de la grille du tableau seront dessinés uniquement si le paramètre de balise BORDER est présent
. Si ce paramètre est absent ou si sa valeur est nulle, les lignes de grille et les cadres seront absents pour toutes les valeurs des paramètres FRAME et RULES.
Voici un exemple de code HTML complet qui crée un tableau en utilisant les fonctionnalités décrites :
Mise en surbrillance des lignes d'en-tête et de résumé
Exemple de gestion de ligne flexible tableau en grille
Titre de la colonne 1
Titre de colonne 2
Titre de la colonne 3
Données
Données
Données
Données
Données
Données
Données
Données
Données
Données
Données
Données
Données
Données
Données
Données
Données
Données
Conclusion
Conclusion
Conclusion
Riz. 4.18. Dessin flexible des lignes de grille de table à l'aide du navigateur Microsoft Internet Explorer
Dans cet exemple, dont l'affichage par le navigateur est illustré à la Fig. La figure 4.18 montre l'une des options possibles pour contrôler les lignes de grille et les bordures autour de la table. Un cadre de 5 pixels d'épaisseur (BORDER=S) est dessiné autour de la table uniquement sur les côtés supérieur et inférieur (FRAME=HSIDES). Des lignes de grille sont tracées à l'intérieur du tableau pour séparer les groupes de données (RULES=GROUPS). Les groupes de données sont définis, dans un premier temps, par la présence de trois balises
, dont chacun déclare une seule colonne de table groupe. Deuxièmement, les balises
, Et<тгоот>Ils divisent également les données du tableau en groupes, ce qui détermine le dessin des lignes horizontales internes.
Définition du nombre de colonnes du tableau
Le navigateur Microsoft Internet Explorer (ainsi que le navigateur Netscape version 4.x) permet de spécifier dans la balise
Paramètre COLS dont la valeur détermine le nombre de colonnes du tableau. L'écriture de ce paramètre permet d'accélérer la procédure de mise en page du tableau lors de son affichage dans un navigateur, puisqu'il devient possible de déterminer le nombre de colonnes avant de charger le code de description du tableau. Actuellement, l'activation de cette option n'affecte en rien la progression du chargement du document.
Alignement vertical des tables
Paramètre de la dernière balise
, unique à Microsoft Internet Explorer, est VALIGN, qui détermine l'alignement vertical du tableau par rapport au texte. Son effet est similaire au même paramètre pour les images.
Note
Notez que l'utilisation du même paramètre peut varier considérablement à la fois en termes d'objectif et de valeurs possibles pour différentes balises, même pour le même navigateur et au sein de la spécification du langage. Il est donc impossible de dresser un tableau récapitulatif de l’utilisation des différents paramètres en dehors du contexte de leur application. Par exemple, le paramètre ALIGN dans les tableaux uniquement est utilisé de trois manières différentes :
pour l'étiquette
le paramètre ALIGN peut prendre les valeurs LEFT ou RIGHT, et désigne l'emplacement du tableau, appuyé respectivement vers le bord gauche ou droit ;
pour l'étiquette
le paramètre ALIGN prend les valeurs TOP ou BOTTOM, et désigne l'emplacement de l'en-tête du tableau au dessus ou en dessous du tableau ;
pour les balises
,
Et
le paramètre ALIGN prend les valeurs LEFT, RIGHT ou CENTER, et signifie aligner horizontalement le contenu de la ou des cellules correspondantes du tableau.
Alternative à la vue tableau
La prise en charge des tableaux est devenue une fonctionnalité répandue dans les navigateurs Web, il n'y a donc guère de raisons d'éviter de l'utiliser. Néanmoins, nous examinerons les options possibles pour une présentation alternative des données qui peuvent être utilisées à la place des tableaux ou en plus de ceux-ci.
Quelques autres méthodes qui n'utilisent pas le concept de tableaux :
Utilisez du texte préformaté. Cette méthode était traditionnellement utilisée dans les premières versions de HTML, lorsque la prise en charge des tableaux n'existait pas encore. Son utilisation n'a pas perdu de sa pertinence à ce jour, puisque ces textes seront affichés correctement par n'importe quel navigateur, y compris les navigateurs purement textuels.
Utiliser une image contenant un tableau. Le tableau peut être créé par n'importe quel éditeur de texte ou même affiché dans un navigateur Web, puis enregistré sous forme d'image dans l'un des formats graphiques. Ce n'est pas la meilleure option, car elle perd toute la flexibilité nécessaire pour configurer dynamiquement l'affichage des tableaux. De plus, il est nécessaire de stocker un fichier supplémentaire avec une image dont la taille, en règle générale, sera nettement supérieure à la taille du texte décrivant le tableau HTML. Un domaine d'application possible est celui des tableaux de tailles strictement définies, pour lesquels la dépendance de son affichage à l'égard de facteurs externes (polices, modes de fonctionnement du navigateur, etc.) est inacceptable.
Utiliser des listes au lieu de tableaux. Pour les cas les plus simples, au lieu d'organiser des tableaux, il est tout à fait possible de s'en sortir avec un des types de listes disponibles dans le langage HTML.
Préparation des tableaux
N'importe quel éditeur peut être utilisé pour préparer des tableaux HTML, dont la plupart disposent d'outils permettant de créer visuellement des tableaux. Donnons un exemple de préparation d'un tableau dans l'éditeur HotDog Professional. Pour créer un tableau, sélectionnez simplement l'élément Tableaux dans le menu Insertion, après quoi la boîte de dialogue illustrée à la Fig. 4.19. Créer un tableau consiste à remplir les champs appropriés dans la fenêtre. Après avoir déterminé le nombre de lignes et de colonnes dans le tableau, vous pouvez procéder au remplissage direct des cellules individuelles du tableau, qui seront affichées dans la même boîte de dialogue. La boîte de dialogue comporte un bouton Aperçu, en cliquant sur ce qui vous permet de visualiser le tableau résultant à l'aide du navigateur intégré (Fig. 4.20).
Riz. 4.19. Boîte de dialogue pour créer des tableaux
Riz. 4.20. Tableau affiché à l'aide du navigateur intégré
Une fois que vous avez terminé de préparer les données pour le tableau, cliquez sur OK. Ensuite, le code de description du tableau généré sera inséré dans le document HTML édité. Pour l'exemple montré sur la Fig. 4.19, le code suivant sera généré :
3 en-têtes de tableau
Colonne 1
Colonne 2
Colonne 3
Colonne 4
1
2
3
4
(partie du code omise)
Cette tâche est résolue de la même manière lors de l'utilisation du composant Netscape Composer du programme Netscape Communicator. En figue. La figure 4.21 montre une boîte de dialogue dans laquelle vous devez remplir les champs obligatoires. Pour saisir des paramètres de balise supplémentaires
Il y a un bouton HTML supplémentaire. Après avoir rempli les champs de la boîte de dialogue, cliquez sur le bouton Appliquer et vous aurez alors la possibilité de remplir les cellules du tableau (Fig. 4.22).
Riz. 4.21. Boîte de dialogue permettant de définir les options de table de Netscape Composer
Riz. 4.22. Position initiale du curseur de saisie dans un tableau vide
Grâce à la polyvalence des tableaux et au grand nombre de paramètres qui contrôlent leur apparence, les tableaux sont depuis longtemps devenus un standard incontournable pour la mise en page des pages Web. Un tableau avec une bordure invisible ressemble à une grille modulaire, dans les blocs de laquelle il est pratique de placer des éléments de page Web. Cependant, ce n'est pas une approche tout à fait correcte, car chaque objet HTML est défini pour ses propres fins, et s'il n'est pas utilisé aux fins prévues, et partout, cela signifie qu'il n'y a pas d'alternatives. Cela a longtemps été le cas, jusqu'à ce que les couches remplacent les tableaux dans la mise en page des sites Web. Cela ne signifie pas que les calques sont désormais utilisés tout le temps, mais la tendance est déjà clairement apparue : les tableaux sont utilisés pour placer des données tabulaires et les calques sont utilisés pour la mise en page et la conception.
Création d'un tableau
Un tableau est constitué de lignes et de colonnes de cellules pouvant contenir du texte et des images. Les tableaux sont généralement utilisés pour organiser et présenter des données, mais ils ne se limitent pas à cela. À l'aide de tableaux, il est pratique de mettre en page des mises en page en disposant des fragments de texte et d'images de la manière souhaitée.
Pour ajouter un tableau à une page Web, utilisez la balise
. Cet élément sert de conteneur pour les éléments qui définissent le contenu de la table. Tout tableau est constitué de lignes et de cellules, qui sont spécifiées respectivement à l'aide de balises
Et
. Le tableau doit contenir au moins une cellule (exemple 12.1). Autorisé à la place du tag
utiliser la balise
. Texte dans une cellule stylisée avec une balise
, est affiché par le navigateur en caractères gras et aligné au centre de la cellule. Sinon, les différences entre les cellules créées via les balises
Et
Non.
Exemple 12.1. Création d'un tableau
Balise TABLE
Cellule 1
Cellule 2
Cellule 3
Cellule 4
L'ordre des cellules et leur apparence sont présentés sur la figure. 12.1.
Les tableaux sont l’un des éléments les plus importants, mais en même temps complexes, qui doivent être présents sur les pages Web. Avec leur aide, il est pratique de présenter des informations importantes et utiles sous une forme assez concise. Bien sûr, la plupart des éditeurs de modèles fonctionnant sur différents moteurs vous permettent d'insérer automatiquement un tableau dans une page d'un site Web ou dans une publication distincte, mais que se passe-t-il si la conception d'une ressource Web et ses pages sont créées à partir de zéro ? Ensuite, un maître novice peut être confronté à un problème : comment faire. Voyons comment créer cet élément correctement et rapidement.
Choisir un éditeur
Tout d'abord, lorsque vous commencez à créer un tableau, vous devez décider de l'éditeur dans lequel vous allez travailler. Bien entendu, le moyen le plus simple est de choisir le programme dans lequel vous créez le code principal du site. Mais il est préférable d'utiliser un bon vieux bloc-notes à ces fins.
Vous vous demandez peut-être pourquoi vous compliquer la vie, car si vous faites tout en même temps dans l'éditeur, vous pouvez voir le résultat immédiatement et vous pouvez également utiliser les astuces du programme.
Oui, c'est vrai, mais en créant une table à partir de zéro, vous pourrez non seulement étudier en profondeur le principe même de sa création, mais également éviter les fautes de frappe et les erreurs gênantes dans le code principal. Parfois, il arrive que le curseur descende accidentellement et, pendant le processus d'écriture, une erreur s'insère dans le code, parfois difficile à trouver. Après avoir créé un tableau dans le Bloc-notes, vous pouvez copier son code et le coller à l'endroit dont vous avez besoin.
Algorithme de création d'un tableau
Tout d’abord, créons un court algorithme sur la façon de créer un tableau en HTML. Ceci est nécessaire pour que vous compreniez la séquence de chaque étape. Ensuite, nous découvrirons exactement comment exécuter chacun des points.
Commençons par les étapes préparatoires.
1. Dessinez une représentation schématique du tableau sur une feuille de papier.
2. Comptez le nombre de lignes et de cellules. Si le nombre de ces derniers est différent, on le compte pour chaque ligne séparément.
3. Déterminez le nombre de cellules d'en-tête dans la ligne (par exemple, les cellules « N° », « Nom », etc.).
4. Notez les principaux paramètres du tableau - couleur, hauteur et largeur, alignement du texte - en général, tout ce qui vous semble nécessaire.
1. Insérez des balises de tableau.
2. Insérez des balises de ligne en fonction de la quantité dont vous avez besoin.
3. Dans les lignes, insérez des balises de cellule (normales et majuscules), également basées sur le numéro écrit sur votre papier.
4. Définissez les paramètres pour la table dans son ensemble.
5. Si nécessaire, définissez des indicateurs pour des cellules individuelles.
6. Remplissez nos cellules de texte.
Créer un tableau
Vous avez donc choisi un éditeur, voyons maintenant comment créer un tableau en HTML. Une balise avec laquelle un tableau est inséré dans le code de la page (
), est apparié, c'est-à-dire que notre construction commence par cette balise et se termine
.
Après avoir inséré des balises de tableau, nous passons à la création de lignes et de cellules.
Notons tout de suite que ces éléments sont également appariés. Étiqueter
spécifie les lignes, et
- cellules.
Pour les cellules d'en-tête, utilisez un élément paire
.
Comme déjà mentionné, la première chose à faire est de créer les lignes, puis d’y écrire les cellules. Afin de ne pas se tromper, nous recommandons soit de faire une ou deux lignes d'indentation entre chaque bloc, soit d'écrire un nouveau bloc d'éléments à l'aide de la touche « Tab ».
À quoi cela pourrait-il ressembler ? Comme ça:
;
;
Non.
;
Nom de famille
;
;
;
1
;
Ivanov
;
;
.
Comme vous pouvez le constater, cela n’a rien de compliqué. L'essentiel est de ne pas se tromper dans le nombre de lignes et de cellules. Sinon, le tableau pourrait devenir biaisé.
Nous avons discuté de la création d'un tableau en HTML, nous pouvons maintenant passer aux paramètres de la matrice elle-même et de ses lignes et cellules.
Options des tableaux
Lorsque le code est écrit, vous devez faire attention aux points suivants : alignement sur les bordures, l'arrière-plan, le texte, etc.
Les paramètres du tableau sont spécifiés dans la balise
. Ceux-ci inclus:
1. Bordure - largeur de la bordure. Spécifié sous forme d'entier. Par défaut, les limites de n'importe quelle table sont nulles.
2. Bordercolor - couleur de la bordure. Il peut être spécifié soit par un code couleur hexadécimal (#00008B), soit par son nom en anglais (DarkBlue). Par défaut, il est toujours gris.
3. Bgcolor - Également spécifié à l'aide d'un code ou d'un nom.
4. Aligner - alignement du texte derrière le tableau. Par défaut – aligné à gauche. Il existe les options suivantes pour ce paramètre :
gauche - circulez vers la droite ;
à droite - circuler vers la gauche ;
center - affiche le tableau au centre sans enroulement.
5. Largeur et hauteur - largeur et hauteur de la table. Peut être spécifié soit en pixels, soit en pourcentage (par rapport à la taille de la fenêtre du navigateur).
Lors de la prescription de tel ou tel indicateur, vous devez porter une attention particulière à la conception. Après avoir spécifié le paramètre, il doit y avoir un signe "égal", après quoi la valeur spécifiée est indiquée entre guillemets.
Quant à la couleur du texte, elle est conçue de la même manière qu'un texte ordinaire au format HTML.
Exemple de conception de table :
;
;
Non.
;
Nom de famille
;
;
;
1
;
Ivanov
;
;
.
Options de ligne
Nous avons donc déjà compris comment créer un tableau en HTML et spécifier ses principaux paramètres. Mais que se passe-t-il si nous devons mettre en évidence une ligne ? Doit-il être formaté différemment du texte principal du tableau ?
Les paramètres de ligne sont écrits dans la balise
exactement la même chose que les données du tableau. Les variables suivantes peuvent être définies pour une ligne :
1. Vous connaissez déjà border, bordercolor et bgcolor.
2. Aligner - alignement du texte sur une ligne. Peut prendre les valeurs gauche, centre et droite.
3. Valign - cette balise aligne le texte verticalement. Accepte les valeurs suivantes :
top - le texte est aligné sur la bordure supérieure ;
milieu - au centre;
en bas - le long de la bordure inférieure.
Exemple de format de ligne :
;
Non.
;
Nom de famille
;
.
Options de cellule
Et la dernière chose à laquelle il convient de prêter attention pour ceux qui veulent savoir comment créer un tableau en HTML sont les paramètres des cellules individuelles, à la fois normales et en majuscules. Essentiellement, tout se fait exactement de la même manière que pour une table ou une ligne. La seule chose est que deux éléments plus importants sont ajoutés :
1. Colspan - ce paramètre spécifie le nombre de colonnes que la cellule peut s'étendre.
2. Rowspan - indique le nombre de lignes occupées par cette cellule.
Puisque la conception n’est pas différente de l’écriture d’une ligne, nous ne donnerons pas d’exemple de code.
conclusions
Faire un tableau n'est pas aussi difficile qu'il y paraît à première vue. L’essentiel lors de l’écriture de son code est la persévérance et l’attention.
Quant à la façon d'insérer un tableau en HTML, il vous suffit de copier et coller son code exactement à l'endroit de votre page où vous pensez qu'il devrait être situé.
N'ayez pas peur d'expérimenter et vous maîtriserez bientôt la technique de création de tableaux à la perfection. Bonne chance!
Dans la dernière leçon, nous avons créé un fichier pour la page principale du site index.html, l'avons ouvert avec le Bloc-notes et y avons ajouté du code HTML contenant les balises HTML requises.
De plus, nous avons appris comment changer la couleur de fond de la page en changeant la valeur du paramètre bgcolor de la balise BODY.
Rappelons maintenant quelle mise en page ou quel cadre nous avons choisi pour le site, nous en parlerons dans notre cours.
Veuillez noter que la présentation du site est, en fait, tableau.
Il convient de noter ici que l’une des manières les plus courantes de mettre en page des pages HTML consiste à utiliser des tableaux.
En fait, il existe deux principaux types de mise en page pour les sites Web HTML : l'utilisation de tableaux et l'utilisation de styles CSS.
Actuellement, la mise en page utilisant les styles CSS est préférable, mais lors de la création d'un site dans un bloc-notes, il est plus facile d'utiliser une mise en page en tableau, nous nous concentrerons donc sur le tableau.
Dans la période initiale du développement d’Internet, la méthode tabulaire de mise en page était principalement utilisée. Utilisation intensive des tableaux dans la mise en page HTML pages était dû au fait qu'un tableau peut être créé avec n'importe quel nombre de colonnes et de lignes. La taille du tableau peut être modifiée très facilement à l'aide de paramètres.
Lorsqu'elle est mise en page sous forme de tableau, la page HTML est divisée en le nombre requis de cellules, chacune occupant une place bien précise sur la page. En conséquence, vous pouvez ajouter des blocs avec du contenu aux cellules du tableau souhaitées, plaçant ainsi le contenu au bon endroit.
Eh bien, continuons notre travail. Ouvrons le répertoire html et trouvons-y une description de la balise TABLE. Au tout début de la description de la balise, faites attention à la remarque selon laquelle un tableau avec une bordure invisible est largement utilisé pour la mise en page des pages Web, comme nous l'avons évoqué ci-dessus.
Ainsi, le tableau dans le code de la page Web est spécifié par la balise
, nous savons qu'un tableau est constitué de colonnes verticales et de lignes horizontales qui forment les cellules du tableau. Les lignes d'un tableau HTML sont spécifiées par la balise
, et la cellule est tag
.
Ouvrons notre fichier de page Web index.html pour le modifier à l'aide de Notepad++. Et ouvrez-le à l'aide d'un navigateur afin de visualiser les modifications sur la page.
Au tout début de cet article, nous avons évoqué le fait que l'aménagement du site que nous avons prévu est un tableau.
De plus, le tableau de mise en page de notre site sera composé de trois lignes (Heder, Contenu et Pied de page) et de deux colonnes (Menu et Contenu).
Pour ajouter un tableau avec trois lignes et deux colonnes, modifions notre code pour ajouter ce qui suit :
1 ligne 1 colonne
1 ligne 2 colonnes
2 lignes 1 colonne
2 lignes 2 colonnes
3 lignes 1 colonne
3 lignes 2 colonnes
Pour définir une bordure dans le tableau, utilisez le paramètre border. L'épaisseur de la bordure du tableau est spécifiée en pixels (px).
Ajoutons un paramètre border à notre code html, avec une valeur d'argument égale à 1px. C'est-à-dire que l'épaisseur du cadre du tableau sera égale à un pixel :
1 ligne 1 colonne
1 ligne 2 colonnes
2 lignes 1 colonne
2 lignes 2 colonnes
3 lignes 1 colonne
3 lignes 2 colonnes
Pour aligner le tableau au centre de la fenêtre du navigateur, on utilise le paramètre align, qui peut prendre trois valeurs : gauche, centre, droite. Il est clair que pour aligner le tableau au centre de la fenêtre du navigateur, la valeur du L’argument du paramètre d’alignement doit être égal à : center.
Et définissons ici la largeur du tableau. La largeur du tableau est spécifiée par le paramètre width. Les valeurs que ce paramètre peut prendre peuvent être exprimées sous forme d'entier en pixels ou en pourcentage de la largeur actuelle de la fenêtre du navigateur.
Ajoutons l'alignement et la largeur du tableau à notre code, et nous obtenons le code suivant :
1 ligne 1 colonne
1 ligne 2 colonnes
2 lignes 1 colonne
2 lignes 2 colonnes
3 lignes 1 colonne
3 lignes 2 colonnes
Nous actualisons la fenêtre du navigateur de notre page Web pour voir les changements, nous voyons que le tableau a été aligné au centre de la fenêtre et a changé de largeur.
Revenons maintenant au cadre du tableau, dans le code html nous le définissons à 1 pixel en utilisant la valeur de l'argument du paramètre border : border=”1”.
Reportez-vous aux paramètres de la balise TABLE dans l'ouvrage de référence HTML ; il y a ici deux paramètres qui affectent l'apparence du cadre.
Le premier paramètre : cellpacing – définit la distance entre les cellules du tableau.
Deuxième paramètre : cellpadding – la distance entre le cadre et le contenu de la cellule dépend de la valeur de l'argument de ce paramètre.
Pour minimiser toutes les distances et tous les retraits, nous définissons les valeurs des arguments au-dessus des paramètres ci-dessus sur zéro.
De ce fait, le code html du tableau prendra la forme suivante :
1 ligne 1 colonne
1 ligne 2 colonnes
2 lignes 1 colonne
2 lignes 2 colonnes
3 lignes 1 colonne
3 lignes 2 colonnes
Comme vous vous en souvenez, notre tableau doit avoir trois lignes, et la première ligne doit avoir une cellule, la deuxième ligne doit avoir deux cellules et la troisième ligne doit également avoir une cellule.
Si nous regardons l'apparence du tableau, nous verrons que pour amener le tableau à la forme souhaitée, il suffit de combiner les cellules horizontales de la première et de la troisième rangée.
Pour ce faire, nous utiliserons le paramètre colspan. Ce paramètre est utilisé dans la balise TD. La valeur de l'argument du paramètre colspan indique le nombre de cellules horizontales à fusionner ; dans notre cas, cette valeur est 2.
En plus d'ajouter le paramètre colspan, modifions les étiquettes dans les cellules du tableau pour qu'elles correspondent à notre disposition.
Après toutes les modifications, le code html complet de notre page sera le suivant :
Comment créer un site Web dans le bloc-notes
Entête
menu du site
Contenu
Bas de page
Sauvons notre code dans le Bloc-notes et actualisons le fichier index.html dans le navigateur pour voir les modifications.
Donc, cette leçon s'est avérée assez volumineuse, alors continuons à travailler sur le tableau html de notre page dans la leçon suivante.
