HTML5 Form_ Node de puissance Java College

Le rôle du tableau est d'afficher les données à deux dimensions. , il sera introduit plus tard). Ce qui suit introduit principalement des éléments HTML pour la fabrication de tables.

Les éléments de base du formulaire comprennent: Table, TR et TD.

Le tableau représente le tableau du document HTML qui prend en charge l'attribut de bordure pour définir la largeur du cadre du cadre;

TR représente la ligne dans le tableau;

TD représente les cellules du tableau, y compris les attributs suivants:

1) Colspan: le nombre de colonnes que les cellules peuvent traverser;

2) Rowspan: le nombre de lignes que les cellules peuvent traverser;

3) En-têtes: Normes de l'en-tête liée à la tête de la cellule.

 <Bile> <Tr> <Td> Apples </td> <Td> Green </td> <Td> Medium </td> </tr> <Td> Oranges </td> <Td> Orange </td> <td> grand </td> </tr> </ table>

Ce qui précède définit un tableau de deux lignes et de trois colonnes.

L'utilisation de l'attribut de bordure de l'élément de table peut ajouter des bordures à la table.

 <Table Border = 1> <Tr> <Td> Pommes </td> <Td> Green </td> </tdium </td> </tr> <td> oranges </td> <td> orange </ td> <td> grand </td> </tr> </ table>

La bordure par défaut du navigateur n'est pas très belle, et elle doit généralement utiliser CSS pour définir le style de trame pour divers éléments.

L'utilisation des attributs ColSpan et Rowspan de la cellule peut construire des tables irrégulières, de sorte que certaines lignes ou colonnes de la table s'étendent sur plusieurs cellules.

 <Table Border = 1> <Ter> <Th> Mois </ Th> <th> Économies </th> </tr> <td colorpan = 2> janvier </td> </tr> <ter> <td colorpan = 2> Février </td> </tr> </ Table>

Ce qui suit est un exemple de cellule traversant plusieurs lignes:

 <Table Border = 1> <Ter> <Th> Mois </ Th> <th> Économies </th> </tr> <Td> janvier </td> <td> 100,00 $ </td> <td Rowspan = 2> 50 $ </td> </tr> <Td> Février </TD> <TD> 10,00 $ </TD> </BABLE>

L'élément TH est utilisé pour ajouter un en-tête à la forme, qui peut être utilisé pour distinguer les données et les explications des données. L'élément prend en charge les attributs suivants:

1) Colspan: le nombre de colonnes que les cellules peuvent traverser;

2) Rowspan: le nombre de lignes que les cellules peuvent traverser;

3) Portée: définir la méthode d'association des données de tête avec les données unitaires;

3) En-têtes: la liste des ID en en-tête séparée par l'espace est fournie avec une information d'en-tête pour la cellule de données.

 <Bile> <Ter> <Th> Rank </th> <th> name </th> <th> couleur </th> </th> </tr> <th> favori: not / td> <td> Orange </td> <td> grand </td> </tr> <ter> <th> 3e favori: </th> <td> pomegraanate </td> <td> une sorte de Greeny-Red </ TD> <TD> Varie de moyen à grand </td> </tr> </ Table>

TH et TD peuvent être utilisés dans une ligne.

L'utilisation des attributs des en-têtes de TD peut être associée aux cellules. L'attribut des en-têtes peut être la valeur d'attribut ID d'une ou plusieurs cellules TH:

 <Table Border = 1 Width = 100%> <Ter> <th id = name> name </ th> <th id = e-mail> e-mail </th> <th id = téléphone> téléphone> téléphone </t> <th Id = adresse> adresse </ th> </tr> <ter> <td headers = name> George Bush </td> <td Headers = Email> quelqu'[email protected] </td> <td Headers = Phone> + 789451236 </td> <td Headers = Address> Fifth Avenue New York, USA </td> </tr> </s table>

L'utilisation d'attributs ColSpan et Rowspan de TH peut construire des tables complexes.

 <Table border = 1> <tr> <th Colspan = 2> Company aux États-Unis </th> </tr> <th> nom </th> <th> addr </th> </tr> tr> <td > Apple, Inc. </td> <TD> 1 Infinite Loop Cupertino, CA 95014 </td> </tr> <Td> Google, Inc. </td> 1600 Amphitheatre Parkway Mountain View, CA 94043 </td> </tr> </ table>

Vous pouvez utiliser les éléments thead, tbody et tfoot pour ajouter des structures au formulaire, afin que vous puissiez ajouter un style CSS à chaque partie du formulaire pour devenir plus facile.

1) Thème de table

L'élément TBOBY représente la ligne entière du thème de la forme, à l'exclusion de l'en-tête (représentation de l'élément) et du scooter (représentation d'élément TFOOT).

Notez que la plupart des navigateurs inséreront automatiquement l'élément TBODY lors du traitement des éléments de la table.

2) Formez l'en-tête

L'élément est utilisé pour marquer la ligne de titre du formulaire. S'il n'y a pas de l'élément de tête, tous les éléments TR seront considérés comme faisant partie du sujet de la forme.

3) Ajouter une note de bas de page

Les éléments TFOOT sont utilisés pour marquer les lignes de formation. Avant HTML5, les éléments TFOOT ne peuvent apparaître qu'avant l'élément TBODY, et dans HTML5, l'élément TFOOT est autorisé à placer l'élément TFOOT après TBOD.

Vous trouverez ci-dessous un exemple complet, qui utilise des éléments TBODY, THEAD et TFOOT.

 <Bile> <d> <Ter> <Th> Rank </th> <th> Name </th> <th> Color </th> <th> Taille </th> </thead> </thead> < TFOOT> <TER> <TH> RANK </ TH> <TH> NAME </ TH> <TH> COULEUR </ TH> </ TH> </TR> </ TFOOT> <TR> <TER> <TH> Favorite: <h> <td> pommes </td> <td> vert </td> <em> moyen </td> </tr> <tr> <th> 2e favori: </th> <td> oranges </td> <td> orange </td> <td> grand </td> </tr> <tr> <th> 3e favori: </th> <Td> Pomegraanate </td> <td> un type de Greeny-Red </td> <td> varie de moyen à grand </td> </tr> </tbody> </s table>

L'utilisation de l'élément de légende peut définir un titre pour le formulaire et l'associer au formulaire.

 <Bile> <Webles> Résultats de l'étude des fruits de 2011 </ Légende> <Thead> <Tr> </ Th> <th> Nom </th> </th> <th> Taille </th> </tr> </ thead> <tfoot> <ter> <th> Rank </th> <th> name </th> <th> couleur </th> <th> size </th> not> <ter> <th> 2e favori: </th> <td> orange </td> <td> orange </td> <td> grand </td> </tr> <trd Favorite: </th> <Td> Palegranate </td > <td> Une sorte de Greeny-Red </td> <td> varie de moyen à grand </td> </tbody> </s table>

Un formulaire ne peut contenir qu'un élément de légende, pas le premier élément du formulaire, mais il est toujours affiché au-dessus du tableau.

Dans le tableau, parce que le tableau est formé par la ligne, le fonctionnement de la colonne n'est pas pratique, comme un style de définition d'une colonne de la forme. Vous pouvez utiliser l'élément Colgroup pour spécifier le groupe.

 <Html> <A-Head> <Myle> # Colryp1 {fond-Color: Red} # Colryp2 {Background-Color: Green; = 1. </td> <td> $ $ </td> </tr> </ table> </ body> </html>

L'exemple ci-dessus spécifie le groupe de deux colonnes. L'attribut Span de ColGroup spécifie les extensions.

 <Html> <A-the-head> <style> # Colryp1 {fond-Color: Red} # COL3 {Background-Color: Green; Border = 1> <Colgroup ID = ColorP1> <Col id = Col1and2 Span = 2 /> <Col Id = Color3 /> </ Colorp> <Ter> </ Th> <th> Title </ Th> <Th> Price </th> </tr> <l> <Td> 3476896 </td> <td> Mon premier HTML </TD> <TD> $ 53 </td> </tr> <Td> 2489604 </td> <TD> Mon premier CSS </TD> <TD> $ $ </td> </s table> </ body> </html>

Ce qui précède est tout le contenu de cet article.