Résultat:

Les valeurs sont spécifiées en pixels (px) ou en pourcentage (%)

○ Aligner le contenu dans un tableau HTML

Pour aligner le contenu dans le tableau HTML, utilisez pour baliser attribut "Aligner" et "Valigner" :

ALIGNER- alignement horizontal du contenu du tableau.
Valeurs:

• la gauche - pousser le contenu vers la gauche (défaut);
• centre – situé au centre;
• droit - pousser le contenu vers la droite

VALIGNER- alignement vertical du contenu dans le tableau.
Valeurs:

• Haut – appuyez sur le contenu vers le haut ;
• bas – pousser le contenu vers le bas ;
• milieu – définir le contenu au milieu

Résultat:

○ Comment centrer l'alignement d'un tableau HTML

Pour aligner le tableau au centre, vous devez envelopper le tableau avec la balise

Balises supplémentaires et principales à la table

Résultat:

Nous avons donc terminé avec les tables. Vous pouvez maintenant créer vous-même une table de n'importe quelle complexité. Renforcez cette leçon. Essayez de créer n'importe quelle table vous-même.
J'ai hâte de vous voir dans la prochaine leçon. Abonnez-vous aux mises à jour de mon blog.

Post précédent
Prochain article

Chapitre 4

tableaux HTML

Les tableaux sont l'un des outils HTML les plus puissants et les plus largement utilisés. Le concept de présentation de données tabulaires n'a pas besoin d'explications supplémentaires. En HTML, les tableaux sont traditionnellement utilisés non seulement comme méthode de présentation des données, mais également comme moyen de formatage des pages Web. Voici des exemples de documents réels dans lesquels une vue tabulaire est un moyen pratique de créer un document. En figue. 4.1 montre un exemple typique d'utilisation de tableaux pour représenter des données numériques décomposées par lignes et colonnes. En figue. 4.2 l'utilisation du tableau sert uniquement à la mise en forme du document, en définissant 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, car les cadres autour de ses cellules ne sont pas dessinés.

La première version du langage HTML ne prévoyait pas de moyen particulier pour afficher des tableaux, car 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, pour laquelle la présence d'un certain nombre de lignes et de colonnes est typique, est devenue urgente. Dans un premier temps, la création de documents contenant des données alignées en colonnes a été 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

Des outils spéciaux pour créer des tableaux, cependant, n'excluent pas la possibilité d'utiliser du texte préformaté. L'utilisation de tableaux n'est pas limitée aux données constituées de lignes et de colonnes. L'une des applications est d'organiser l'agencement de diverses données sur une page, qui peut être constituée de texte brut, d'images, d'autres tableaux, etc. Ce chapitre est consacré aux règles de création de tableaux et à des exemples d'utilisation.

Riz . 4.1. Exemple de tableau HTML typique

Riz . 4.2. Exemple de tableau sans bordure

Création de tableaux HTML de base

Considérons d'abord le jeu minimum de balises et leurs paramètres, nécessaires et suffisants pour créer des tableaux simples, puis procédons à leur description détaillée.

La description des tableaux doit être située à l'intérieur de la section du document ... Un document peut contenir un nombre arbitraire de tables et les tables peuvent être imbriquées les unes dans les autres. Chaque tableau doit commencer par la balise

Chaque ligne commence par la balise (Ligne du tableau) et se termine par la balise... Une seule cellule d'une rangée est encadrée par une paire de balises et(Données du tableau) ou et(En-tête de tableau). Étiqueter est 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 l'emplacement des données dans la cellule. Contenu des cellules de type affiché en gras et centré (ALIGN = CENTER, VALIGN = MIDDLE). Cellules définies par une balise par défaut affiche 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 de fin, et peut être omis. Dans ce cas, la fin d'une description de ligne ou de cellule est le début de la ligne ou de la cellule suivante, ou la fin d'un tableau. Balise de table de fin ne peut pas être omis.

Le nombre de lignes du 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 des balises suivantes dans une rangée - , ... Si une ou plusieurs cellules à 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 des nombres différents de colonnes de même taille se trouvent sur des lignes différentes n'est pas autorisée.

Le tableau peut avoir un titre, qui est entouré de quelques balises et... La description de l'en-tête du tableau doit être située à l'intérieur des balises

Par défaut, le texte de l'en-tête 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 suffisent amplement pour construire des tables é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.

Riz. 4.Z. Un exemple du tableau le plus simple

Afficher les tableaux sur une page

Regardons le but de divers paramètres qui peuvent être utilisés dans les balises décrivant les tableaux.

En-tête de tableau

Balise d'en-tête de tableau a le seul paramètre ALIGN valide, qui peut être 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, le titre du tableau est toujours centré. Le tableau peut ne pas avoir de titre. En tant qu'en-tête de tableau, dans la plupart des cas, du texte brut est utilisé, qui est réglementé par la spécification HTML, mais en réalité, entre les balises et il est permis 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 s'affichera comme illustré à la Fig. 4.4.

Riz. 4.4. Tableau avec titre

Microsoft Internet Explorer fournit des options supplémentaires pour choisir l'emplacement du titre. Le paramètre ALIGN accepte les valeurs LEFT, CENTER et RIGHT pour l'alignement horizontal, ainsi que les valeurs décrites ci-dessus. Notez que c'est 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, ALIGN = RIGHT garantira que l'en-tête est positionné à droite et au-dessus du tableau. Si vous écrivez ALIGN = BOTTOM, alors comme dans l'exemple ci-dessus, le titre sera situé sous le tableau. Cependant, le paramètre ALIGN ne peut pas être utilisé deux fois dans le même en-tête. Par conséquent, nous avons également introduit un paramètre spécial pour l'alignement vertical - VALIGN, qui prend les valeurs TOP ou BOTTOM. Par exemple, pour une rubrique en bas d'un tableau, alignée à gauche, la description ressemble à ceci :

Titre inférieur aligné à gauche

Le tableau avec cette description du titre dans Microsoft Internet Explorer sera affiché comme suit (Fig. 4.5). Lorsqu'il est affiché dans Netscape, le titre sera placé par défaut, c'est-à-dire au-dessus du tableau et au milieu horizontalement.

Riz. 4.5. Alignement horizontal de l'en-tête du tableau par Microsoft Internet Explorer

Les fonctionnalités d'alignement horizontal des en-têtes de tableau sont une extension de la spécification HTML, ne sont pas prises en charge par le navigateur Netscape Navigator et ne doivent donc être utilisées qu'en cas d'absolue nécessité.

Paramètres de balise

La balise principale utilisée lors de la création des tableaux est la balise

paramètre BORDURE

Le paramètre BORDER contrôle le rendu d'une bordure autour de chaque cellule, qui donne essentiellement le quadrillage du tableau, et autour de l'ensemble du tableau. Par défaut, aucun cadre n'est dessiné et à l'écran, l'utilisateur ne verra que le texte régulièrement espacé des cellules du tableau. Il existe de nombreuses situations où l'utilisation de tableaux sans bordures est tout à fait justifiée, par exemple, pour des listes multi-colonnes implémentées à l'aide de tableaux, ou spécifiant la position relative exacte des images et du texte. Cependant, dans la plupart des cas, pour une utilisation traditionnelle des tableaux, il est utile de séparer ses cellules les unes des autres par des lignes de quadrillage, ce qui permet de mieux percevoir et comprendre les informations contenues dans le tableau.

Pour ajouter des cadres au tableau, vous devez inclure dans le code

Par exemple,

La valeur numérique du paramètre détermine l'épaisseur de la bordure en pixels, dessinée autour de l'ensemble du tableau, cependant, cette valeur n'affecte pas l'épaisseur des bordures autour de chaque cellule. En l'absence de valeur numérique, elle est généralement supposée être égale à la valeur minimale (1), bien que le style d'affichage des cadres puisse différer selon les navigateurs. La possibilité de contrôler indépendamment l'affichage de la bordure autour de l'ensemble du tableau et des bordures autour des cellules n'est pas disponible.

Un exemple de tableau avec une bordure de 10 pixels est illustré à la Fig. 4.6.

Riz. 4.6. Tableau avec une bordure de 10 pixels

La spécification HTML 3.0 n'incluait pas de valeur pour le paramètre BORDER. Cela n'est fait qu'en HTML 3.2. Par exemple, les versions antérieures de Microsoft Internet Explorer ne permettaient pas de spécifier une valeur numérique.

Notez qu'en l'absence du paramètre BORDER, les cadres ne sont pas dessinés, mais de l'espace est laissé pour eux (cela ne s'applique qu'à Netscape). La taille totale du tableau en l'absence ou en présence du paramètre BORDER ne change pas (l'exception est le cas de la définition de BORDER = 0). Ainsi, la distance minimale entre deux cellules adjacentes dans ces cas sera égale à deux fois l'épaisseur du cadre, soit deux pixels. Il est possible d'organiser les cellules aussi près que possible les unes des autres en définissant BORDER = 0, ce qui signifie qu'il n'y a pas de trames. Certains navigateurs peuvent ne pas prendre en charge la définition d'une valeur numérique pour le paramètre BORDER, alors une valeur égale à zéro sera ignorée et le tableau sera dessiné avec des bordures.

Voici quelques exemples:

Les trois exemples affichés seront rendus différemment par le navigateur Netscape. A noter qu'il existe ici un cas assez unique dans lequel on ne peut pas parler de valeur par défaut. Le troisième exemple, où 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, la valeur par défaut du paramètre BORDER est donc zéro pour ce navigateur.

Paramètre CELLSPACING

Forme de notation des paramètres : CELLSPACING = num, où num est la valeur numérique du paramètre en pixels, qui ne peut pas être omis. 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. Par défaut, la valeur est supposée être 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). Si vous définissez CELLSPACING = 0, les bordures des cellules adjacentes fusionneront et créeront l'impression d'une grille unique du tableau (Fig. 4.7).

Riz. 4.7. Tableau avec CELLSPACING = 0

Paramètre CELLPADDING

La notation des paramètres est similaire à CELLSPACING. La valeur num détermine la quantité d'espace libre (remplissage) entre la bordure de la cellule et les données à l'intérieur de la cellule. Par défaut, la valeur est supposée être un. La définition du paramètre CELLPADDING sur zéro peut faire en sorte que certaines parties du texte de la cellule touchent sa bordure, ce qui n'est pas très esthétique.

En figue. 4.8 montre un exemple de table avec CELLPADDING = 10.

Riz. 4.8. Tableau avec CELLPADDING = 10

Les paramètres CELLPADDING et CELLSPACING fonctionnent de manière très similaire. Pour un tableau sans bordure, changer l'un ou l'autre paramètre conduit au même résultat. Les deux paramètres affectent les marges correspondantes à la fois horizontalement et verticalement. Malheureusement, une gestion séparée des marges horizontales et verticales est faite, par exemple, pour les marges des images (les 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'eux est omis, sa valeur par défaut est prise. En particulier, si tous les paramètres ci-dessus sont omis, la distance minimale entre les données des cellules adjacentes sera de 6 pixels (pour Netscape). Cette valeur est composée 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 ce cas que les cellules seront situées à proximité les unes des autres. Un exemple d'utilisation est un tableau dont toutes les cellules contiennent des images de même taille, qui doivent être placées les unes à côté des autres.

Paramètres LARGEUR et HAUTEUR

Lorsque des tableaux sont affichés, 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, ce tableau, ses lignes et cellules individuelles, le contenu du cellules, ainsi que les paramètres définis lors de l'affichage 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. Lors de l'affichage, les tailles des tableaux sont calculées automatiquement en tenant compte de ces facteurs, tandis qu'une tentative est faite pour présenter la table sous la forme la plus pratique - pour organiser la table de manière à ce qu'elle tienne dans la fenêtre. En règle générale, le schéma général d'affichage de documents volumineux se résume au défilement linéaire du contenu du document verticalement et à la lecture du 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 les navigateurs HTML formatent automatiquement le texte (si possible) afin que les lignes ne dépassent pas la largeur de la fenêtre. Cela évite le défilement horizontal du document. Des actions similaires sont entreprises par les navigateurs avec des tableaux - si possible, formatez-les de sorte que la largeur du tableau ne dépasse pas la largeur de la fenêtre d'affichage. On peut en conclure que la largeur des tables est un paramètre plus important, primordial, dont le calcul s'effectue tout d'abord par rapport à la hauteur.

Dans la plupart des cas, le dimensionnement dynamique de la table donne une image esthétiquement proportionnelle avec une utilisation efficace de la zone réelle de la fenêtre. Cependant, il peut être nécessaire de faire respecter la largeur ou la hauteur de la table. Pour cela, les paramètres WIDTH (largeur de la table) et HEIGHT (hauteur de la table) de la balise sont utilisés

Des paramètres similaires peuvent être définis pour des cellules individuelles. Notez que spécifier une valeur spécifique pour le paramètre, par exemple WIDTH = 200, ne signifie pas que le tableau aura la largeur spécifiée dans tous les cas, mais détermine uniquement la largeur recommandée, qui sera maintenue dans la mesure du possible. Expliquons cela avec des exemples. Soit une table qui, dans les conditions données, aurait une largeur inférieure à celle spécifiée par défaut. Dans ce cas, le navigateur augmentera la largeur du tableau jusqu'à celle requise en agrandissant proportionnellement toutes les colonnes du tableau. Le fait de rétrécir la fenêtre ne changera pas la largeur du tableau et vous devrez peut-être le faire défiler horizontalement pour l'afficher. Si le tableau a une largeur par défaut supérieure à celle spécifiée, le navigateur essaiera de réduire sa largeur en réduisant d'une part la largeur des colonnes individuelles pour lesquelles la largeur spécifiée est supérieure à celle requise et, d'autre part, en brisant le texte dans des cellules séparées en plusieurs lignes en augmentant la hauteur du tableau. Ces actions peuvent ne pas fournir la taille requise du tableau, et alors il aura la plus petite largeur possible. Les mêmes actions sont effectuées pour les tables qui n'ont pas de dimensions lors du rétrécissement de la fenêtre.

Les algorithmes spécifiques pour la définition des tables pour différents navigateurs peuvent différer légèrement.

paramètre ALIGN

Le paramètre de balise donné

Donnons un exemple d'un tableau avec du texte enveloppé, dont l'affichage est illustré à la Fig. 4.9.

Les 43 noms les plus fréquemment cité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 de positionner le texte suivant le tableau à droite du tableau. Le tableau se compose d'une seule ligne, qui contient deux cellules. Chaque cellule contient une partie d'une liste non ordonnée

... L'utilisation d'un tableau pour afficher une liste est un moyen de forcer une liste en plusieurs colonnes, ce qui est également illustré dans cet exemple. Le texte situé à droite du tableau peut ne pas y tenir tout, alors qu'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 au bas du tableau. Rappelez-vous que pour interrompre de force le flux de texte le long du tableau (par exemple, si le texte suivant n'est pas logiquement lié au tableau et doit être situé en dessous), vous devez utiliser le code
avec le jeu de paramètres CLEAR. Pour cet exemple, vous devez écrire
ou
... Certains navigateurs autorisent l'écriture du 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 c'est fait dans l'exemple avant le texte pour le décaler de plusieurs lignes vers le bas) ou plusieurs codes pour le début d'un nouveau paragraphe

Mauvaise décision.

Donnons un exemple légèrement différent pour créer une telle page, dont l'affichage est illustré à la Fig. 4.10.

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 George Hermann Grégoire Dmitriy

Evgeniy Efim Ivan Igor Il y a Joseph Constantin un lion Léonide Michael Nikolaï Oleg Paul Pierre roman Sémyon Sergueï Stanislav Edouard Youri Jacob

Les données présentées ont été obtenues sur la base d'une analyse d'un échantillon représentatif contenant des informations sur 5 000 hommes de plus de 18 ans vivant à Saint-Pétersbourg. Les 43 noms les plus fréquemment cités couvrent 92 % de l'échantillon. La fréquence d'occurrence de chacun des autres noms ne dépasse pas 0,3%



Riz. 4.10. Un tableau sans bordure avec trois colonnes

Contrairement à l'exemple précédent, aucun texte ne circule autour de la table. Le document entier se compose d'un tableau avec un en-tête contenant trois cellules sur une ligne. Les deux premières cellules répètent complètement l'exemple précédent. La troisième cellule contient du texte qui commente le contenu des deux premières cellules. Ici, il n'est pas nécessaire de définir un saut de texte forcé, 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 - après la fin de la description de l'ensemble du tableau... Les deux exemples se ressemblent lorsqu'ils sont affichés en plein écran, à l'exception de l'en-tête qui, dans le premier cas, se trouve au milieu de la liste à deux colonnes et dans le second, au milieu des trois colonnes du tableau. 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.

Mise en forme des données dans un tableau

Chaque cellule individuelle d'un tableau peut être considérée comme une zone de mise en forme indépendante. Toutes les règles qui régissent l'affichage du texte peuvent être utilisées pour formater le texte dans une cellule. Presque tous les éléments HTML pouvant apparaître dans le corps du document sont autorisés à l'intérieur de la cellule. , y compris les balises qui contrôlent la mise en page du texte -

,
,

---

, codes d'en-tête - de

avant

, balises de formatage des caractères -<В>, , , , , , , les balises insèrent des images graphiques , liens hypertextes<А>Et ainsi de suite. Immédiatement, nous soulignons que la portée des balises spécifiées dans une seule cellule est limitée aux limites de cette cellule, indépendamment de la présence d'une balise de fin. Par exemple, si une couleur de texte est définie à l'intérieur d'une cellule - , alors même s'il n'y a pas de code de fin ou en le plaçant sur plusieurs cellules ou lignes du 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 paramètres 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 être GAUCHE, DROITE et CENTRE (la valeur par défaut est GAUCHE pour et CENTRE pour ). Le paramètre d'alignement vertical VALIGN peut être TOP (haut), BOTTOM (bas), MIDDLE (milieu), BASELINE (ligne de base). La valeur par défaut est MOYEN. L'alignement de la ligne de base garantit que le texte d'une seule ligne dans toutes les cellules s'ancre sur une seule ligne. Définition des options d'alignement au niveau du code détermine l'alignement de toutes les cellules de cette ligne, tandis que dans chaque cellule individuelle de la ligne ses propres paramètres peuvent être définis, annulant 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) :

Cellule 1	Cellule 2	Cellule 3
Cellule 4	Cellule 5	Cellule 6

L'affichage de cet exemple par le navigateur est illustré à la Fig. 4.11.




Riz. 4.11. Alignement des données dans les cellules du tableau

Le paramètre NOWRAP désactive la possibilité de diviser automatiquement le texte de la cellule en lignes. Peut être utilisé dans les codes , et ... L'utilisation injustifiée de ce paramètre doit être évitée car elle peut réduire considérablement la capacité de redimensionner dynamiquement les tableaux et altérer leur perception. Dans la plupart des cas, il suffit d'appliquer NOWRAP pour les cellules individuelles qui nécessitent vraiment l'interdiction de l'habillage de mots sur une nouvelle ligne. Le retour à la ligne est effectué uniquement par les séparateurs entre les mots (espaces), et dans certains cas, pour interdire la rupture du texte à certains endroits, à la place du caractère espace, définissez 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 l'unité de mesure d'une valeur donnée ; entre le nom et les initiales. Ainsi, le texte 650 km ou Eltsine B.N. il est recommandé d'écrire sous la forme 650 km et Eltsine B.N.

Les paramètres LARGEUR et HAUTEUR 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 écrits. 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 valeur WIDTH en pixels. Étant donné qu'un tableau est une structure cohérente composée de lignes et de colonnes, la définition de la largeur d'une cellule affecte la largeur de toute la colonne dans laquelle se trouve la cellule et la définition de la hauteur affecte la ligne entière. Si la valeur de largeur dans une colonne est spécifiée dans une seule cellule, alors cette valeur devient la largeur de la colonne entière. S'il existe plusieurs de ces indications, 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), définis dans les codes

les paramètres des colonnes individuelles de ce groupe sont définis. De plus, dans la balise si nécessaire, des paramètres d'alignement pourraient être spécifiés, dont les valeurs s'appliquent à toutes les colonnes du groupe donné. Valeurs de paramètre 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 pas de 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. 4.17 montre le résultat de la mise en œuvre du code ci-dessus, ainsi qu'une variante d'affichage d'un tel tableau avec l'entrée RULES = GROUPS dans la balise

ou

... Forme de notation : COLSPAN = num, où num est une valeur numérique qui détermine le nombre de colonnes pour développer horizontalement la cellule actuelle. L'utilisation du paramètre ROWSPAN est similaire, seulement ici, vous spécifiez le nombre de lignes que la cellule actuelle doit capturer verticalement. Par défaut, ces paramètres sont définis sur un. Le réglage simultané des valeurs des deux paramètres pour une cellule est possible. Définir correctement les valeurs de ces paramètres peut ne pas être une tâche très simple, d'autant plus que la plupart des éditeurs HTML vous permettent de construire visuellement avec la génération ultérieure de codes HTML uniquement les tableaux les plus simples. En figue. 4.12 montre un exemple d'affichage d'un tableau, obtenu à partir du code HTML suivant : Cellule sur deux lignes Cellule sur deux colonnes Cellule 3 Cellule 4 Cellule 5 Cellule 6 Cellule 7 Riz. 4.12. Tableau avec des cellules couvrant plusieurs lignes ou colonnes Un réglage inattentif des valeurs des paramètres de glissement des cellules peut entraîner 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 contiguës. Voici un exemple de code HTML (dont l'affichage est illustré à la figure 4.13), dans lequel les cellules étendues sont mal formées. 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 définit la couleur d'arrière-plan de l'ensemble du tableau, des lignes ou des cellules individuelles. Peut apparaître dans les balises , , 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 un code de saut de ligne , ou tout texte correspondant à la couleur d'arrière-plan de la cellule. Si les cellules contenant des données (même si elles sont invisibles) sont affichées de la même manière par tous les navigateurs, alors les cellules vides seront affichées différemment. Le navigateur Netscape n'affiche pas une cellule vide, c'est-à-dire que l'endroit où se trouve cette cellule sera peint avec la couleur d'arrière-plan de la page, et non avec la couleur d'arrière-plan de la cellule, contrairement aux cellules contenant des données. Aucune bordure n'est dessinée autour des cellules vides. Un exemple de tableau avec une cellule vide est illustré à la Fig. 4.15. Riz. 4.15. Les cellules de tableau vides sont rendues différemment par différents navigateurs Microsoft Internet Explorer affiche les deux cellules avec 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 la sortie des cellules de tableau vides en choisissant les options appropriées. La connaissance de ces fonctionnalités vous permettra de concevoir des tableaux qui s'afficheront de manière adaptée, quel que soit le navigateur choisi par l'utilisateur. Dans certains cas, il suffit pour cela de créer des cellules contenant un seul code au lieu de quelques cellules vides. Alignement des données dans les colonnes du tableau Un problème courant lors de la création de tableaux consiste à définir des options d'alignement pour des lignes ou des colonnes individuelles. Pour aligner le contenu de toutes les cellules de la ligne en cours, il suffit de définir les paramètres requis dans le code ... Cependant, le plus souvent, il est nécessaire d'assurer le même alignement pour tous les éléments d'une même colonne, car dans la plupart des cas, la colonne contient des données homogènes. Dans les versions antérieures de HTML, il était suggéré d'utiliser le paramètre COLSPEC (COLumn SPECification) pour cela, qui était spécifié dans la balise et ... Cette fonctionnalité n'est pas prise en charge par la spécification HTML, mais elle est prise en charge à la fois par Netscape et Microsoft Internet Explorer. La forme d'enregistrement est la même que pour la balise , à savoir : BGCOLOR = valeur, où la valeur est le contenu de la couleur au format RVB ou son nom. Exemple: ou . Tables gigognes Les cellules de tableau individuelles peuvent contenir presque toutes les balises de langue et les données autorisées dans une section document. En particulier, un autre tableau peut être placé à l'intérieur d'une cellule d'un tableau. De telles tables sont appelées tables imbriquées. Les règles de leur construction ne diffèrent pas de la construction des tableaux et n'ont pas besoin d'une description séparée. Notez simplement que tous les navigateurs qui prennent en charge les tableaux ne reflètent pas correctement les tableaux complexes avec plusieurs niveaux d'imbrication, il faut donc être prudent lors de leur utilisation. Voici un exemple de table utilisant un niveau d'imbrication. 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 Zelenegopsk 13.6 50 Kolpino 144.6 26 Cronstadt 45.2 48 Lomonossov 42.0 40 Pavlovsk 25.4 30 Petrodvorets 83.8 29 Pouchkine 95.1 24 Sestroretsk 34.9 35 Toutes les villes subordonnées administration Pétersbourg, ont ville directe numéros de téléphone. Villes régionales Ville H P Boksitogorsk 21.6 ALIGN = DROITE> 245 Balkhov 50.3 ALIGN = DROITE> 122 Bcevolozhsk 32.9 24 Vyborg 80.9 130 Vysotsk 1.0 ALIGN = DROITE> 159 Gatchina 80.9 46 Ivangorod 11.9 ALIGN = DROITE> 147 Kamennogorsk 5.9 157 Kingisepp 51.5 ALIGN = DROITE> 138 Kirishi 53.8 ALIGN = DROITE> 115 Kirovsk 23.8 55 Pôle Lodeynoye 27.3 ALIGN = DROITE> 244 Lyga 41.8 139 (Suite du tableau) Ville H P Libye 4.7 85 Nouveau Ladoga 11.2 ALIGN = DROITE> 141 gratifiant 22. 9 ALIGN = DROITE> 40 Pikalevo 25.1 ALIGN = DROITE> 246 Soutien 23.1 285 Primorsk 6.7 137 Priozersk 20.5 ALIGN = DROITE> 145 Svetogorsk 15.8 ALIGN = DROITE> 201 ardoises 42.6 ALIGN = DROITE> 192 Pinède 57.6 81 Tikhvine 72.0 ALIGN = DROITE> 200 Tosno 33.8 53 W liscelbypg 12.5 64 Riz. 4.14. Exemple de tables imbriquées Le résultat de l'affichage de cet exemple est illustré à la Fig. 4.14. À première vue, il semble que l'exemple n'ait pas d'imbrication de table. En fait, l'ensemble du document est un tableau sans bordure composé d'un en-tête et d'une seule ligne contenant cinq cellules. L'organisation d'un tel tableau sert uniquement à 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, suivi d'un texte aligné au milieu. Les troisième et cinquième cellules contiennent également des tableaux séparés. 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 l'indentation entre la première et la troisième, ainsi que les troisième et cinquième cellules dans lesquelles se trouvent les tableaux. C'est l'une des options possibles pour définir une telle indentation. Une autre option consiste à utiliser le paramètre CELLSPACING, qui détermine la distance entre les cellules, mais ce paramètre définit les retraits horizontaux et verticaux, ce qui n'est pas nécessaire pour le moment. De plus, une cellule vide avec la largeur spécifiée se rétrécira lorsque la fenêtre est rétrécie, par opposition à l'espace spécifié par le paramètre CELLSPACING (comme CELLPADDING). Essayez d'utiliser cet exemple pour diminuer la largeur de la fenêtre d'affichage dans le navigateur ou, ce qui conduira aux mêmes résultats, pour augmenter la taille de la police utilisée pour afficher le texte. La distance entre les tables sera réduite à zéro, permettant de voir toutes les informations en même temps aussi longtemps que possible, cependant, d'autres modifications n'endommageront pas la table, mais offriront la possibilité de faire défiler horizontalement. Selon un schéma similaire, vous pouvez organiser le placement des informations, constituées non seulement de tableaux, mais également d'images, de fragments de texte, etc. Caractéristiques des tables de construction Cette section traite de certaines des capacités spécifiques des navigateurs individuels, ainsi que de certaines subtilités de la construction et de l'affichage des tableaux. Affichage des cellules vides dans les tableaux Une des particularités de la présentation des tableaux par différents navigateurs est l'affichage des cellules vides. Selon la description de la langue, tous les navigateurs doivent remplir les lignes avec des cellules vides si dans une ligne leur nombre est inférieur à celui du reste des lignes. De plus, les cellules qui ne contiennent pas de données peuvent être trouvées n'importe où dans le tableau. Il existe une distinction 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 et déterminé l'alignement et la largeur de chaque colonne du tableau. Par exemple, le réglage 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 la 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. En conséquence, 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, si nécessaire. Microsoft Internet Explorer fournit des balises spéciales - et ... Ces balises doivent apparaître immédiatement après la description. avant la première occurrence de la balise . Paramètres de balise et il peut y avoir 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 le paramètre ALIGN sont LEFT, RIGHT et CENTER. La valeur par défaut du paramètre SPAN est 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 le paramètre VALIGN sont MIDDLE, TOP et BOTTOM. Différence entre les balises et réside dans le fait que le premier d'entre eux, en plus de définir les paramètres d'alignement des données pour les colonnes, fusionne également de manière conditionnelle plusieurs colonnes dans un groupe. L'effet de cette combinaison est affiché lors de l'utilisation du paramètre RULES, qui est décrit ci-dessous. Par défaut, toutes les colonnes d'un tableau sont considérées comme un seul groupe. Étiqueter ne doit être utilisé que pour définir l'alignement des données dans les colonnes individuelles d'un groupe. Donnons un exemple. Supposons que vous vouliez créer un tableau contenant 6 colonnes, avec les données des trois premières alignées à droite et les trois suivantes au milieu. Pour résoudre ce problème, vous devez écrire le morceau de code HTML suivant : (données pour le tableau) Le résultat de l'affichage de ce code est illustré à la Fig. 4.16. Riz. 4.16. Tableau avec différentes options d'alignement pour les données dans des groupes de cellules Un autre exemple. Supposons que dans le tableau précédent, les deux premières colonnes doivent être alignées à droite et la troisième au milieu, et que les trois colonnes doivent être regroupées. Les trois colonnes suivantes doivent également être regroupées et avoir le même alignement que le premier groupe. Pour résoudre ce problème, vous devez écrire le morceau de code HTML suivant : (données pour le tableau) Dans cet exemple, après la balise

, à partir de laquelle vous pouvez voir le sens du regroupement.

Conseil

Étant donné que la portée des balises

et est limité au seul navigateur Microsoft Internet Explorer, vous devez les utiliser avec prudence. La facilité d'utilisation de 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, si nécessaire, ce qui augmente considérablement la taille du code source du tableau, mais permet la visualisation dans n'importe quel navigateur.




Riz. 4.17. Table de colonnes groupées

Définir la couleur des bordures du tableau

Quelques autres options, spécifiques uniquement à Microsoft Internet Explorer, vous permettent de sélectionner la couleur des bordures du tableau - BORDERCOLOR, BORDERCOLORLIGHT et BORDERCOLORDARK. Ces paramètres peuvent être définis dans des balises

, ... Le nom de la couleur ou sa valeur hexadécimale peut être utilisé comme valeur pour ces paramètres. Le paramètre BORDERCOLOR détermine la couleur de tous les éléments de bordure de table et les deux autres paramètres spécifient la couleur des bordures constitutives individuelles, 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 définit les couleurs des bords opposés. En raison de la combinaison de l'action de ces paramètres, le tableau semblera quelque peu surélevé au-dessus de la surface de la page ou approfondi. Tout dépend de la combinaison de couleurs choisie.

Noter

Le navigateur Netscape 4.x prend également en charge le paramètre BORDERCOLOR.

Définir l'image d'arrière-plan d'un tableau

Microsoft Internet Explorer (et Netscape 4.x) permet au paramètre BACKGROUND de définir l'image d'arrière-plan d'un tableau de la même manière qu'un document HTML entier peut le faire. Ce paramètre peut être défini dans les balises

,	et

, , w

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 rendu 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 dernière ligne. Ces balises ne peuvent apparaître dans la description des tableaux qu'au sein d'une paire de balises

et	. Balises de structuration de tableau

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 peuvent apparaître au plus une fois dans le tableau. La balise de fin pour ceux-ci peut être omise. L'utilisation de ces balises est utile lors de la création de grands tableaux qui s'étendent au-delà d'une page.

Étiqueter peut être trouvé plusieurs fois dans la description du tableau, tandis que l'utilisation de la balise de fin est requise... Cette balise effectue un regroupement logique de données de la même manière que la balise regroupement de colonnes contiguës.

Avec l'utilisation de nouvelles balises, il devient possible de contrôler de manière plus flexible les bordures et les lignes de la grille du tableau.

Le contrôle du dessin des cadres autour de la table est effectué par le paramètre FRAME de la balise

et le quadrillage du tableau avec le paramètre RULES. Par exemple, il devient possible de ne dessiner que des lignes verticales entre les colonnes et au lieu d'une bordure autour de l'ensemble du tableau, 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 tiré des quatre côtés
• DESSUS - uniquement par le dessus
• AU DESSOUS DE - uniquement sur la face inférieure
• HIDE - les côtés inférieur et supérieur sont dessinés
• VIDES - les côtés gauche et droit sont dessinés
• LHS - uniquement sur le côté gauche
• RHS - uniquement sur le côté droit
• ANNULER - table sans cadres extérieurs

Le paramètre RULES contrôle le tracé des lignes de la grille interne du tableau et peut prendre les valeurs suivantes :

• TOUS - toutes les lignes internes sont tracées
• GROUPES - seules des lignes sont tracées séparant les groupes
• LIGNES - des lignes sont tracées séparant les lignes
• COLS - des lignes sont tracées séparant les colonnes
• RIEN - les lignes internes ne sont pas tracées

Exemple:

.

Noter

Le tracé du quadrillage du tableau et des cadres ne sera effectué que si le paramètre BORDER de la balise est présent

... Si ce paramètre est absent ou si sa valeur est nulle, les lignes de quadrillage 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 à l'aide des fonctionnalités décrites :

Un exemple de contrôle de ligne flexible
tableau en grille

En-tête de colonne 1	En-tête de colonne 2	En-tête de 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
Résultat	Résultat	Résultat




Riz. 4.18. Dessin flexible des lignes de la grille du tableau à l'aide du navigateur Microsoft Internet Explorer

Dans cet exemple, dont l'affichage est représenté par le navigateur sur la Fig. 4.18, l'une des options possibles pour contrôler le quadrillage et les bordures autour de la table est affichée. Une bordure de 5 pixels est dessinée autour de la table (BORDER = S) uniquement en haut et en bas (FRAME = HSIDES). Le quadrillage est tracé à l'intérieur du tableau pour séparer les groupes de données (RULES = GROUPS). Les groupes de données sont définis, d'une part, par la présence de trois balises , dont chacun déclare une colonne de table séparée grouper. Deuxièmement, les balises , et<тгоот>divisez également les données du tableau en groupes, ce qui détermine le tracé des lignes horizontales internes.

Définir le nombre de colonnes d'un tableau

Microsoft Internet Explorer (ainsi que le navigateur Netscape 4.x) vous permet de spécifier dans la balise

le paramètre COLS dont la valeur détermine le nombre de colonnes de la table. L'écriture de ce paramètre permet d'accélérer la mise en page du tableau lorsqu'il est affiché dans un navigateur, puisqu'il devient possible de déterminer le nombre de colonnes avant la fin du chargement du code de description du tableau. Pour le moment, l'activation de ce paramètre n'affecte en rien la progression du chargement du document.

Alignement vertical des tables

Dernier paramètre de balise

spécifique uniquement à Microsoft Internet Explorer, c'est VALIGN, qui détermine l'alignement vertical du tableau par rapport au texte. Son action est similaire à celle des images.

Noter

Notez que l'utilisation d'un même paramètre peut différer considérablement à la fois dans l'objectif et dans les valeurs possibles pour différentes balises, même pour le même navigateur et dans le cadre de la spécification du langage. Il est donc impossible de dresser un tableau récapitulatif sur l'utilisation de divers paramètres en dehors du cadre de leur application. Par exemple, le paramètre ALIGN n'est utilisé dans les tableaux que 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, aligné respectivement sur le bord gauche ou droit ;

pour l'étiquette

, ... Cette paire signifie que nous avons créé une ligne dans la table, et combien de telles balises seront écrites, autant de lignes seront.



Eh bien, à l'intérieur

nous posons maintenant une autre paire - ... Cette paire signifie que nous avons créé une colonne dans cette ligne, et si plusieurs td sont écrits dans chaque tr, alors cette ligne aura plusieurs colonnes. Dégager? Si ce n'est pas le cas, regardons un exemple de la façon dont tout fonctionne ici... Disons que je veux créer un tableau des élèves et des notes. Ensuite, nous écrivons ce qui suit à l'intérieur de la balise :

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 au-dessous du tableau ;

pour les balises

et	le paramètre ALIGN prend les valeurs GAUCHE, DROITE ou CENTRE, et signifie aligner horizontalement le contenu de la ou des cellules correspondantes du tableau. Alternative à la vue tabulaire La prise en charge des tableaux est devenue une caractéristique courante des navigateurs Web, il y a donc peu ou pas de raison d'éviter de les utiliser. Néanmoins, nous considérerons des options possibles pour des représentations de données alternatives 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 : Utilisation de texte préformaté. Cette technique était traditionnellement utilisée dans les premières versions de HTML, lorsque la prise en charge des tableaux n'était pas encore disponible. Son utilisation n'a pas perdu de sa pertinence à ce jour, car ces textes seront affichés correctement par tous les navigateurs, y compris ceux purement textuels. Utilisation d'une image contenant un tableau. Le tableau peut être créé avec n'importe quel éditeur de texte ou même affiché par 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é de personnaliser dynamiquement l'affichage des tableaux. De plus, il devient nécessaire de stocker un fichier supplémentaire avec une image dont la taille par ailleurs sera généralement bien 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 à des 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 se contenter d'un des types de listes disponibles en HTML. Préparation des tableaux N'importe quel éditeur peut être utilisé pour préparer des tableaux HTML, dont la plupart ont des outils pour créer des tableaux visuellement. 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. La création d'un tableau consiste à remplir les champs appropriés dans la fenêtre. Après avoir déterminé le nombre de lignes et de colonnes du tableau, vous pouvez procéder au remplissage direct des cellules individuelles du tableau, qui s'afficheront dans la même boîte de dialogue. La boîte de dialogue a un bouton Aperçu, un clic 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é Après avoir terminé la préparation des données pour le tableau, cliquez sur le bouton OK. Ensuite, le code de description du tableau généré sera inséré dans le document HTML édité. Pour l'exemple illustré à la Fig. 4.19, le code suivant sera généré : (partie du code omise) Chef de table Colonne 1 Colonne 2 Colonne 3 Colonne 4 1 2 3 4 De même, ce problème est résolu à l'aide du composant Netscape Composer du programme Netscape Communicator. En figue. 4.21 affiche une boîte de dialogue dans laquelle vous devez remplir les champs requis. Pour saisir des paramètres de balise supplémentaires Un bouton HTML supplémentaire est fourni. Après avoir rempli les champs de la boîte de dialogue, vous devez cliquer 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 pour la spécification des options de table Netscape Composer Riz. 4.22. Position initiale du curseur de saisie dans un tableau vide est le corps du tableau. Le corps est composé de lignes et de colonnes. Le tableau est rempli ligne par ligne. Chaque balise crée une nouvelle ligne. Plus loin dans imbriqué utilisé pour contenir l'en-tête du groupe dans le tableau ("en-tête du tableau", ne pas confondre avec les en-têtes). Étiqueter utilisé pour contenir le "footer" du tableau (footer). Étiqueter utilisé pour contenir le "corps" de la table (body). Élément ne doit être utilisé qu'une seule fois dans un tableau dans le contexte suivant : en tant que partie d'un élément des colonnes sont créées. Plusieurs colonnes peuvent être créées. Dans ce cas, vous devez garder une trace du nombre de colonnes dans chaque ligne. Par exemple, si la première ligne avait 5 colonnes, les lignes suivantes devraient également avoir 5 colonnes. Sinon, la table flottera. Il est possible de combiner des cellules. Comment faire un tableau en html Donnons un exemple, code html : Exemple de tableau Colonne 1 Colonne 2 Faites attention à la cellule ... Nous utilisons l'attribut spécial colspan pour combiner les cellules horizontalement. Sa valeur numérique indique le nombre de colonnes à combiner. Il existe également un analogue de cet attribut : tag (en-tête du tableau), où vous devez également écrire colspan. Le résultat sera le même. Mais le td habituel est souvent utilisé. Examinons maintenant de plus près tous les attributs de la balise. . Attributs et propriétés des balises À la balise d'ouverture vous pouvez écrire divers attributs. 1. Propriété align = "paramètre" - définit l'alignement du tableau. Il peut prendre les valeurs suivantes : Dans l'exemple ci-dessus, nous avons aligné le tableau au centre align = "center". Cet attribut peut être appliqué non seulement à un tableau, mais également à des cellules de tableau individuelles. ... Ainsi, l'alignement sera différent dans différentes cellules. Par exemple , , , ou cols - la ligne est affichée entre les colonnes aucun - toutes les frontières sont cachées rows - la bordure est tracée entre les lignes du tableau créées via la balise 12. Propriété largeur = "nombre" - définit la largeur du tableau : soit en pixels, soit en pourcentage. 13. Classe de propriété = "class_name" - vous pouvez spécifier le nom de la classe à laquelle appartient la table. 14. Property style = "styles" - les styles peuvent être définis individuellement pour chaque table. Il est maintenant temps de plonger dans le tableau et d'examiner les attributs des cellules du tableau. Ces attributs doivent être écrits dans la balise d'ouverture. et les mêmes options sont disponibles que pour sera appliqué hiérarchiquement à tous et non à l'intérieur de l'élément : ou des cordes ... ... ... 2. Property background = "URL" - définit l'image d'arrière-plan. Au lieu de l'URL, l'adresse de l'image de fond doit être écrite. Exemple Exemple de tableau Colonne 1 Colonne 2 Converti sur la page en ce qui suit : Dans l'exemple ci-dessus, notre image d'arrière-plan se trouve dans le dossier img (qui se trouve dans le même répertoire que la page html), et l'image s'appelle fon.gif. Notez que dans la balise nous avons ajouté style = "color: white;" ... Comme l'arrière-plan est presque noir, afin que le texte ne se confond pas avec l'arrière-plan, nous avons rendu le texte blanc. 3. Propriété bgcolor = "color" - définit la couleur d'arrière-plan du tableau. En tant que couleur, vous pouvez choisir n'importe laquelle de la palette entière (voir codes et noms des couleurs html) 4. Bordure de propriété = "nombre" - définit l'épaisseur de la bordure du tableau. Dans les exemples précédents, nous avons spécifié border = "1", ce qui signifie que la largeur de la bordure est de 1 pixel. 5. Propriété bordercolor = "color" - définit la couleur de la bordure. Si border = "0", alors il n'y aura pas de bordure et la couleur de la bordure n'aura pas de sens. 6. Propriété cellpadding = "nombre" - retrait du cadre au contenu de la cellule en pixels. 7. Propriété cellspacing = "number" - la distance entre les cellules en pixels. 8. Propriété cols = "nombre" - le nombre de colonnes. Si vous ne le spécifiez pas, le navigateur déterminera lui-même le nombre de colonnes. La seule différence est que la spécification de ce paramètre est susceptible d'accélérer le chargement de la table. 9. Propriété frame = "paramètre" - comment afficher les bordures autour du tableau. Il peut prendre les valeurs suivantes : vide - ne dessinez pas de frontières border - la bordure autour de la table ci-dessus - bordure en haut du tableau ci-dessous - bordure en bas du tableau hsides - ajouter uniquement des bordures horizontales (haut et bas du tableau) vsides - ne dessinez que des bordures verticales (gauche et droite du tableau) rhs - bordure sur le côté droit de la table uniquement lhs - bordure uniquement sur le côté gauche de la table 10. Propriété height = "nombre" - définit la hauteur du tableau : soit en pixels, soit en pourcentage. 11. Règles de propriété = "paramètre" - où afficher les bordures entre les cellules. Il peut prendre les valeurs suivantes : all - une ligne est tracée autour de chaque cellule du tableau groupes - la ligne est affichée entre les groupes qui sont formés par des balises . Attributs et propriétés 1. Propriété align = "paramètre" - définit l'alignement d'une cellule individuelle dans le tableau. Il peut prendre les valeurs suivantes : gauche - alignement à gauche centre - alignement du centre droite - alignement à droite 2. Property background = "URL" - définit l'image d'arrière-plan de la cellule. Au lieu de l'URL, l'adresse de l'image de fond doit être écrite. 3. Propriété bgcolor = "color" - définit la couleur d'arrière-plan de la cellule. 4. Propriété bordercolor = "color" - définit la couleur de la bordure de la cellule. 5. Propriété char = "lettre" - définit la lettre à partir de laquelle l'alignement doit être effectué. La valeur de l'attribut align doit être définie sur char. 6. Propriété colspan = "number" - définit le nombre de cellules horizontales à combiner. 7. Propriété hauteur = "nombre" - définit la hauteur du tableau : soit en pixels, soit en pourcentage%. 8. Propriété largeur = "nombre" - définit la largeur du tableau : soit en pixels, soit en pourcentage%. 9. Propriété rowspan = "number" - définit le nombre de cellules verticales fusionnées. 10. Propriété valign = "paramètre" - alignement vertical du contenu de la cellule. top - aligne le contenu de la cellule en haut de la ligne milieu - alignement moyen bas - aligner vers le bas ligne de base - alignement de la ligne de base Note 1 Pour l'étiquette ... Paramètres pour une balise à l'intérieur Comment empêcher les cellules d'un tableau de coller les unes aux autres Dans le cas de l'utilisation d'une bordure (bordure de cellules) et d'un remplissage nul entre les cellules, elles sont toujours collées ensemble et vous obtenez une double bordure. Pour éviter cela, vous devez enregistrer le border-collapse: collapse table dans la feuille de style : ... Cher lecteur, vous en savez maintenant beaucoup plus sur la balise html table. Maintenant, je vous conseille de passer à la leçon suivante. . Chaque ligne du tableau est placée dans un élément ... . La cellule d'en-tête du tableau est placée dans l'élément (Ceci affiche le contenu en gras et centré). Chaque cellule des données du tableau est placée dans un élément . Le nom de la table, si nécessaire, est placé à l'intérieur de l'élément (élément de tableau facultatif). J'attire votre attention sur le fait que si vous envisagez d'utiliser cet élément dans votre tableau, il doit alors suivre dans le document immédiatement après l'élément ... ... ... .. . Passons à la partie pratique de la création de la feuille de calcul : bordure = "1"> Table élémentaire Cellule d'en-tête 1 Cellule d'en-tête 2 Cellule d'en-tête 3 Cellule de données 1 Ligne 2 Cellule de données 2 Ligne 2 Cellule de données 3 Ligne 2 Cellule de données 1 Ligne 3 Cellule de données 2 Ligne 3 Cellule de données 3 Ligne 3 Pour plus de clarté, nous avons ajouté un attribut de bordure à ce tableau avec une valeur de "1", qui spécifie que la bordure doit être affichée autour des cellules du tableau. L'attribut border n'est quasiment jamais utilisé en HTML, dans ce cas l'utilisation de CSS serait préférable et apporterait plus de flexibilité. Dans le cadre de l'étude du HTML, nous apprendrons à former des tableaux grammaticalement, et lors de l'étude CSS 3 dans l'article "" nous allons apprendre à les styliser professionnellement. Le résultat de notre exemple : Concaténer des colonnes Concaténer des colonnes dans des éléments (cellule de données) ou (cellule d'en-tête) peut être effectuée à l'aide de l'attribut colspan (la cellule est étirée vers la droite du nombre de cellules spécifié). bordure = "1"> Table élémentaire Cellule d'en-tête 1 Cellule d'en-tête 2 Cellule de données 1 Ligne 2 Cellule de données 2 Ligne 2 Cellule de données 3 Ligne 2 Cellule de données 1 Ligne 3 Cellule de données 2 Ligne 3 Cellule de données 3 Ligne 3 Le résultat de notre exemple : Chaînes de concaténation Concaténer des chaînes dans des éléments ou autorisé à l'aide de l'attribut rowspan (la plage de cellules va de haut en bas et s'étend sur plusieurs lignes - la cellule est étirée vers le bas). bordure = "1"> Table élémentaire Cellule d'en-tête 1 Cellule d'en-tête 2 étendue de lignes = "2"> Cellule de données 1 Ligne 2 Cellule de données 2 Ligne 2 Cellule de données 2 Ligne 3 Cellule de données 2 Ligne 3 Cellule de données 3 Ligne 3 Le résultat de notre exemple : Propriétés de la colonne Exemple d'utilisation de l'attribut span sur des colonnes individuelles d'une table : span = "2" style = "background-color: kaki"> Numéro d'application Service prix, frotter. Le total 31337 Lecture à l'oreille 1 000 1 000 Le résultat de notre exemple : Si vous devez styliser une seule colonne, il suffit de spécifier l'attribut span à l'intérieur de l'élément Numéro d'application Service prix, frotter. Commission, frottez. 31337 Lecture à l'oreille 1 000 150 Le résultat de notre exemple : Diviser une table en plusieurs parties Les balises HTML suivantes sont utilisées pour diviser le tableau en plusieurs parties : Étiqueter (en tant qu'élément enfant (imbriqué)), si étiqueté (définit un groupe de colonnes dans un tableau) doit suivre après ces éléments, mais avant que n'importe quelle balise , et ... De plus, l'élément doit avoir une ou plusieurs balises à l'intérieur (conteneur pour la création de chaînes). Les éléments , et n'affectent pas la disposition par défaut du tableau. Cependant, en utilisant CSS, vous pouvez styliser ces éléments comme bon vous semble. (nom de la table) et style = "couleur de fond : argent"> style = "couleur de fond : corail"> style = "couleur de fond : kaki"> Service Prix Somme 3 000 Lecture à l'oreille 1 000 Jeu de poinçon 2 000 Le résultat de notre exemple. Bonne journée à tous, mes chers amis. Comment se passe l'été ? J'espère que tout le monde va bien. Eh bien, aujourd'hui, nous allons continuer à apprendre les bases du html et aujourd'hui sera probablement la dernière leçon sur ce sujet, car nous plongerons ensuite dans CSS. Donc, en parlant de html, je ne peux m'empêcher de parler de tableaux, car ils sont aussi un sujet assez important. Prenez au moins le même WordPress. Par défaut, ce moteur ne peut pas créer de table. Vous avez besoin d'un module complémentaire spécial (plugin) ou d'un code de programme spécial (script). Mais on peut juste faire ce qu'on veut avec de simples tags. En général, aujourd'hui, je vais vous expliquer comment créer un tableau en html, car cela peut vraiment vous aider beaucoup. Je me souviens comment j'ai réalisé mes premiers sites en utilisant un format de table, c'est-à-dire l'en-tête, les barres latérales, le pied de page et le bloc de contenu n'étaient que des éléments de tableau. J'en ai parlé dans mon article sur. Certes, aujourd'hui, il n'est plus d'usage de créer des sites à l'aide de tableaux, mais cela ne signifie pas qu'ils ne sont pas nécessaires. C'est plutôt le contraire qui est vrai. Ce qui est aussi génial, c'est que vous n'avez même pas besoin de dessiner quoi que ce soit. Tout se fait dans un bloc-note ordinaire (enfin, ou autre, comme le Bloc-notes++), et assez facilement. En général, préparons-nous pour le travail. Mots clés Le balisage ici est un peu plus compliqué que dans d'autres balises, mais tout est facile à retenir. Alors nous regardons et ne nous laissons pas distraire. Toute table est toujours entourée d'une balise de paire ... Celles. ces signes donnent la commande que la table sera située ici. Une balise appariée est placée à l'intérieur de la table

	Mathématiques	langue russe	Histoire
Medvedev	3	5	5
Smirnov	5	5	5
Sokolov	3	2	3

Qu'avons-nous fait ici ? Et nous avons fait quatre lignes (tr), dont chacune contient quatre tableaux (td). Dans le premier bloc tr, nous avons écrit le nom des disciplines académiques, en laissant la première colonne vide pour ne pas violer le tableau.

Plus loin dans chaque première paire td nous insérons les noms des étudiants, et tout le monde td remplissez les notes dans la cellule appropriée. En général, écrivez ceci et enregistrez le fichier, puis ouvrez-le dans un navigateur, vous comprendrez alors vous-même comment cela se produit.



Mais en entrant dans le document, on voit que le tableau n'est pas tout à fait similaire à ce que nous avions prévu. Et qu'est-ce qui manque ici ? C'est vrai - les frontières. Mais ne vous inquiétez pas. Je vous en parle ci-dessous.

Mais par souci de décence, je vais vous montrer une autre balise qui met en évidence et centre les données dans les tableaux. Cette balise est écrite comme ... Soulignons nos rubriques dans le tableau. Pour cela, il suffit de remplacer les balises td, au e dans les endroits où nous écrivons les noms et les titres des disciplines.



Et voyons ce que nous obtenons grâce à cela. Comme je l'ai dit, ces noms sont maintenant centrés et mis en évidence. C'est ce que nous voulions.



