Tutoriel HTML: 10 balises liées à la table pour HTML

Sur la base de certaines de mes pratiques récentes et après avoir communiqué avec certains lecteurs sur l'utilisation des formulaires HTML, j'ai décidé d'écrire cet article. Dans l'ensemble, j'ai remarqué qu'ils avaient un dégoût préconçu de l'utilisation de tables en raison d'informations trompeuses. En fait, beaucoup de gens diront que je vois la déclaration que je ne devrais jamais utiliser de formulaires, mais c'est absolument faux! Cette suggestion est uniquement d'utiliser des tables HTML pour définir la disposition de la page Web, mais les tables sont parfaites pour une disposition pratique des lignes et des colonnes d'informations sur les données, et si vous devez afficher des données de colonne de table sur une page, vous devez les utiliser! pourquoi pas? Cependant, dans ce cas, certaines personnes ignorent l'existence de certaines balises HTML utilisées pour les tables et ne savent pas comment les utiliser correctement.

HTML a 10 balises liées à la table. Voici une liste avec une introduction, mais d'abord, le document doit être correctement défini ci-dessous HTML 4.01 / XHTML 1 ou HTML 5:

• <figention> Définissez le titre de la table (4, 5)
• <Col> Définir les attributs pour les colonnes d'une table (4, 5)
• <Colgroup> Définit le regroupement des colonnes de table (4, 5)
• <table
• <Tbody> Définissez le corps de la table (4, 5)
• <TD> Définissez une cellule (4, 5)
• <Tfoot> Définissez la note de table (en bas) (4, 5)
• <h> Définissez l'en-tête de la table (4, 5)
• <Adgin> Définit l'en-tête de la table (4, 5)
• <tr> définit les lignes de la table (4, 5)

Une structure de table de base est la suivante:

Il contient un titre, une tête, un corps et un fond. L'ordre correct des éléments HTML est:

1. <ballage>
2. <légende>
3. <adal>
4. <Tfoot>
5. <tbody>

Vous pouvez également utiliser <Col> et <Colgroup> pour définir des colonnes de tables ou de colonnes de groupe:

1. <ballage>
2. <légende>
3. <Colgroup>
4. <col>
5. <adal>
6. <Tfoot>
7. <tbody>

Voici un exemple correct de la structure du tableau:

 <Table Border = 1> <Epingon> TABLE TRIMENTS ICI </ TENSIGNE> <Colgroup Span = 1 Style = Background: #dedede; /> <Colgroup Span = 2 Style = Background: #efeFef; /> <! - Table Header -> <Thead> <Tr> <th> Têtes 1 </ Th> <th> Table 2 </th> <th> Head 3 </th> </tr> </ thead> <! - Tableau pied de page -> <tfoot> <tr> <Td> pied 1 </td> <td> pied 2 </td> <td> pied 3 </td> </tfoot> <! - Table Body -> <Tbody> <tr> <td> a </td> <td> b </td> <td> c </td> </tr> <tr> <td> d </td> <td> e </td> <td> f </td> </tr> </tbody> </sable>

Les résultats du navigateur sont présentés dans la figure ci-dessous:

Quelques conseils sur le formulaire

• Selon l'explication et l'utilisation de W3Schools, dans une définition de table, l'élément <tfoot> doit apparaître avant <TBOBY> , afin que le navigateur puisse rendre les notes de table avant d'accepter toutes les données. De plus, si ce n'est pas cet ordre, il ne sera pas validé par HTML4 et XHTML de W3C, quel que soit le type de DTD que vous déclarez.
• Dans HTML 4.01, les propriétés d'alignement et de bgcolor de la table ne sont pas privilégiées, donc aucun des attributs de table n'est pris en charge dans HTML 5 (en fait, les propriétés Align et BgColor ne sont plus prises en charge dans XHTML 1.0 strict dtd);
• Tous les navigateurs traditionnels prennent en charge la balise <Colgroup>, mais Firefox, Chrome et Safari ne prennent en charge que les attributs de portée et de largeur de l'élément Colgroup;
• Cellules vides: Afficher | Masquer en CSS peut définir si une cellule vide affiche une bordure. Notez que cela doit être défini dans le tableau au lieu de TD / Th . Ce problème est plus susceptible d'être rencontré dans IE6;
• Border-Collapse: effondrement | Se séparé en CSS peut déterminer si la bordure d'une table est fusionnée dans une frontière;
• La propriété d'espacement des frontières dans CSS est équivalente à la propriété d'espacement des cellules de la table.

Afin de réaliser que le modèle de développement de la performance et de la séparation de structure préconisée maintenant, l'observation frontale recommande que toutes les choses liées à la couche de présentation dans la page soient contrôlées par CSS et n'utilisent pas les attributs fournis par HTML pour contrôler les performances de la page, et le tableau est le plus simple à ignorer.

Pour plus de détails sur les tables, veuillez consulter la documentation W3C: W3 Introduction aux tables

Enfin, je vous laisse une question très simple. Quel attribut de CSS est équivalent à l'attribut CELLPadding de la table?