Insérez un tableau en HTML en ligne. Exemple : Utilisation de la propriété width

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 continuerons à étudier 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 c'est aussi un sujet assez important.

Prenez, par exemple, WordPress. Par défaut, vous ne pouvez pas créer de table dans ce moteur. Vous avez besoin soit d'un module complémentaire spécial (plugin), soit d'un code de programme spécial (script). Mais nous pouvons faire ce que nous voulons avec de simples balises. 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 de la façon dont j'ai conçu mes premiers sites Web en utilisant la disposition en tableau, 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 habituel de créer des sites Web à l'aide de tableaux, mais cela ne veut pas dire qu'ils ne sont pas nécessaires. Bien au contraire.

Ce qui est également génial, c'est que vous n'avez même pas besoin de dessiner quoi que ce soit. Tout se fait dans un bloc-notes classique (ou un autre, comme Notepad++), et assez facilement. En général, préparons-nous à travailler.

Balises

Ici, le balisage est un peu plus compliqué que dans les autres balises, mais tout est rapidement mémorisé. Alors surveillez et ne vous laissez pas distraire.

Toute table est toujours entourée d'une balise appariée

. Ceux. ces panneaux donnent l'ordre que la table sera située ici.

Une balise appariée est placée à l'intérieur du tableau . Cette paire signifie que nous avons créé une ligne dans le tableau et combien de balises de ce type seront écrites, il y aura autant de lignes.

Eh bien, à l'intérieur nous en déposons maintenant une autre paire - . Cette paire signifie que nous avons créé une colonne dans cette ligne, et si nous écrivons plusieurs td dans chaque tr, alors il y aura plusieurs colonnes dans cette ligne. Il est clair? Sinon, regardons un exemple de la façon dont tout fonctionne ici... Disons que je souhaite créer un tableau des étudiants et des notes. Ensuite, nous écrivons ce qui suit à l'intérieur de la balise :

	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 créé quatre lignes (tr), chacune contenant quatre tableaux (td). Dans le premier bloc tr nous avons écrit le nom des disciplines académiques, tout en laissant la première colonne vide pour ne pas casser le tableau.

Plus loin dans chaque première paire td nous insérons les noms des étudiants et de tous les autres 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 quand on consulte le document, on constate que le tableau n'est pas tout à fait similaire à ce que nous avions prévu. Qu'est-ce qui manque ici ? C'est vrai - les limites. Mais ne vous inquiétez pas. Je vais vous en parler 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 des tableaux. Cette balise s'écrit comme . Soulignons nos rubriques dans le tableau. Pour ce faire, remplacez simplement les balises td, sur ème dans les endroits où l'on écrit les noms de famille et les noms de disciplines.

Et voyons ce que nous pouvons réaliser grâce à cela. Comme je l'ai dit, ces noms sont désormais centrés et mis en évidence. C'est ce à quoi nous aspirions.

En général, nous semblons avoir compris les balises. Bien qu'il y en ait d'autres (vous pouvez consulter htmlbook), je ne me concentrerai pas sur eux.

Attributs

Naturellement, les tableaux ne peuvent se passer d'attributs spéciaux et je vais vous en montrer quelques-uns.

Frontière

Eh bien, j'aimerais commencer par ce dont j'ai parlé ci-dessus, à savoir les limites. Par défaut, ils ne sont pas présents, le tableau semble donc peu attrayant et pas tout à fait clair. Mais cela peut être corrigé, et l'attribut border, qui est placé directement dans la balise d'ouverture, nous y aidera.

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

Une fois cela fait, enregistrez le résultat et exécutez le document. Bien? C'est une tout autre affaire. Le tableau a désormais retrouvé son contour normal et se présente comme il se doit. Vous pouvez expérimenter différentes valeurs de bordure et voir ce qui vous convient le mieux.

Indentation et distance (cellpadding et cellpacing)

Il est tout à fait naturel qu’une présentation de table pour toutes les occasions ne convienne pas à tout le monde. Mais nous pouvons changer un peu cela, 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, définissons la valeur sur 5 et voyons en quoi il diffère. de la version originale.

Houblon. Voyez-vous ? La distance a augmenté. de cette façon, vous pouvez remplacer vous-même les valeurs nécessaires, 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 définir cet attribut avec une valeur de 5 et voyons ce qui se passe.

Bien? Le propos est-il clair ? Comme vous pouvez le constater, la distance entre les cellules est devenue plus large. C’est exactement ce que nous essayions de réaliser.

Aligner

Eh bien, où serions-nous sans ce merveilleux attribut qui nous permet de tout aligner à différents endroits ? Align fonctionne exactement de la même manière qu'avec les autres balises que nous avons examinées plus tôt et a trois significations :

• Centre
• Droite

É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 à les poser.

Eh bien, c’est essentiellement tout ce que je voulais vous dire sur les tables aujourd’hui. J'espère que tout était clair pour vous. Eh bien, si vous souhaitez étudier en détail toutes les subtilités du travail avec HTML et CSS et apprendre à mettre en page vous-même des sites Web, je vous recommande fortement de regarder excellent cours vidéo sur ce sujet. Pour un débutant, c'est, à mon avis, le cours vidéo le plus compréhensible, dans lequel ils vont simplement tout décomposer pour vous et mettre de l'ordre.

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

Cordialement, Dmitri Kostin.

Les tableaux sont l’un des éléments les plus importants, mais en même temps complexes, qui doivent être présents sur les pages Web. Avec leur aide, il est pratique de présenter des informations importantes et utiles sous une forme assez concise. Bien sûr, la plupart des éditeurs de modèles fonctionnant sur différents moteurs vous permettent d'insérer automatiquement un tableau dans une page d'un site Web ou dans une publication distincte, mais que se passe-t-il si la conception d'une ressource Web et ses pages sont créées à partir de zéro ? Ensuite, un maître novice peut être confronté à un problème : comment faire. Voyons comment créer cet élément correctement et rapidement.

Choisir un éditeur

Tout d'abord, lorsque vous commencez à créer un tableau, vous devez décider de l'éditeur dans lequel vous allez travailler. Bien entendu, le moyen le plus simple est de choisir le programme dans lequel vous créez le code principal du site. Mais il est préférable d'utiliser un bon vieux bloc-notes à ces fins.

Vous vous demandez peut-être pourquoi vous compliquer la vie, car si vous faites tout en même temps dans l'éditeur, vous pouvez voir le résultat immédiatement et vous pouvez également utiliser les astuces du programme.

Oui, c'est vrai, mais en créant une table à partir de zéro, vous pourrez non seulement étudier en profondeur le principe même de sa création, mais également éviter les fautes de frappe et les erreurs gênantes dans le code principal. Parfois, il arrive que le curseur descende accidentellement et, pendant le processus d'écriture, une erreur s'insère dans le code, parfois difficile à trouver. Après avoir créé un tableau dans le Bloc-notes, vous pouvez copier son code et le coller à l'endroit dont vous avez besoin.

Algorithme de création d'un tableau

Tout d’abord, créons un court algorithme sur la façon de créer un tableau en HTML. Ceci est nécessaire pour que vous compreniez la séquence de chaque étape. Ensuite, nous découvrirons exactement comment exécuter chacun des points.

Commençons par les étapes préparatoires.

1. Dessinez une représentation schématique du tableau sur une feuille de papier.

2. Comptez le nombre de lignes et de cellules. Si le nombre de ces derniers est différent, on le compte pour chaque ligne séparément.

3. Déterminez le nombre de cellules d'en-tête dans la ligne (par exemple, les cellules « N° », « Nom », etc.).

4. Notez les principaux paramètres du tableau - couleur, hauteur et largeur, alignement du texte - en général, tout ce qui vous semble nécessaire.

1. Insérez des balises de tableau.

2. Insérez des balises de ligne en fonction de la quantité dont vous avez besoin.

3. Dans les lignes, insérez des balises de cellule (normales et majuscules), également basées sur le numéro écrit sur votre papier.

4. Définissez les paramètres pour la table dans son ensemble.

5. Si nécessaire, définissez des indicateurs pour des cellules individuelles.

6. Remplissez nos cellules de texte.

Créer un tableau

Vous avez donc choisi un éditeur, voyons maintenant comment créer un tableau en HTML. Une balise avec laquelle un tableau est inséré dans le code de la page (

), est apparié, c'est-à-dire que notre construction commence par cette balise et se termine.

Après avoir inséré des balises de tableau, nous passons à la création de lignes et de cellules.

Notons tout de suite que ces éléments sont également appariés. Étiqueter spécifie les lignes, et - les cellules.

Pour les cellules d'en-tête, utilisez un élément paire .

Comme déjà mentionné, la première chose à faire est de créer les lignes, puis d’y écrire les cellules. Afin de ne pas se tromper, nous recommandons soit de faire une ou deux lignes d'indentation entre chaque bloc, soit d'écrire un nouveau bloc d'éléments à l'aide de la touche "Tab".

À quoi cela pourrait-il ressembler ? Quelque chose comme ça :

• ;
  ;
  ;
  ;
  ;
  ;
  ;
  ;

  Non.	Nom de famille
  1	;	Ivanov

  .

Comme vous pouvez le constater, cela n’a rien de compliqué. L'essentiel est de ne pas se tromper dans le nombre de lignes et de cellules. Sinon, le tableau pourrait devenir biaisé.

Nous avons discuté de la création d'un tableau en HTML, nous pouvons maintenant passer aux paramètres de la matrice elle-même et de ses lignes et cellules.

Options des tableaux

Lorsque le code est écrit, vous devez faire attention aux points suivants : alignement sur les bordures, l'arrière-plan, le texte, etc.

Les paramètres du tableau sont spécifiés dans la balise

. Ceux-ci incluent :

1. Bordure - largeur de la bordure. Spécifié sous forme d'entier. Par défaut, les limites de n'importe quelle table sont nulles.

2. Bordercolor - couleur de la bordure. Il peut être spécifié soit par un code couleur hexadécimal (#00008B), soit par son nom en anglais (DarkBlue). Par défaut, il est toujours gris.

3. Bgcolor - Également spécifié à l'aide d'un code ou d'un nom.

4. Aligner - alignement du texte derrière le tableau. Par défaut – aligné à gauche. Il existe les options suivantes pour ce paramètre :

• gauche - circulez vers la droite ;
• à droite - circuler vers la gauche ;
• center - affiche le tableau au centre sans enroulement.

5. Largeur et hauteur - largeur et hauteur de la table. Peut être spécifié soit en pixels, soit en pourcentage (par rapport à la taille de la fenêtre du navigateur).

Lors de la prescription de tel ou tel indicateur, vous devez porter une attention particulière à la conception. Après avoir spécifié le paramètre, il doit y avoir un signe "égal", après quoi la valeur spécifiée est indiquée entre guillemets.

Quant à la couleur du texte, elle est conçue de la même manière qu'un texte ordinaire au format HTML.

Exemple de conception de table :

;

;

;

;

;

;

;

;

Non.	Nom de famille
1	;	Ivanov

.

Options de ligne

Nous avons donc déjà compris comment créer un tableau en HTML et spécifier ses principaux paramètres. Mais que se passe-t-il si nous devons mettre en évidence une ligne ? Doit-il être formaté différemment du texte principal du tableau ?

Les paramètres de ligne sont écrits dans la balise exactement la même chose que les données du tableau. Les variables suivantes peuvent être définies pour une ligne :

1. Vous connaissez déjà border, bordercolor et bgcolor.

2. Aligner - alignement du texte sur une ligne. Peut prendre les valeurs gauche, centre et droite.

3. Valign - cette balise aligne le texte verticalement. Accepte les valeurs suivantes :

• top - le texte est aligné sur la bordure supérieure ;
• milieu - au centre;
• en bas - le long de la bordure inférieure.

Exemple de format de ligne :

• ;
• Non.;
• Nom de famille;
• .

Options de cellule

Et la dernière chose à laquelle il convient de prêter attention pour ceux qui veulent savoir comment créer un tableau en HTML sont les paramètres des cellules individuelles, à la fois normales et en majuscules. Essentiellement, tout se fait exactement de la même manière que pour une table ou une ligne. La seule chose est que deux éléments plus importants sont ajoutés :

1. Colspan - ce paramètre spécifie le nombre de colonnes que la cellule peut s'étendre.

2. Rowspan - indique le nombre de lignes occupées par cette cellule.

Puisque la conception n’est pas différente de l’écriture d’une ligne, nous ne donnerons pas d’exemple de code.

Conclusions

Faire un tableau n'est pas aussi difficile qu'il y paraît à première vue. L’essentiel lors de l’écriture de son code est la persévérance et l’attention.

Quant à la façon d'insérer un tableau en HTML, il vous suffit de copier et coller son code exactement à l'endroit de votre page où vous pensez qu'il devrait être situé.

N'ayez pas peur d'expérimenter et vous maîtriserez bientôt la technique de création de tableaux à la perfection. Bonne chance!

Un tableau est une collection de données réparties sur des lignes et des cellules. La plupart des cellules contiennent des données tabulaires ; d'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

, il représente un conteneur qui contient tout le contenu de la table.

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

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

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

Et pour les balises , n'hérite pas de ce style car la balise , pas d'étiquette .

L'alignement horizontal du texte dans une colonne de tableau spécifique peut être modifié en spécifiant un style , et pour aligner le contenu dans les cellules du tableau – propriétés 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. colpan.

Exemple

, il crée des cellules de données régulières. Par défaut, baliser le contenu	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 texte gras et aligné au centre. Balises	Et	peut inclure tous les éléments HTML disponibles pour une utilisation dans le corps du document. Premier titre Deuxième titre 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 un tableau imbriqué, vous devez placer le code du tableau que vous souhaitez imbriquer dans n'importe quelle balise.	. Par exemple, prenons le tableau que nous avons créé précédemment et plaçons ce code dans la deuxième cellule de la deuxième ligne : Premier titre Deuxième titre ligne 1, cellule 1 ligne 1, cellule 2 ligne 2, cellule 1 ligne 2, cellule 2 Premier titre Deuxième titre ligne 1, cellule 1 ligne 1, cellule 2 ligne 2, cellule 1 ligne 2, cellule 2 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 Et Attribut de balise Le moyen le plus simple de comprendre comment utiliser le regroupement de lignes et de colonnes est d'utiliser l'exemple d'un tableau Sudoku. La balise col définit les paramètres séparément pour chaque colonne. Peu importe comment écrire dans le code source : Exemple . 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 Table avec cadres Nom Nom de famille Larisa Isaïeva Dmitri Kolesnikov RÉSULTAT: Table sans cadres Table avec cadres Attributs des balises Et fusionner des cellules Exemple furets poids taille les hommes 1,2 – 2,5 kg jusqu'à 70 cm les femelles 0,7 – 1,0kg jusqu'à 40 cm RÉSULTAT: furets poids taille les hommes 1,2 – 2,5 kg jusqu'à 70 cm les femelles 0,7 – 1,0 kg jusqu'à 40 cm Selon la norme HTML5, tous les attributs de tableau précédemment utilisés, tels que frontière, espacement des cellules, rembourrage cellulaire etc. ne sont plus pris en charge et le validateur considère leur utilisation 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. espacement des cellules Par exemple, au lieu de l'attribut pour modifier la distance entre les cellules du tableau, utilisez la propriété espacement des bordures , et pour aligner le contenu dans les cellules du tableau – propriétés Et aligner le texte orientation verticale . Styles CSS pour la conception de tableaux Balises de regroupement de lignes de tableau HTML Exemple Pour créer des tableaux plus complexes, vous pouvez utiliser des balises : Consommation de bière Nom et prénom litres 250 Total 133 Ivanov Ivan Ivanovitch 117 RÉSULTAT: Petrov Pierre Petrovitch Balises de regroupement de colonnes de tableau HTML ou jaune RÉSULTAT: rouge , et pour aligner le contenu dans les cellules du tableau – propriétés N'essayez pas de définir le style
...	n'est l'enfant d'aucune balise

Nom	Prix ​​(RUB)
Paiement à la minute pour le 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. colpan.