Les tableaux en HTML sont si fonctionnels que vous pouvez les utiliser pour mettre en page des sites Web entiers (lire). Nous allons maintenant parler de l'insertion de tableaux HTML simples dans une page Web, en analysant uniquement le balisage, mais sans toucher au design, car il est préférable de décorer les tableaux en utilisant des styles CSS.

Balises et attributs de table

Voici les éléments de base dont vous avez besoin pour créer des tableaux :

• - un conteneur à l'intérieur duquel se trouve la table (le même que
  pour marqué ou
  pour les listes numérotées).
  1. frontière- un attribut qui détermine l'épaisseur des cadres. Il est préférable d'utiliser la propriété CSS border à la place.

  spécifie la signature de la table. Vous n'êtes pas obligé d'utiliser un conteneur, mais si vous décidez quand même de donner un titre au tableau, placez-le immédiatement après la balise. , en dehors des cellules et des lignes.

  - une balise appariée contenant une ligne de tableau (cellules situées au même niveau horizontal).

  , il y aura tellement de cellules : une balise - une cellule.

  permet de regrouper des colonnes, rapidement et sans encombrer le code, de les attribuer caractéristiques générales. À l'aide d'un conteneur, vous pouvez séparer les parties logiques d'une table les unes des autres. Placé après le tag

  , si ce n'est pas là, alors après .

  utilisé dans le même but que . peut contenir , mais pas l'inverse.

  portée- un attribut qui spécifie le nombre de colonnes auxquelles les propriétés du conteneur sont appliquées

  .

  , Et - des conteneurs qui vous permettent de diviser le tableau en parties supérieure (titres), principale (corps) et inférieure (finale), respectivement. Dans un tableau HTML, la séquence de ces balises est la même que la séquence des conteneurs , Et

  Outils de création de sites Web

  But	Outil
Marquage	HTML	XHTML
Inscription	CSS
Développement	PHP	Python

  Dans le navigateur, le document ressemblera à ceci :

  Voyons quelles lignes de code sont responsables de quoi.

  • - j'ai ouvert la table en lui donnant l'épaisseur des cadres.
    - ils l'ont intitulé.
    - a ouvert la ligne.
    - créé une cellule avec un design d'en-tête.
    - créé une deuxième cellule d'en-tête dans la ligne. Le paramètre colspan indiquait que cette cellule devait s'étendre sur deux horizontalement.
    - fermé la ligne. Les lignes restantes ont été créées de la même manière.
    - ajout d'une deuxième ligne du tableau avec des cellules normales plutôt que des cellules d'en-tête. Les lignes et cellules suivantes ont été insérées de la même manière.

    Outils de création de sites Web

    But	Outil
  Marquage	HTML	XHTML

    - fermé la table.

  Tâche

  Créez un tableau et spécifiez ses paramètres (marges et distance entre les cellules) à travers des styles.

  Solution

  Un tableau est constitué de lignes et de colonnes de cellules pouvant contenir du texte et des images. Pour ajouter un tableau à une page Web, utilisez la balise

  . Cet élément sert de conteneur pour les éléments qui définissent le contenu de la table. Tout tableau est constitué de lignes et de cellules, qui sont spécifiées respectivement à l'aide de balises Et

  Code source du tableau HTML

  Et

  . Le tableau doit contenir au moins une cellule (exemple 1). Autorisé à la place du tag	utiliser la balise	. Texte dans une cellule stylisée avec une balise	, est affiché par le navigateur en caractères gras et aligné au centre de la cellule. Sinon, les différences entre les cellules créées via les balises	Et	Non. Exemple 1 : Création d'un tableau HTML5 IE Cr Op Sa FX Cellule 1 Cellule 2 Cellule 3 Cellule 4 L'ordre des cellules et leur apparence sont présentés sur la figure. 1. Riz. 1. Résultat de la création d'un tableau avec quatre cellules attribut de balise de bordure il est uniquement permis d'ajouter avec une valeur vide ( ) ou égal à 1. Toutes les autres valeurs ne sont pas validées. Pour contrôler les marges à l'intérieur des cellules, utilisez la propriété de style de remplissage, qui est ajoutée au sélecteur td. La distance entre les cellules est modifiée par la propriété border-spacing (exemple 2) ajoutée au sélecteur de table ; le navigateur IE ne la comprend que depuis la version 8.0 ; Exemple 2 : Marges à l'intérieur des cellules HTML5 CSS 2.1 IE Cr Op Sa Fx Titre 1 Titre 2 Cellule 3 Cellule 4 Un tableau avec les champs et la distance entre les cellules est présenté dans la Fig. 2. Un résultat similaire peut être obtenu en utilisant un cadre blanc autour des cellules. Riz. 2. Champs dans les cellules du tableau Grâce à la polyvalence des tables, un grand nombre paramètres qui contrôlent leur apparence, les tableaux sont depuis longtemps devenus un standard incontournable pour la mise en page des pages Web. Un tableau avec une bordure invisible apparaît comme si grille modulaire, dans les blocs desquels il convient de placer des éléments de page Web. Cependant, ce n’est pas entièrement la bonne approche, parce que tout le monde Objet HTML défini pour ses propres fins et s'il n'est pas utilisé aux fins prévues, et partout, cela signifie qu'il n'y a pas d'alternative. C'est comme ça que c'était pendant longtemps jusqu'à ce que les couches remplacent les tableaux dans la mise en page du site Web. Cela ne signifie pas que les calques sont désormais utilisés tout le temps, mais la tendance est déjà clairement apparue : les tableaux sont utilisés pour placer des données tabulaires et les calques sont utilisés pour la mise en page et la conception. Création d'un tableau Un tableau est constitué de lignes et de colonnes de cellules pouvant contenir du texte et des images. Les tableaux sont généralement utilisés pour organiser et présenter des données, mais ils ne se limitent pas à cela. À l'aide de tableaux, il est pratique de mettre en page des mises en page en disposant des fragments de texte et d'images de la manière souhaitée. Pour ajouter un tableau à une page Web, utilisez la balise . Cet élément sert de conteneur pour les éléments qui définissent le contenu de la table. Tout tableau est constitué de lignes et de cellules, qui sont spécifiées respectivement à l'aide de balises Et Veuillez noter que lorsque vous fusionnez des cellules, le nombre d'éléments dans la ligne change. Par exemple, si un tableau comporte 3 colonnes avec des cellules et que nous fusionnons la première et la deuxième cellule, alors tout ce qui se trouve à l'intérieur de la balise définissant cette ligne il y aura 2 éléments, le premier d'entre eux contiendra l'attribut colspan="2". Exemple de tableau HTML avec fusion de cellules Code source du tableau HTML avec cellules fusionnées . Le tableau doit contenir au moins une cellule (exemple 12.1). Autorisé à la place du tag utiliser la balise . Texte dans une cellule stylisée avec une balise , est affiché par le navigateur en caractères gras et aligné au centre de la cellule. Sinon, les différences entre les cellules créées via les balises Et Non. Exemple 12.1. Création d'un tableau Cellule 1 Cellule 2 Cellule 3 Cellule 4 L'ordre des cellules et leur apparence sont présentés sur la figure. 12.1. Code source du tableau HTML simple Cellule 1 Cellule 2 Cellule 3 Cellule 4 Cellule 5 Cellule 6 Cellule 7 Cellule 8 Cellule 9 En-têtes de tableau HTML Il existe 2 types de cellules dans les tableaux HTML. La balise définit une cellule type régulier. Si une cellule fait office d'en-tête, elle est définie à l'aide du . Exemple de tableau HTML avec en-tête Volkswagen AG Daimler AG Groupe BMW Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Intelligent Rolls-Royce Code source du tableau HTML avec les en-têtes Volkswagen AG Daimler AG Groupe BMW Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Intelligent Rolls-Royce Fusionner des cellules dans un tableau HTML Les tableaux HTML ont la possibilité de fusionner des cellules horizontalement et verticalement. À fusionner les cellules horizontalement utilisez l'attribut colspan=" X" , à la cellule ou , où x À fusionner les cellules verticalement utilisez l'attribut rowspan=" X" , à la cellule ou , où x- nombre de cellules à fusionner. Les cellules peuvent être fusionnées horizontalement et verticalement en même temps. Pour ce faire, utilisez les attributs colspan et rowspan pour la cellule souhaitée : Texte de cellule Nissan Modèle Équipement Disponibilité Nissan Qashqai VISIA + TEKNA + Nissan X-Trail ACCENTA + CONNECTER - En-têtes et pieds de page dans les tableaux HTML Les tableaux HTML peuvent être divisés en 3 zones : en-tête, corps, pied de page. Cela se fait en enveloppant les lignes de la partie sélectionnée du tableau avec des balises. définit la zone d'en-tête, - la zone de pied de page, - la partie principale du tableau. Par défaut, les en-têtes et pieds de page ne sont pas stylisés différemment (cela peut être fait via CSS si nécessaire), mais peuvent être utilisés par les navigateurs. Par exemple, lors de l'impression d'un tableau de plusieurs pages, les en-têtes et pieds de page peuvent être dupliqués sur chaque page imprimée. L'ordre correct de placement des balises de zone dans le code HTML d'un tableau est le suivant : l'en-tête en premier, suivi du pied de page, puis du corps. Dans ce cas, la partie principale de la page sera affichée entre les en-têtes et les pieds de page. Si nécessaire, vous pouvez ajouter une signature au tableau. Pour ce faire, utilisez la balise. Exemple de tableau HTML avec en-têtes et pieds de page Code source du tableau avec en-têtes et pieds de page Configurations Renault Sandero Stepway Caractéristiques SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R Disponibilité + + + Puissance du moteur 0,9 (90 ch) 0,9 (90 ch) 1,5 (90 ch) Carburant essence essence diesel Norme de toxicité 6 euros 6 euros 5 euros Colonnes et groupes de colonnes Un tableau HTML peut être divisé en colonnes et groupes de colonnes à l'aide de balises et. Cette division vous permet de définir des styles pour le tableau en utilisant un nombre minimum de Propriétés CSS, réduisant ainsi la quantité de code du tableau (au lieu de définir des styles pour chaque cellule d'une colonne, vous pouvez définir des styles pour une ou plusieurs colonnes à la fois). Les balises et sont placées à l'intérieur de la balise avant les balises, AKP6 (EDC)	Transmission

  ZEN 2E2C AL A	ZEN 2E2C J5A	INTENSE 2E3C AL A	Caractéristiques
1,5 (90 ch)	1.2 (115 ch)	1,5 (90 ch)	Puissance du moteur
diesel	essence	diesel	Carburant
Transmission automatique6 (EDC)	Transmission automatique6 (EDC)	Transmission automatique6 (EDC)	Transmission

  Tableaux dans la mise en page du site

  Sur les sites Web modernes, il est important que les pages s'affichent correctement à la fois sur les ordinateurs et appareils mobiles. Utiliser des tableaux pour créer un wireframe Pages HTML déconseillé, car la capacité d'adapter le contenu aux écrans est perdue différentes tailles(ordinateurs, smartphones, tablettes).

  Les balises de groupe de tableaux sont mieux utilisées à l’intérieur d’une page pour afficher le contenu sous forme de tableau.

  C'est devenu populaire, les concepteurs de sites Web ont principalement utilisé la méthode de mise en page des tableaux et ont obtenu de très bons résultats.

  Balises utilisées pour construire un tableau en HTML

  tableau- une balise obligatoire qui ouvre et ferme la table
  légende- balise facultative indiquant le titre du tableau
  ème- une balise facultative dont les balises d'ouverture et de fermeture contiennent le nom de la colonne. Apparaît généralement en gras
  tr- une balise obligatoire qui ouvre et ferme la ligne
  td- un tag obligatoire indiquant l'ouverture et la fermeture d'une cellule dans une rangée

  Exemple de code pour une table simple

  Nom du tableau

  Stobets 1	Stobets 2
Texte dans la première cellule	Texte dans la deuxième cellule

  Le navigateur affichera

  Objectif des tableaux en HTML

  La leçon sur les tables 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 préciser arrière-plan(ou sa couleur), échancrure, largeur, frontière Et autres paramètresça lui donnera une belle apparence. Tableau - Votre premier pas vers la compréhension conception de sites Web! Auparavant, de nombreux sites étaient entièrement présentés sous forme de tableaux, c'est-à-dire 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 font la beauté de la table...

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

  U étiquette de table il y a les attributs suivants :

  largeur- largeur du tableau. peut être en pixels ou en % de la largeur de l'écran.
  couleurbg- couleur de fond des cellules du tableau
  arrière-plan- remplit le fond du tableau avec un motif
  frontière- cadre et bordures dans le tableau. L'épaisseur est indiquée en pixels
  rembourrage cellulaire- remplissage en pixels entre le contenu de la cellule et sa bordure interne
  Comme auparavant, nous écrivons la valeur de l'attribut entre guillemets.

  Examinons l'utilisation de ces attributs à l'aide d'un exemple. Pour ce faire, créons un tableau (mais déjà sans la légende extrêmement rarement utilisée et les balises th) et définissez le paramètre sur l'attribut frontière, width (largeur du tableau, de la ligne ou de la cellule) Et bgcolor (couleur de la cellule)

  En conséquence, le tableau suivant s'affichera dans le navigateur :

  cadre- un attribut indiquant le cadre autour de la table. Il existe les valeurs suivantes :

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

  règles- un attribut indiquant les limites à l'intérieur du tableau, entre les cellules. Il existe les valeurs suivantes :

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

  Regardons l'exemple de code

  Stobets 1	Stobets 2

  Résultat

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

  aligner- alignement des tableaux. Il peut être placé à 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 interne (par défaut 0 pixel)
  Regardons un exemple

  Stobets 1	Stobets 2
Texte dans la première cellule de la première colonne	Texte dans la deuxième cellule de la deuxième colonne

  Le navigateur affichera un tableau centré qui ressemble à ceci :

  lignes tr et cellules td dans les tableaux HTML

  Je vous rappelle encore une fois que les tableaux sont formés ligne par ligne (tr). Les lignes (tr) contiennent déjà des cellules (td). Si vous spécifiez un paramètre pour une chaîne (tr), il sera valable 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 dans toutes les cellules.

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

  aligner- alignement du texte à l'intérieur d'une cellule. Bord gauche (gauche), bord droit (droite), centre (centre)
  valider- alignement vertical du texte à l'intérieur d'une cellule. Haut (haut), bas (bas), centre (milieu)
  couleurbg- définit la couleur de la ligne
  largeur- largeur de colonne (toutes les cellules ci-dessous prendront ce paramètre) est spécifié en pixels ou en pourcentage, où 100 % correspond à la largeur de l'ensemble du tableau
  hauteur- hauteur de cellule (toutes les cellules de la ligne accepteront ce paramètre)

  Regardons le code où le contenu des cellules (td) est aligné le long de différents bords : dans le premier à gauche, dans le second à droite :

  Stobets 1	Stobets 2
Texte dans la première cellule de la première colonne	Texte dans la deuxième cellule de la deuxième colonne
Stobets 1	Stobets 2

  Résultat

  En utilisant des tableaux, vous pouvez créer 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 de votre attention ! J'espère que le matériel a été utile !

  ARTICLES CONNEXES

  • Retour
  • Plan du site
  • À propos du site

  Stobets 1	Stobets 2
Texte dans la première cellule de la première colonne	Texte dans la deuxième cellule de la deuxième colonne

  - une balise qui crée une cellule d'en-tête de tableau. Extérieurement, son contenu diffère de celui des autres cellules - généralement le texte à l'intérieur	Le navigateur le met en évidence en gras et le place au centre.	- un conteneur avec lequel une cellule simple est créée. Combien de balises de ce type une ligne contiendra-t-elle (balise