Premiers pas avec HTML : tableaux

HTML, abréviation de HyperText Markup Language. C'est une norme qui sert de référence pour le développement de pages web dans ses différentes versions, définit une structure de base et un code (appelé code HTML) pour définir le contenu d'une page Web, tel que du texte, des images, des vidéos, entre autres. Pour commencer à comprendre comment est définie la structure de ce langage, dans ce tutoriel nous commencerons par connaître les étiquettes avec lesquelles les tableaux sont manipulés, qui sont très utiles lors de la construction des structures de newsletters et mailings principalement.
L'objectif de ce tutoriel est de donner une explication qui aide les graphistes à comprendre de la manière la plus simple possible, la structure et la logique des documents HTML pour acquérir les connaissances de base qui leur permettront de générer des fichiers dans cette langue.

Exigences

- Posséder un éditeur de code comme Dreamweaver CS6, Bloc-notes ++, Texte sublime entre autres disponibles sur Internet.
- Avoir un navigateur Web installé tel que Chrome, Firefox, Opera, Safari, Edge ou Internet Explorer.
Étape 1 : Connaître les étiquettes pour créer des tableaux
avec ce label on définit le début du tableau dans la structure HTML.
permet la création d'une ligne pour le tableau
représentent l'en-tête des colonnes, ces colonnes sont constituées de cellules.
<>> est la représentation des cellules qui seront situées dans les lignes du tableau.
Ce sont toutes les étiquettes dont nous aurons besoin pour créer les tables. Dans l'étape suivante, nous apprendrons comment elles sont déclarées dans le code et leur ordre.
Étape 2 : Déclaration logique des étiquettes.
Il est important de savoir qu'en HTML la grande majorité des balises doivent être ouvertes, c'est-à-dire juste au moment où on les déclare et aussi qu'elles doivent être fermées, l'exemple suivant illustre ce concept :

Comme vous pouvez le voir, chaque étiquette doit avoir son ouverture et sa fermeture. Ils diffèrent principalement par la barre oblique "/" avec laquelle l'étiquette se ferme. A chaque création d'une balise, il est obligatoire de déclarer sa fermeture de la même manière.
Etape 3 : Déclaration hiérarchique des labels.
L'étiquette C'est le premier qui est déclaré pour indiquer la création d'un tableau, par conséquent pour commencer à créer les cellules qui contiendront les informations à afficher.
Les tableaux sont constitués de colonnes et de lignes.

En prenant soin de l'ordre hiérarchique que doit avoir chaque étiquette, nous allons créer le tableau et introduire les lignes dont nous aurons besoin pour le tableau dans l'image ci-dessous :

Le code dans le tableau devrait ressembler à ceci :

Bien que les lignes du tableau soient déjà définies, il est nécessaire de créer les cellules qui composent les colonnes du tableau. L'image ci-dessous illustre ce concept :

Le code dans le tableau devrait ressembler à ceci :

Étape 4 : Ajouter du contenu aux cellules
Chaque balise [couleur = # 7030a0] [/ color] équivaut à une cellule de notre tableau, c'est donc là que les informations peuvent être ajoutées. Nous allons changer dans la première étiquette [couleur = # 44546a] [/ color] a déclaré la ligne tout [color = # 7030a0] [/ color] par balises d'en-tête [color = # 002060][/Couleur]. Dans la [couleur = # 7030a0][/ color] du reste des lignes, nous ajoutons un exemple de contenu. Le code HTML Ça devrait ressembler à ça:

 
 
 
Article
 
nom
 
Le nom
 

 
 
1
 
Pierre
 
Des roses
 

 
 
2
 
John
 
Sources
 

Étape 5 : Enregistrez le document dans HTML et voir le fichier
Dans le programme d'édition de code, nous allons dans le menu Fichier / Enregistrer lorsque nous enregistrons le document au format .html

Plus tard, nous ouvrons le document dans le navigateur de notre préférence :

Le tableau que nous avons créé devrait ressembler à l'image ci-dessous.

Jusqu'à présent, nous avons appris le nom et la fonction des étiquettes HTML construire des tableaux, leur ordre hiérarchique, leur disposition logique et leur ajouter du contenu. Nous sommes maintenant prêts à ajouter des attributs graphiques aux tableaux.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif