So verwenden Sie Tabellenüberschriften in Tailwind

A „Tabellenüberschrift„“ wird verwendet, um einer bestimmten Tabelle einen Titel oder Namen zu geben. Diese Überschrift erleichtert dem Benutzer die Rückkehr zur Zieltabelle, wenn er große Datenmengen in mehreren Tabellen verarbeitet. Die Überschriften sind kurze Titel, die zeigen, was die in der Tabelle enthaltenen Daten bedeuten und worauf sie sich beziehen. Die Überschrift kann je nach Formatierungsthema des Benutzers entweder über oder unter der Tabelle platziert werden.

Welche Bedeutung haben Tabellenbeschriftungen?

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

Beschriftungen geben jeder Tabelle in einem Dokument oder einer Webseite mit vielen Tabellen einen genauen Kontext. Darüber hinaus stellen strukturierte Beschriftungen sicher, dass die Leser schnell verstehen, welche Daten in jeder Tabelle enthalten sind.

Wie verwende ich eine Tabellenüberschrift in Tailwind CSS?

In Tailwind CSS wird einer Tabelle eine Überschrift mit dem „”-Tag. Diese Überschrift gibt einen Titel und weitere Informationen zu den Daten in der Tabelle an.

Beispiel: Hinzufügen einer Tabellenüberschrift am oberen und unteren Rand der Tabelle

Im folgenden Code fügen wir oben und unten in der Tabelle eine „Überschrift“ wie folgt hinzu:

<Tisch>
<Tisch Klasse = „min-w-full border border-gray-300 divide-y divide-gray-300″>
<thead>
<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>
thead>
<Körper>
<tr>
<td >Jamestd>
<td Klasse=“py-2 px-4 border-b“> [email protected] td>
<td Klasse = „py-2 px-4 border-b“> 61101-1234567-8 td>
<td > 123-456-7890 td>
tr>
<tr>
<td > Michael td>
<td Klasse=“py-2 px-4 border-b“> [email protected] td>
<td Klasse = „py-2 px-4 border-b“> 61101-8765432-1 td>
<td > 098-765-4321 td>
tr>
<tr>
<td > David td>
<td Klasse=“py-2 px-4 border-b“> [email protected] td>
<td Klasse = „py-2 px-4 border-b“> 54791-1234567-8 td>
<td > 123-786-4290 td>
tr>
<tr>
<td > Peter td>
<td Klasse=“py-2 px-4 border-b“> [email protected] td>
<td Klasse = „py-2 px-4 border-b“> 54300-1234567-8 td>
<td > 611-239-7890 td>
tr>
Körper>
<Untertitel>
Persönliche Informationen der Mitarbeiter
Untertitel>
Tisch>
<Untertitel>
Name der Firma
Untertitel>

Befolgen Sie diese Schritte im obigen Code:

  • Erstellen Sie eine Tabelle mit dem „“ Etikett.
  • Legen Sie die Tabellenformatierung über die Utility-Klasse fest.
  • Definieren Sie die Tabellenüberschriften „Name“, „E-Mail“, „ID“ und „Kontakt“ über die „“ Etikett.
  • Definieren Sie die Daten für alle 4 Personen in der Tabelle mit dem „
    “ und das „

    “ Stichworte.
  • Geben Sie dann die Tabellenüberschrift mit dem „”-Tag und schließen Sie die Tabelle.
  • Zuletzt fügen wir am Ende ein weiteres „
    “-Tag hinzu, um unten in der Tabelle eine Tabellenüberschrift anzuwenden.
  • Notiz: Dabei wird die Überschrift der Tabelle oben im Tag „
    “ angegeben, während die Überschrift unten nach dem schließenden Tag der Tabelle angegeben werden muss.

    Ausgabe

    Abschluss

    Tabellenüberschriften sind wichtig, um mehr Informationen über Tabellen und die darin enthaltenen Daten zu geben. Dadurch wird die Zugänglichkeit der Tabellen für Benutzer und Leser um ein Vielfaches erhöht. Die Überschrift bietet in prägnanter Form zusätzliche Informationen zu einer Tabelle, die auch in der Online-Beschreibung angezeigt werden können.

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen