Quel est le but de la cellule de table dans Tailwind

Quel Est Le But De La Cellule De Table Dans Tailwind



Tout en traitant de grands ensembles de données, il est important de créer un système de compréhension. Cela aide à gérer toutes les valeurs et nous permet de tirer des conclusions précieuses de nos données collectées et de prendre des décisions éclairées. Il existe de nombreuses techniques efficaces de représentation des données et l'une des plus importantes est sous forme de tableaux.

But de Table-Cellule

Une cellule de table est une entrée individuelle dans une table qui est composée d'un certain nombre d'autres cellules comme elle-même. L'objectif principal d'une cellule de tableau est d'enregistrer les données de manière ordonnée pour une compréhension et une compréhension plus faciles. Il signifie une position particulière dans une table dans laquelle une entrée est contenue.

Types de cellules de tableau

Un tableau en HTML comporte principalement deux types de cellules. Ceux-ci sont ' Cellules d'en-tête ' et ' Cellules de données ”. De plus amples détails sur leurs différences et similitudes sont donnés ci-dessous.





Cellules d'en-tête

Les cellules d'en-tête sont représentées par le ' ” dans HTML Tailwind CSS. Ceux-ci constituent les titres des colonnes d'un tableau. Les en-têtes définissent ce que seront toutes les valeurs dans la colonne particulière. Des exemples d'en-têtes sont le nom, l'adresse e-mail, le numéro de contact, le numéro de sécurité sociale, etc.



La cellule d'en-tête d'un tableau sera en haut de la colonne et les entrées ci-dessous seront les cellules de données. Ces cellules ont également une mise en forme spécifique pour les distinguer des cellules de données qui suivent ci-dessous. Les cellules d'en-tête sont spécifiées pour avoir une taille de police plus grande et des lettres en gras pour ajouter une signification au contenu des cellules de données.



Exemple
Dans le code ci-dessous, nous avons créé une cellule d'en-tête de tableau via la balise «  » :



< tableau >
< tête >
< tr >
< e > Cellule d'en-tête 01 < / e >
< / tr >
< / tête >
< / tableau >

Dans ce bloc de code :

  • Créez un tableau via la balise ''.
  • Maintenant, utilisez la balise '
    • ».
  • Enfin, fermez respectivement les balises '
    • ', '' et '
    ' pour créer une cellule d'en-tête de tableau.
  • Ensuite, définissez l'entrée de cellule ' Cellule d'en-tête 01 » en utilisant la balise «
    		• » dans la balise «
    ' pour compléter la cellule du tableau.

Sortir



Comme on le voit, la cellule d'en-tête est affichée en gras par défaut.

Cellules de données

Les cellules de données sont représentées par le '

” dans HTML Tailwind CSS. Ces cellules contiennent toutes les informations d'un tableau. Celles-ci sont répertoriées sous les cellules d'en-tête et contiennent des données pour toutes les entrées d'un en-tête particulier. Par exemple, si la cellule d'en-tête est intitulée 'Nom', les cellules de données en dessous contiendront les noms de tous les membres du personnel pour lesquels les données sont enregistrées.

Les cellules de données ont également un formatage particulier. Ceux-ci ont une taille de police plus petite que les cellules d'en-tête et contiennent du texte brut ou des chiffres, selon les exigences. C'est ainsi que les cellules de données sous la cellule d'en-tête 'Nom' auront les noms des personnes concernées, par exemple John, David, Michael et James.

Exemple
Le code pour créer une cellule de données Table en utilisant le '

” tag est donné ci-dessous: < diriger >
< style >
tableau {
border-collapse : effondrement ;
}
td {
frontière : 1px noir solide;
rembourrage : 10px ;
}
< / style >
< / diriger >
< corps >
< tableau >
< tr >
< td >Table-Cellule< / td >
< / tr >
< / tableau >

Les étapes suivantes expliquent le code pour créer une cellule de données Table :

  • La balise «