Quelle balise définit la ligne du tableau. Attributs et propriétés des balises

Devenus populaires, les concepteurs de sites Web ont principalement utilisé la méthode disposition du tableau et obtenu de très bons résultats.

Balises utilisées pour construire un tableau en html

tableau- balise obligatoire qui ouvre et ferme le tableau
légende- une balise facultative désignant le titre du tableau
e- une balise optionnelle, dans les balises d'ouverture et de fermeture de laquelle est inscrit le nom de la colonne. Généralement mis en évidence en gras
tr- une balise obligatoire à partir de laquelle la ligne s'ouvre et se ferme
td- une balise obligatoire indiquant l'ouverture et la fermeture d'une cellule d'affilée

Exemple de code pour une table simple

tableau HTML

Nom de la table
Colonne 1	Colonne 2
Le texte dans la première cellule	Le texte dans la deuxième cellule

Le navigateur affichera

But des tableaux en html

La leçon sur tableur est très importante ! Grâce aux tableaux, vous pouvez organiser non seulement du texte, mais aussi des images, des liens et bien plus encore. Dans le tableau, vous pouvez définir Contexte(ou sa couleur), retrait, largeur, frontière et autres paramètresça lui fera une belle apparence... Tableau - Votre premier pas vers la compréhension création de sites web! Auparavant, de nombreux sites étaient entièrement présentés sous forme de tableaux, c'est-à-dire que tout ce que l'utilisateur voyait (menu latéral, menu supérieur, contenu) était le contenu des cellules d'un grand tableau.
Sur ce, passons directement aux attributs qui embellissent la table...

Propriétés et paramètres des tableaux html : retrait, largeur, couleur de fond, bordure (cadre)

Ont étiquette de tableau il y a les attributs suivants :

largeur- la largeur de la table. peut être en pixels ou en % de la largeur de l'écran.
bgcolor- couleur de fond des cellules du tableau
Contexte- remplit le fond du tableau avec une image
frontière- cadre et bordures dans le tableau. L'épaisseur est spécifiée en pixels.
rembourrage cellulaire- remplissage en pixels entre le contenu de la cellule et sa bordure intérieure
Comme précédemment, écrivez la valeur de l'attribut entre guillemets.

Considérons l'application de ces attributs par exemple. Pour cela, créez une table (mais déjà sans la légende et les balises extrêmement rarement utilisées) et définissez le paramètre sur l'attribut frontière (frontière), largeur (largeur du tableau, de la ligne ou de la cellule) et bgcolor (couleur de la cellule)

tableau HTML

En conséquence, le navigateur affichera un tableau de la forme suivante

Cadre- attribut désignant une bordure autour du tableau. Il y a les valeurs suivantes :

Vide - pas de cadre,
ci-dessus - seulement le cadre supérieur,
ci-dessous - uniquement le cadre inférieur,
hsides - cadres supérieur et inférieur uniquement,
vsides - uniquement les cadres gauche et droit,
lhs - bordure gauche uniquement,
rhs - bordure droite uniquement,
boîte - les quatre parties de la boîte.

des règles- un attribut désignant les bordures au sein d'un tableau, entre les cellules. Il y a les valeurs suivantes :

Aucun - il n'y a pas de frontières entre les cellules,
groups - frontières uniquement entre les groupes de lignes et les groupes de colonnes (sera discuté un peu plus tard),
lignes - bordures uniquement entre les lignes,
cols - bordures uniquement entre les colonnes,
all - affiche toutes les bordures.

Considérez l'exemple de code

tableau HTML

Colonne 1	Colonne 2

Résultat

Essayons maintenant de créer une belle table. Pour ce faire, commençons à utiliser alignement dans le tableau... Pour cela, il existe les paramètres déjà familiers suivants :

aligner- alignement des tableaux. Il peut être positionné à gauche (gauche), à droite (droite), au centre (centre)
espacement des cellules- distance entre les cellules du tableau. Spécifié en pixels (0 pixel par défaut)
rembourrage cellulaire- remplissage en pixels entre le contenu de la cellule et sa bordure intérieure (par défaut 0 pixel)
Prenons un exemple

tableau HTML

Colonne 1	Colonne 2
Le texte dans la première cellule de la première colonne	Texte dans la deuxième cellule de la deuxième colonne

Le navigateur affiche un tableau centré qui ressemble à ceci

Chaînes Tr et cellules td dans les tableaux HTML

Permettez-moi de vous rappeler à nouveau que les tableaux sont formés ligne par ligne (tr). Les lignes (tr) contiennent déjà des cellules (td). Si vous définissez un paramètre pour une chaîne (tr), alors il sera valide pour toutes les cellules(td) dans cette ligne, si pour une cellule spécifique, alors seulement pour elle. Dans les exemples ci-dessus, j'ai spécifié la couleur de la ligne, ce paramètre a été distribué en conséquence pour toutes les cellules.

Pour les balises tr et td, il existe les éléments suivants

aligner- alignement du texte dans la cellule. Gauche, Droite, Centre
valigner- alignement vertical du texte à l'intérieur de la cellule. Haut (haut), bas (bas), centre (milieu)
bgcolor- définit la couleur de la ligne
largeur- la largeur de la colonne (toutes les cellules ci-dessous accepteront ce paramètre) est spécifiée en pixels ou en pourcentage, où 100 % est la largeur de l'ensemble du tableau
la taille- hauteur de cellule (toutes les cellules de la ligne accepteront ce paramètre)

Considérons un code où le contenu des cellules (td) est aligné sur différents bords : dans le premier à gauche, dans le second à droite :

tableau HTML

Colonne 1	Colonne 2
Le texte dans la première cellule de la première colonne	Texte dans la deuxième cellule de la deuxième colonne
Colonne 1	Colonne 2

Résultat

Avec l'aide de tableaux, vous pouvez faire une très bonne page. N'oubliez pas que vous pouvez insérer non seulement du texte dans les cellules, mais aussi des images, des liens, etc. !)

Merci pour votre attention! J'espère que le matériel a été utile!

Ce chapitre détaille les principes d'utilisation des tableaux dans le balisage HTML. Il s'agit d'une organisation tabulaire de texte, d'une grille de coordonnées tabulaire et d'un graphique organisé en tableaux.

Fonctionnalités de description de tableau HTML

Avec le développement de WWW, il est devenu clair que les fonds intégrés dans NTML ne suffisent pas pour un affichage de haute qualité de divers types documents. L'inconvénient de НТМL était le manque d'installations d'affichage de table dans sa composition. A cet effet, du texte préformaté (balise

), dans laquelle le tableau était entouré de symboles ASCII. Mais cette forme de présentation des tableaux ne suffisait pas Haute qualité et a été éliminé du style général du document. Avec l'introduction des tableaux en HTML, les webmasters ont plus qu'un simple outil pour placer du texte et des données numériques, mais un outil de conception puissant pour placer des graphiques et du texte au bon endroit sur l'écran.

Création de tableaux en HTML

La balise est utilisée pour décrire les tableaux<ТАВLЕ>... Étiqueter<ТАВLЕ>Comme beaucoup d'autres, il traduit automatiquement la ligne avant et après le tableau.

Créer une ligne de tableau - balise<ТR>

Étiqueter<ТR>(Table Row, table row) crée une ligne de tableau. Tout le texte, les autres balises et les attributs qui doivent être placés sur une seule ligne doivent être placés entre les balises lt; TR>.

Définition des cellules du tableau - Balise<ТD>

Les cellules de données sont généralement placées à l'intérieur d'une ligne de tableau. Chaque cellule contenant du texte ou une image doit être entourée de balises<ТD>... Nombre de balises<ТD>par ligne définit le nombre de cellules

tableau

Colonne 1	Colonne 2
Le texte dans la première cellule de la première colonne	Texte dans la deuxième cellule de la deuxième colonne

Si une table a deux balises TR, alors elle a deux lignes.
S'il y a trois balises TD dans une ligne,	puis dedans	trois colonnes.

En-têtes de colonne de tableau - Balise<ТН>

Les en-têtes des colonnes et des lignes du tableau sont définis à l'aide de la balise d'en-tête<ТН>(Tableau Neader, titre du tableau). Ces balises sont comme<ТD>... La différence est que le texte entre les balises<ТН>, s'écrit automatiquement en gras et se positionne par défaut au milieu de la cellule. Vous pouvez annuler le centrage et aligner le texte à gauche ou à droite. Si tu utilises<ТD>avec étiquette<В>et attribut<АLIGN=center>, le texte ressemblera également à un titre. Cependant, gardez à l'esprit que tous les navigateurs ne prennent pas en charge le texte en gras dans les tableaux, il est donc préférable de définir les titres des tableaux en utilisant<ТН>.

Le titre est centré par défaut	L'en-tête peut concaténer des colonnes
L'en-tête peut être placé devant les colonnes	Texte ou données	Texte ou données
L'en-tête peut concaténer des lignes	Texte ou données	Texte ou données
	Texte ou données	Texte ou données
	Texte ou données	Texte ou données

Utilisation des en-têtes de tableau - balise<САРТIОN>

Étiqueter vous permet de créer des en-têtes de tableau. Par défaut, les titres sont centrés et positionnés soit au-dessus (<САРТION АLIGN=top>), ou sous la table (<САРТION ALIGN=bottom>). Le titre peut être n'importe quel texte et image. Le texte sera divisé en lignes correspondant à la largeur du tableau. Parfois la balise<САРТION>utilisé pour la légende sous l'image. Pour ce faire, il suffit de décrire le tableau sans bordures.

En-tête au-dessus de la table
Texte ou données	Texte ou données	Texte ou données	Texte ou données

Titre sous le tableau
Texte ou données	Texte ou données	Texte ou données

Attribut NOWRAP

En règle générale, tout texte qui ne tient pas dans une ligne d'une cellule de tableau est déplacé vers la ligne suivante. Cependant, lors de l'utilisation de l'attribut NOWRAP avec des balises<ТН>ou<ТD>la longueur de la cellule s'agrandit de sorte que le texte inclus tient sur une seule ligne.

Attribut COLSPAN

Mots clés<ТD>et<ТН>modifié à l'aide de l'attribut COLSPAN (Column Span). Si vous souhaitez qu'une cellule soit plus large que le haut ou le bas, vous pouvez utiliser l'attribut COLSPAN pour l'étirer sur un nombre quelconque de cellules normales.

Si vous voulez faire une cellule plus large que le haut ou le bas,	vous pouvez utiliser l'attribut СLSPAN = 2,
pour l'étendre sur un nombre quelconque de cellules régulières.

Attribut ROWSPAN

Attribut ROWSPAN utilisé dans les balises<ТD>et<ТН>, est similaire à l'attribut COLSPAN =, sauf qu'il spécifie le nombre de lignes à étendre sur la cellule. Si vous avez spécifié un nombre supérieur à un dans l'attribut ROWSPAN = s, le nombre de lignes correspondant doit se trouver sous la cellule étirée. Il ne peut pas être placé au bas de la table.

Attribut LARGEUR

L'attribut WIDTH est utilisé de deux manières. Tu peux le mettre dans une balise<ТАВLЕ>pour donner la largeur de la table entière, ou peut être utilisé dans les balises<ТD>ou<ТН>pour définir la largeur d'une cellule ou d'un groupe de cellules. La largeur peut être spécifiée en pixels ou en pourcentage. Par exemple, si vous définissez dans la balise<ТАВLЕ>WIDTH = 250, vous obtenez un tableau de 250 pixels de large quelle que soit la taille de la page sur votre moniteur. Lors de la définition de WIDTH = 50% dans la balise<ТАВLЕ>le tableau occupera la moitié de la largeur de la page pour n'importe quelle taille d'image à l'écran. Ainsi, lorsque vous spécifiez une largeur de tableau en pourcentage, gardez à l'esprit que si l'utilisateur a une fenêtre d'affichage étroite, votre page peut sembler un peu étrange. Si vous utilisez des pixels et que le tableau est plus large que la fenêtre, une barre de défilement apparaît en bas pour vous déplacer à gauche et à droite sur la page. Selon la tâche à accomplir, les deux méthodes de réglage de la largeur de la table peuvent être utiles.

Texte ou données - 100 % de largeur

Texte ou données - 50 % de largeur

Texte ou données - 200 pixels de large

Texte ou données - 100 pixels de large

Appliquer des cellules vides

Si une cellule ne contient pas de données, elle n'aura pas de bordures. Si vous voulez qu'une cellule ait des bordures mais pas de contenu, vous devez y mettre quelque chose qui ne sera pas visible lors de la visualisation. Vous pouvez utiliser ligne vide <ВR>... Vous pouvez même définir des colonnes vides en spécifiant leur largeur en pixels ou en unités relatives et en n'entrant aucune donnée dans les cellules résultantes. Cet outil peut être utile pour placer du texte et des graphiques sur une page.

Attribut CELLPADDING

Cet attribut définit la largeur de l'espace blanc entre le contenu de la cellule et ses bordures, c'est-à-dire qu'il définit les marges à l'intérieur de la cellule.

Texte ou données	Texte ou données	Texte ou données
Texte ou données	Texte ou données	Texte ou données

Texte ou données	Texte ou données	Texte ou données
Texte ou données	Texte ou données	Texte ou données

Les attributs ALIGN et VALIGN

Mots clés<ТR>, <ТD>et<ТН>peut être modifié à l'aide des attributs ALIGN et VALIGN. L'attribut АLIGN détermine l'alignement horizontal du texte et des graphiques, c'est-à-dire à gauche ou à droite, ou au centre. L'alignement horizontal peut être spécifié de plusieurs manières :

ALIGN = saignement à gauche presse le contenu de la cellule contre le bord gauche.

ALIGN = gauche aligne le contenu de la cellule à gauche avec le remplissage spécifié par l'attribut CELLPADDING.

ALIGN = centre centre le contenu de la cellule.

ALIGN = à droite aligne à droite le contenu de la cellule avec le remplissage spécifié par l'attribut CELLPADDING.

Texte ou données	Texte ou données	Texte ou données
Texte ou données	Texte ou données	Texte ou données
Texte ou données	Texte ou données	Texte ou données
Texte ou données	Texte ou données	Texte ou données
Texte ou données	Texte ou données	Texte ou données

L'attribut VALIGN aligne verticalement le texte et les graphiques dans une cellule. L'alignement vertical peut être spécifié de plusieurs manières :

VALIGN = haut aligne le contenu de la cellule sur sa bordure supérieure.

VALIGN = milieu centre le contenu de la cellule verticalement.

VALIGN = bas aligne le contenu d'une cellule sur sa bordure inférieure.

L'attribut VALIGN aligne verticalement le texte et les graphiques dans une cellule.	Haut,	milieu,	bas.
VALIGN = top Aligne le contenu de la cellule sur sa bordure supérieure.	Haut,	Haut,	Haut.
VALIGN = milieu Centre le contenu de la cellule verticalement.	milieu,	milieu,	milieu.
VALIGN = bottom Aligne le contenu de la cellule sur sa bordure inférieure.	bas,	bas,	bas.

Attribut BORDURE

Dans la balise<ТАВLЕ>déterminent souvent à quoi ressembleront les cadres, c'est-à-dire les lignes qui entourent les cellules du tableau et le tableau lui-même. Si vous ne spécifiez pas de bordure, vous obtiendrez un tableau sans lignes, mais il y aura de la place pour elles. Le même résultat peut être obtenu en réglant<ТАВLЕ ВОRDER=0>... Parfois, vous voulez rendre la bordure plus épaisse pour la faire mieux ressortir. Vous pouvez définir des bordures exceptionnellement audacieuses pour attirer l'attention sur une image ou un texte. Lors de la création de tableaux imbriqués, vous devez créer des bordures d'épaisseurs différentes pour différents tableaux afin de faciliter leur distinction.

Attribut CELLSPACING

L'attribut CELLSPACING spécifie la largeur, en pixels, des espaces entre les cellules. Si cet attribut n'est pas spécifié, la valeur par défaut est de deux pixels. L'attribut CELLSPACING = vous permet de placer du texte et des graphiques où vous le souhaitez. Si vous souhaitez laisser un espace vide, vous pouvez entrer un espace dans la cellule.

Texte ou données	Texte ou données	Texte ou données
Texte ou données	Texte ou données	Texte ou données

Texte ou données	Texte ou données	Texte ou données
Texte ou données	Texte ou données	Texte ou données

Texte ou données	Texte ou données	Texte ou données
Texte ou données		Texte ou données

Attribut BGCOLOR

Cet attribut vous permet de définir la couleur de fond. Selon la balise (TABLE, TR, TD) avec laquelle il est appliqué, la couleur d'arrière-plan peut être définie pour l'ensemble du tableau, pour une ligne ou pour une seule cellule. La valeur de cet attribut est un code RVB ou un nom de couleur standard.

Texte ou données	Texte ou données	Texte ou données
Texte ou données	Texte ou données	Texte ou données

Attribut d'ARRIÈRE-PLAN

Cet attribut définit l'image d'arrière-plan des tables. Appliquer aux balises TABLE et TD. Sa valeur est l'URL du fichier d'image d'arrière-plan. L'utilisation de cet attribut est décrite ci-dessous.

Utilisation de tableaux dans la conception de pages

L'avantage des tables est que vous pouvez rendre leurs bordures invisibles si vous le souhaitez. Cela permet d'utiliser la balise<ТАВLЕ>placez magnifiquement le texte et les graphiques sur la page. Alors que la balise<ТАВLЕ>reste le seul outil de formatage puissant en HTML. Les concepteurs de pages Web ont désormais presque la même liberté d'utiliser les « espaces blancs » que les créateurs. pages imprimées... Les tableaux sont le meilleur moyen de s'éloigner du placement hiérarchique du texte sur les pages Web.

Si le navigateur prend en charge les tableaux, il rend généralement le plus correctement effets intéressants obtenu avec leur aide

Université pédagogique d'État de l'Oural

Bienvenue!

Formation"Bases du webmastering"

Créer des tables colorées

Certains navigateurs permettent d'afficher les couleurs. Il existe plusieurs façons de colorer le tableau, elles dépendent principalement du navigateur utilisé.

Bordures colorées dans Navigateur Netscape... Non seulement pouvez-vous entourer la table beau cadre, mais définissez également une couleur différente des couleurs du texte et de l'arrière-plan. Créez un simple GIF gris (ou tout autre GIF que vous aimeriez avoir comme arrière-plan) et définissez-le dans la balise<ВODY>comme arrière-plan de la page. Définissez ensuite la couleur de fond de la page. En conséquence, votre balise<ВОDY>ressemblera à quelque chose comme ceci :

Vous avez créé un double fond - GIF et définir la couleur... En conséquence, la couleur d'arrière-plan sera visible sur toutes les bordures des tableaux et lignes horizontales (<НR>). Que votre GIF d'arrière-plan soit gris ou non, les lignes colorées et les bordures des tableaux se démarqueront nettement. Si le GIF d'arrière-plan n'est pas trop complexe, le temps de chargement de la page n'augmentera que légèrement.

Tableau avec bordures

Nom	Nom de famille
Larissa	Isaïeva
Dmitriy	Kolesnikov

RÉSULTAT:

Tableau sans cadre

Tableau avec bordures

Attributs de balise et combiner des cellules

Exemple

	furets
	poids	la taille
mâles	1,2 - 2,5 kg	jusqu'à 70 cm
femelles	0,7 - 1,0 kg	jusqu'à 40 cm

RÉSULTAT:

	furets
	poids	la taille
mâles	1,2 - 2,5 kg	jusqu'à 70 cm
femelles	0,7 - 1,0 kg	jusqu'à 40 cm

Selon la norme HTML5, tous les attributs de table précédemment utilisés tels que frontière, espacement des cellules, rembourrage cellulaire etc. ne sont plus pris en charge et leur utilisation est considérée par le validateur comme des erreurs dans le code. Pour concevoir des tableaux, vous devez utiliser des styles CSS, avec lesquels vous pouvez remplacer tous les attributs de tableau obsolètes. Par exemple, au lieu de l'attribut espacement des cellules pour modifier la distance entre les cellules du tableau, utilisez la propriété espacement des frontières, et pour aligner le contenu dans les cellules du tableau - propriétés aligner le texte et vertical-aling... Styles CSS pour la décoration de table

Balises de regroupement de lignes de tableau HTML

Pour créer des tableaux plus complexes, vous pouvez utiliser les balises :

Exemple

Consommation de bière
NOM COMPLET.	litres
Le total	250
Ivanov Ivan Ivanovitch	133
Petrov Petr Petrovitch	117

RÉSULTAT:

Balises de regroupement de colonnes de tableau HTML

Attribut de balises et

La façon la plus simple de comprendre comment vous pouvez utiliser le regroupement de lignes et de colonnes est avec l'exemple d'une table Sudoku.

La balise col définit les paramètres séparément pour chaque colonne. Peu importe comment écrire code source:

Exemple

Jaune		rouge

RÉSULTAT:

N'essayez pas de style aligner le texte pour les balises et ... Texte placé entre les balises ..., n'hérite pas de ce style, puisque la balise n'est le descendant d'aucune balise , aucun tag .

Alignement horizontal du texte dans une colonne spécifique les tableaux peuvent être modifiés en spécifiant un style aligner le texte pour pseudo-classe td : nième enfant (n), où n est le numéro de colonne. Cependant, cette méthode ne fonctionnera pas si l'attribut est présent parmi les cellules du tableau. colspan.

Exemple

Nom	Prix, frotter.)
Paiement à la minute pour solarium (à partir de 4 minutes)	15
50 minutes de solarium (14 roubles / min, 1 mois)	700
100 minutes de solarium (13 roubles / min, 2 mois)	1300
200 minutes de solarium (12 roubles / min, 3 mois)	2400

RÉSULTAT:

Cependant, cette méthode ne fonctionnera pas si l'attribut est présent parmi les cellules du tableau. colspan.

Un tableau est un ensemble de données réparties sur des lignes et des cellules. La plupart des cellules contiennent des données tabulaires, les autres contiennent des en-têtes de lignes et de colonnes qui décrivent le contenu.

Pour créer un tableau dans un document HTML, utilisez la balise

, c'est un conteneur qui contient tout le contenu de la table.

La création d'un tableau commence toujours par des lignes, qui sont définies à l'aide de la balise

, chaque ligne, à son tour, est constituée de cellules. Étiqueter ne peut contenir que des balises pour la création de cellules.

Il existe deux balises différentes en HTML pour créer des cellules, la première est

, il crée des cellules régulières avec des données. Par défaut, le contenu des balises

est aligné à gauche. La deuxième balise pour créer des cellules est la balise

, il vous permet de définir des cellules qui contiennent des en-têtes de colonnes ou de lignes, le contenu de ces cellules est affiché en gras et aligné au centre. Mots clés

peut inclure tous les éléments HTML pouvant être utilisés dans le corps du document.

Premier titre	Deuxième rubrique
ligne 1, cellule 1	ligne 1, cellule 2
ligne 2, cellule 1	ligne 2, cellule 2

Essayer "

Tableau dans un tableau

HTML a la capacité de créer des tableaux imbriqués, c'est-à-dire des tableaux situés à l'intérieur d'autres tableaux. Pour créer une table imbriquée, vous avez besoin du code de la table que vous souhaitez imbriquer, placez-le dans n'importe quelle balise

Par exemple, prenons le tableau que nous avons déjà créé et mettons ce code dans la deuxième cellule de la deuxième ligne :

Premier titre

Deuxième rubrique

ligne 1, cellule 1

ligne 1, cellule 2

ligne 2, cellule 1

ligne 2, cellule 2

Premier titre	Deuxième rubrique
ligne 1, cellule 1	ligne 1, cellule 2
ligne 2, cellule 1	ligne 2, cellule 2

L Yubaya tableau en HTML est un ensemble de lignes et de colonnes, à l'intersection desquelles se trouvent des cellules. La création de tableaux en HTML est simple, il suffit d'imaginer le modèle final. En langue tableaux HTML sont utilisés non seulement pour représenter des données, ils peuvent être utilisés pour placer des blocs de texte, des images, etc. sur une page Web, c'est-à-dire ils peuvent être utilisés pour créer la mise en page de la page elle-même.

élément TABLE, créer un tableau

Pour créer des tableaux en HTML, utilisez l'élément tableau et tout le code (son contenu) les tableaux sont placés entre les balises ... Les attributs de cet élément définissent des valeurs pour l'ensemble du tableau :

Contexte- une image (URL) est définie, qui peut être l'arrière-plan de l'ensemble du tableau ;
bgcolor- la couleur de fond du tableau, définie si le fond n'est pas défini sous forme d'image ;
frontière- épaisseur des lignes du tableau, si des bordures visibles sont nécessaires ;
couleur de la bordure- couleur des lignes du tableau ;
rembourrage cellulaire- la distance entre le texte à l'intérieur des cellules et les bords des cellules ;
espacement des cellules- la distance entre les bords du tableau et les bords extérieurs des cellules (à l'intérieur du tableau) ;
largeur- fixe la valeur de la largeur du tableau dans pixels ou % .

Écrivons un exemple de code pour un tableau avec un fond bleu, une ligne blanche de 1px, des retraits de 2px à l'intérieur et à l'extérieur des cellules, 100 % de la largeur de la page :

bgcolor = "blue" border = "1" bordercolor = "white" cellpadding = "10" cellspacing = "2" width = "100%">

Ajouter la ligne

Chaque table doit avoir au moins une ligne, elle est spécifiée par des balises ... Dans l'exemple suivant, voyez un exemple d'ajout d'une ligne :

bgcolor = "blue" border = "1" bordercolor = "white" cellpadding = "10" cellspacing = "2" width = "100%">

Ajouter des cellules

Les cellules forment les colonnes verticales du tableau, elles sont désignées par des balises ... Ajoutez des cellules à notre tableau :

bgcolor = "blue" border = "1" bordercolor = "white" cellpadding = "10" cellspacing = "2" width = "100%">

Cellule n°1
Cellule n°2
Cellule n°3

Voyons le tableau résultant :

Chaînes de concaténation

Dans certains cas, il peut être nécessaire d'étendre une colonne sur plusieurs lignes ; pour cela, l'attribut étendue de lignes, dont la valeur détermine le nombre de lignes nécessaires à la concaténation. Voyons un exemple :

bgcolor = "blue" border = "1" bordercolor = "white" cellpadding = "10" cellspacing = "2" width = "100%">

rowspan = "2"> Les lignes #1 et #2 sont fusionnées
Cellule n° 1
Cellule #2

Cellule n°3
Cellule n°4

Ligne # 3
Cellule n°5
Cellule n° 6

Le navigateur affichera :

Les lignes #1 et #2 sont fusionnées	Cellule n° 1	Cellule #2
Les lignes #1 et #2 sont fusionnées	Cellule n°3	Cellule n°4
Ligne # 3	Cellule n°5	Cellule n° 6

Concaténer des colonnes

Les colonnes sont combinées selon le même principe, en utilisant uniquement l'attribut colspan... Voyons un exemple :

bgcolor = "blue" border = "1" bordercolor = "white" cellpadding = "10" cellspacing = "2" width = "100%">

colspan = "2"> Les colonnes #1 et #2 sont fusionnées
Colonne #3

Cellule n°1
Cellule n°2
Cellule n°3

Cellule n°4
Cellule n°5
Cellule n° 6

Le navigateur affichera :

Les attributs colspan et étendue de lignes peuvent être appliqués simultanément. Dans le navigateur, cela ressemblera à ceci :

Ou comme ça :

Essayez d'écrire le code vous-même !

Dimensions et alignement du tableau

La hauteur et la largeur peuvent être définies à la fois pour l'ensemble du tableau et pour des lignes et des colonnes individuelles, cela se fait en utilisant les attributs déjà familiers largeur et la taille, les valeurs sont spécifiées à la fois en pixels et en pourcentage.

L'alignement horizontal du tableau est spécifié par l'attribut aligner, les significations vous sont déjà familières : gauche, centre, droite... Et pour aligner le texte dans les cellules du tableau, l'attribut d'alignement horizontal aligner doit être appliqué à chaque balise td... L'utilisation de CSS rend cela beaucoup plus facile. L'attribut est appliqué pour aligner verticalement le contenu des cellules valigner... Il a aussi sa propre signification - alignement central vertical milieu, au sommet Haut et en bas bas ligne de base (la ligne sur laquelle se trouve le texte de la ligne courante).

Fond de tableau

L'image ou la couleur d'arrière-plan peut également être définie à la fois pour l'ensemble du tableau et pour une seule cellule, tout dépend des objectifs que vous poursuivez. Ceci est défini - pour l'image - par l'attribut Contexte, dans la valeur de laquelle est écrit le chemin d'accès au fichier graphique souhaité. Pour la couleur de fond - l'attribut bgcolor, ici la valeur est le nom de la couleur.

Enfin

C'est tout ce qu'il faut pour niveau d'entrée... A la fin de la section sur la construction de tableaux en HTML, votre première connaissance de HTML... Passant par tableaux en HTML Vous pouvez créer des modèles de pages Web simples, je vous suggère donc de créer votre premier modèle complet dès maintenant. Le matériel couvert est tout à fait suffisant pour cela. En avant à la conquête de l'hyperespace !