En général, nous avons en quelque sorte compris les balises. Bien qu'il y en ait d'autres (vous pouvez regarder le htmlbook), mais je ne m'y attarderai pas.

Les attributs

Naturellement, une chose telle que les tableaux ne peut pas se passer d'attributs spéciaux, et je vais vous en montrer quelques-uns.

Frontière

Bon, j'aimerais commencer par ce que j'ai dit plus haut, puis sur les frontières. Par défaut, ils ne sont pas là, donc le tableau est peu attrayant et pas tout à fait compréhensible. Mais cela peut être corrigé, et l'attribut border nous y aidera, qui est placé directement dans la balise d'ouverture.

... Faites comme je vous ai montré dans l'exemple ci-dessous, c'est-à-dire définissez la valeur de l'attribut border = "1".



Après avoir fait cela, enregistrez le résultat et exécutez le document. Bien? C'est une tout autre affaire. La table a maintenant retrouvé sa forme normale et ressemble à ce qu'elle devrait. Vous pouvez expérimenter différentes valeurs de bordure et voir ce qui vous convient le mieux.



Remplissage et espacement (cellpadding et cellspacing)

Il est tout à fait naturel qu'un seul présentoir de table pour toutes les occasions ne convienne pas à tout le monde. Mais nous pouvons changer cela un peu, grâce à deux attributs similaires.

Cellpadding = "" - modifie la distance entre le cadre lui-même et le contenu de la cellule. Ainsi, toutes les cellules du tableau deviennent plus grandes. Écrivons cet attribut dans le tableau et définissons la valeur sur 5, et voyons comment il différera de la version originale.

Sauter. Voir? La distance a augmenté. de cette façon, vous pouvez remplacer vous-même les valeurs souhaitées, agrandissant ainsi les cellules.

Cellspacing = "" - modifie la distance entre les cellules du tableau et ses valeurs sont également mesurées en pixels. Essayons également de mettre cet attribut avec une valeur de 5 et voyons ce qui se passe.



Bien? L'essence est-elle claire ? Comme vous pouvez le voir, l'espacement entre les cellules est devenu plus large. C'est exactement ce pour quoi nous nous battons.



Aligner

Eh bien, où en sommes-nous sans ce merveilleux attribut qui nous permet de tout aligner à différents endroits ? Align fonctionne de la même manière qu'avec les autres balises que nous avons vues précédemment et a trois significations :

• Centre
• Droit

Écrivons chacune des valeurs et voyons comment le tableau sera distribué.



Bien? Tout semble fonctionner et je pense que cela devrait être clair. Mais si vous avez des questions, n'hésitez pas.



Eh bien, c'est essentiellement tout ce que je voulais vous dire sur les tables aujourd'hui. J'espère que tout a été clair pour vous. Eh bien, si vous voulez étudier en détail toutes les subtilités du travail avec HTML et CSS et apprendre à créer vous-même des sites, je vous recommande fortement de regarder superbe cours vidéo sur ce sujet. Pour un débutant, c'est le cours vidéo le plus compréhensible, comme pour moi, dans lequel ils vont simplement tout mâcher et le mettre sur les étagères.

Eh bien, je termine ma leçon pour aujourd'hui. N'oubliez pas de vous abonner aux mises à jour de mon blog afin de ne manquer aucune information ou actualité importante. Et on se verra dans d'autres articles. Bonne chance et au revoir!

Meilleures salutations, Dmitri Kostin.