Création et définition d'une table de base pour les pages Web HTML5 et CSS3 - les mannequins

Parfois, vous rencontrerez des données qui correspondent le mieux dans un format tabulaire au lieu d'une liste. HTML5 prend en charge plusieurs balises de table pour ce type de travail. Ici, vous pouvez voir une table très basique.

Parfois, la meilleure façon de montrer des données de manière significative est de les organiser dans un tableau. HTML définit une table avec l'étiquette. La table contient un certain nombre de lignes de table (définies avec la balise). Chaque ligne de table peut comporter un certain nombre de balises de données de table ( ) ou d'en-têtes de table ( ).

Comparez la sortie avec le code de basicTable. html qui le crée:

basicTable. html

Un tableau de base

HTML Super Héros


 Héros 
 Puissance 
 Némésis 


 Le HTML 
 Conformité aux normes 
 Sloppy Code Boy 


 Capitaine CSS 
 Super -layout 
 Lord déprécié 


 Navigateur Femme 
 Méga-compatibilité 
 Ugly Code Monster

Héros	Puissance	Némésis
Le HTML	Conformité aux normes	Sloppy Code Boy
Capitaine CSS	Super -layout	Lord déprécié
Navigateur Femme	Méga-compatibilité	Ugly Code Monster

Le tableau HTML est défini avec la paire. Cela a beaucoup de sens de mettre en retrait et d'espacer votre code pour que vous puissiez voir la structure de la table dans le code. Juste en regardant le code, vous pouvez deviner que la table se compose de trois lignes et chaque ligne se compose de trois éléments.

Dans un traitement de texte, vous créez généralement un tableau vide en définissant le nombre de lignes et de colonnes, puis le remplissez. En HTML, vous définissez la table ligne par ligne et les éléments de chaque ligne déterminent le nombre de colonnes. C'est à vous de vous assurer que chaque rangée a le même nombre d'éléments.

Par défaut (dans la plupart des navigateurs, de toute façon), les tableaux n'affichent pas leurs bordures. Si vous voulez voir les bordures de table de base, vous pouvez activer l'attribut de la table. (Un attribut est un modificateur spécial que vous pouvez attacher à certaines balises.)

Cette balise crée une table et spécifie qu'elle aura une bordure de taille. Si vous omettez l'activité, certains navigateurs affichent une bordure et d'autres non. Vous pouvez définir la valeur de la bordure sur ou à un plus grand nombre. Le plus grand nombre fait une plus grande frontière.

Définir une bordure de tableau est une bonne idée car vous ne pouvez pas compter sur les navigateurs pour avoir la même valeur par défaut. De plus, la valeur de la bordure est toujours entre guillemets. Avec CSS, vous pouvez ajouter des bordures plus complexes et intéressantes que ce simple attribut ne le permet.

Comment ajouter votre première ligne

Après avoir défini une table, vous devez ajouter des lignes. Chaque rangée est indiquée par une paire.

À l'intérieur de l'ensemble, vous avez besoin de données de table. La première rangée se compose souvent de en-têtes de tableau. Ces cellules spéciales sont formatées différemment pour indiquer qu'elles sont des étiquettes plutôt que des données.

Les en-têtes de tableau ont une mise en forme par défaut pour vous aider à vous souvenir qu'ils sont en en-tête, mais vous pouvez changer leur apparence. Vous pouvez modifier l'apparence de l'en-tête du tableau de toutes sortes de façons. Définissez l'en-tête du tableau de sorte que lorsque vous découvrirez le formatage et que vous décidiez de rendre chartreuse toutes les en-têtes de votre table, vous saurez où se trouvent tous les en-têtes de table dans le code HTML.

Mettez vos en-têtes à l'intérieur de l'ensemble. Si votre table contient trois colonnes, votre première ligne peut commencer comme ceci:

Placez le texte que vous voulez voir apparaître dans les en-têtes de table entre les éléments et. Le contenu apparaît dans l'ordre dans lequel ils sont définis.

Les titres ne doivent pas obligatoirement figurer sur la rangée supérieure. Si vous voulez des titres sur la gauche, mettez simplement une paire comme premier élément de chaque rangée. Vous pouvez avoir des en-têtes à la fois en haut et à gauche, si vous le souhaitez. En fait, vous pouvez avoir des en-têtes n'importe où, mais il est généralement judicieux de ne placer les en-têtes qu'en haut ou à gauche.

Comment créer vos lignes de données

L'étape suivante consiste à créer une autre ligne. Les lignes de données sont similaires à la ligne d'en-tête, sauf qu'elles utilisent des paires plutôt que des paires pour contenir les éléments de données. Généralement, un tableau à trois colonnes comporte des lignes vides qui ressemblent à ceci:

Placez les éléments de données à l'intérieur des segments et vous êtes prêt à partir.

Comment créer des tables dans l'éditeur de texte

Certaines personnes pensent que les tableaux sont une bonne raison d'utiliser les éditeurs WYSIWYG (ce que vous voyez), car ils pensent qu'il est difficile de créer des tableaux en mode texte. Vous devez planifier un peu, mais il est vraiment très rapide et facile de construire un tableau HTML sans outils graphiques si vous suivez ce plan:

Planifiez à l'avance.

Sachez combien de lignes et de colonnes figureront dans la table. Esquisser sur papier d'abord pourrait être utile. Changer le nombre de lignes plus tard est facile, mais changer le nombre de colonnes peut être très pénible une fois que le code a été écrit.
Créez les en-têtes.

Si vous voulez commencer avec une table standard, commencez par créer la ligne d'en-tête. Enregistrez, vérifiez et validez. Vous ne voulez pas que les erreurs se multiplient lorsque vous ajoutez plus de complexité. Cette ligne de titre indique le nombre de colonnes dont vous aurez besoin.
Construire un exemple de ligne vide.

Créez une ligne d'échantillons avec le nombre correct d'éléments avec une paire par ligne. Construisez un ensemble et utilisez copier et coller pour copier cette cellule de données autant de fois que vous le souhaitez. Assurez-vous que le nombre de paires est égal au nombre de jeux dans la ligne de titre.
Copiez et collez la ligne vide pour créer autant de lignes que nécessaire.
Enregistrer, afficher et valider.

Assurez-vous que tout semble correct et validez correctement avant de vous donner beaucoup d'efforts pour ajouter des données.
Remplissez le tableau avec les données dont vous avez besoin.

Passez ligne par ligne, en ajoutant les données entre les paires.
Testez et validez à nouveau pour vous assurer que vous n'avez pas accidentellement cassé quelque chose.