So verwenden Sie Tabellenüberschriften in Tailwind

So Verwenden Sie Tabellenuberschriften In Tailwind



A ' Tabellenüberschrift „wird verwendet, um einer bestimmten Tabelle einen Titel oder Namen zu geben. Diese Beschriftung erleichtert dem Benutzer die Rückkehr zur Zieltabelle, wenn er große Datenmengen in zahlreichen Tabellen verarbeitet. Bei den Bildunterschriften handelt es sich um Kurztitel, die zeigen, was die in der Tabelle enthaltenen Daten bedeuten und worauf sie sich beziehen. Die Beschriftung kann je nach Formatierungsthema des Benutzers entweder oben oder unten in der Tabelle platziert werden.

Welche Bedeutung haben Tabellenüberschriften?

„Tabellenüberschriften“ werden verwendet, um Tabellen Titel zu geben, sodass der Benutzer definieren kann, was jede Tabelle bedeutet und wie die darin enthaltenen Daten verwendet werden sollen. Überschriften können auch dazu beitragen, die Tabellen auf einer Webseite zu nummerieren, um die darin enthaltenen Daten leichter zugänglich zu machen.

Überschriften geben den genauen Kontext zu jeder Tabelle in einem Dokument oder einer Webseite an, wenn es eine große Anzahl von Tabellen gibt. Darüber hinaus stellen strukturierte Überschriften sicher, dass die Leser schnell verstehen, welche Daten in den einzelnen Tabellen enthalten sind.





Wie verwende ich eine Tabellenüberschrift in Tailwind CSS?

In Tailwind CSS wird einer Tabelle eine Beschriftung hinzugefügt, indem „ ' Schild. Diese Beschriftung gibt einen Titel und weitere Informationen zu den Daten in der Tabelle an.



Beispiel: Hinzufügen einer Tabellenüberschrift sowohl oben als auch unten in der Tabelle
Im folgenden Code fügen wir oben und unten in der Tabelle eine „Beschriftung“ wie folgt hinzu:



< Tisch >
< Tisch Klasse = „min-w-full border border-gray-300 Divide-y Divide-Gray-300“ >
< Kopf >
< tr >
< Th Klasse = „py-2 px-4 bg-gray-100 border-b“ >
Name
< / Th >
< Th Klasse = „py-2 px-4 bg-gray-100 border-b“ >
Email
< / Th >
< Th Klasse = „py-2 px-4 bg-gray-100 border-b“ >
AUSWEIS
< / Th >
< Th Klasse = „py-2 px-4 bg-gray-100 border-b“ >
Kontakt
< / Th >
< / tr >
< / Kopf >
< Tbody >
< tr >
< td Klasse = „py-2 px-4 border-b“ > James < / td >
< td Klasse = „py-2 px-4 border-b“ > james@tsl.com < / td >
< td Klasse = „py-2 px-4 border-b“ > 61101-1234567-8 < / td >
< td Klasse = „py-2 px-4 border-b“ > 123-456-7890 < / td >
< / tr >
< tr >
< td Klasse = „py-2 px-4 border-b“ > Michael < / td >
< td Klasse = „py-2 px-4 border-b“ > michael@tsl.com < / td >
< td Klasse = „py-2 px-4 border-b“ > 61101-8765432-1 < / td >
< td Klasse = „py-2 px-4 border-b“ > 098-765-4321 < / td >
< / tr >
< tr >
< td Klasse = „py-2 px-4 border-b“ > David < / td >
< td Klasse = „py-2 px-4 border-b“ > David@TSL.com < / td >
< td Klasse = „py-2 px-4 border-b“ > 54791-1234567-8 < / td >
< td Klasse = „py-2 px-4 border-b“ > 123-786-4290 < / td >
< / tr >
< tr >
< td Klasse = „py-2 px-4 border-b“ > Peter < / td >
< td Klasse = „py-2 px-4 border-b“ > peter@tsl.com < / td >
< td Klasse = „py-2 px-4 border-b“ > 54300-1234567-8 < / td >
< td Klasse = „py-2 px-4 border-b“ > 611-239-7890 < / td >
< / tr >
< / Tbody >
< Untertitel >
Persönliche Daten der Mitarbeiter
< / Untertitel >
< / Tisch >
< Untertitel >
Name der Firma
< / Untertitel >

Befolgen Sie diese Schritte im obigen Code: