Dans le monde moderne d'aujourd'hui, presque tout est en ligne, qu'il s'agisse de shopping, de vendre, de gérer des comptes, etc. en raison de laquelle une énorme quantité de données est nécessaire pour être organisée. Mais ici, la question est de savoir comment organiser cette énorme quantité de données? La réponse à ce problème est donc très simple, nous pouvons organiser des données à l'aide de tables. Dans HTML, les tables jouent un rôle vital dans l'organisation des données qui améliore l'interactivité de l'interface.
Cet article vous guide pour créer une table en HTML et sert les résultats suivants: cet article le dira
Comment créer une table en HTML
Cap de table
Tableau de cellules et de portable
Table Rowspan et Colspan
Légende de la table
En-tête, corps et pied de page pour la table
Comment créer une table en HTML
Une table HTML est utilisée pour organiser les données en lignes et colonnes. Pour créer une table dans HTML, nous utilisons
Tag et pour créer des lignes dans une table
La balise est utilisée pour créer des cellules dans un tableau que nous utilisons
étiqueter. L'exemple suivant vous donne une vue claire de la façon de créer une table dans HTML.
Exemple
TABLEAU
Beurre
3 kilogrammes
Lait
3 litres
Dans l'exemple ci-dessus, nous créons une table simple avec deux lignes et cellules. Une table est créée en utilisant
Tag avec l'attribut de bordure. Puis à l'intérieur d'un
Tag que nous utilisons
Tag pour créer une ligne de table et à l'intérieur
Tag que nous utilisons
Tag pour créer des colonnes à l'intérieur d'une ligne.
Sortir
Comme vous le voyez, nous avons obtenu une table avec deux rangées et colonnes comme prévu.
Cap de table
Nous utilisons
Tag à insérer en tête dans une table. L'exemple suivant l'explique clairement
Exemple
TABLEAU
Produit
Quantité
Beurre
3 kilogrammes
Lait
3 litres
Dans cet exemple, nous avons utilisé le
Tag pour donner des titres à la colonne.
Sortir
C'est ainsi que nous ajoutons une rubrique à une table.
Tableau de cellules et de portable
Ces deux attributs sont utilisés pour l'ajustement de l'espacement cellulaire.
Espace des cellules: Cet attribut ajoute des espaces entre les cellules.
CELLPADDING: Cet attribut spécifie la distance de la teneur en cellule de la bordure cellulaire.
Ces attributs peuvent être utilisés avec le
Tag uniquement. L'exemple suivant vous aide à mieux comprendre ces attributs.
Exemple 1
Produit
Quantité
Beurre
3 kilogrammes
Lait
3 litres
Dans cet exemple, nous utilisons l'attribut de celle de cellules dans le
Tag et définissez sa valeur sur 10 qui ajoute des espaces entre les cellules de la table.
Sortir
La sortie montre clairement le résultat de l'espacement des cellules qui ajoute des espaces entre les cellules.
Exemple 2
Le code suivant utilise le portable à une cellule de table.
Produit
Quantité
Beurre
3 kilogrammes
Lait
3 litres
Dans cet exemple, nous utilisons l'attribut CellPadding dans
Tag et définissez sa valeur sur 10 qui ajoute des espaces entre le contenu cellulaire et la frontière cellulaire du tableau.
Sortir
Cette sortie montre le résultat pour Cellpadding.
Table Rowspan et Colspan
Ces deux attributs sont utilisés pour fusionner les lignes et les colonnes.
Rowspan: Deux lignes ou plus peuvent être fusionnées en utilisant cet attribut.
Colspan: Deux colonnes ou plus peuvent être fusionnées en utilisant cet attribut.
Ces attributs peuvent être utilisés avec le
Tag uniquement. L'exemple suivant vous aide à mieux comprendre ces attributs.
Exemple
Produit
Les saveurs
Lait
Amande
mangue
Chocolat
Ce sont des saveurs exclusives
Dans l'exemple ci-dessus, nous utilisons des attributs de lignes et de colspan avec
Tag pour fusionner les lignes et les colonnes dans une table.
Sortir
La sortie ci-dessus montre que les trois bruns sont fusionnés en raison de Rowspan et que deux colonnes sont fusionnées en raison de l'utilisation de Colspan
Légende de la table
En html La balise est utilisée pour donner une légende à un tableau. La légende donne une information résumée sur le tableau. L'exemple suivant vous aide à mieux comprendre.
Exemple
Information sur le produit
Produit
Les saveurs
Lait
Amande
mangue
Chocolat
Ce sont des saveurs exclusives
Dans la sortie ci-dessus, nous utilisons Tag pour ajouter une légende avec une table en html.
Sortir
Cette sortie montre que Information sur le produit est affiché au-dessus du tableau en raison du étiqueter.
Tableau En-tête, corps et pied de page
Les tableaux peuvent être distribués en trois parties si des données complexes doivent être organisées. Ces parties sont en tête, pied de page et un corps. La balise est utilisée pour créer l'en-tête d'une table, la balise est utilisée pour créer le pied de page de la table et
La balise contient le contenu principal de la table. L'exemple suivant vous aide à mieux comprendre.
Exemple
Produit
Les saveurs
Lait
Amande
mangue
Chocolat
Ce sont des saveurs exclusives
Dans l'exemple ci-dessus, nous utilisons Pour spécifier l'en-tête de la table, puis nous utilisons Pour spécifier le contenu principal du corps puis est utilisé pour spécifier le pied de page de la table.
Sortir
La sortie montre que l'en-tête du tableau est écrit à l'intérieur de la balise, le nom et la description du produit sont écrits à l'intérieur
Tag tandis que contient un court message.
Conclusion
En html,
La balise est enroulée
Tag et
Tag pour créer une table, tandis que
TAG Spécifie les lignes et
La balise spécifie les colonnes de la table. Principalement, cet article vise à démontrer comment créer une table dans HTML. De plus, en outre, nous avons également expliqué des exemples sur l'espacement des cellules, le padding de cellules, la diffusion de lignes, le spanning de la colonne, la caption de table, la table-tête, la table-corps et la table-foot.
