Sådan bruger du tabeltekst i Tailwind

Sadan Bruger Du Tabeltekst I Tailwind



en ' Tabel billedtekst ” bruges til at give en titel eller et navn til en bestemt tabel. Denne billedtekst gør det nemt for brugeren at vende tilbage til måltabellen, når han håndterer store mængder data indeholdt i adskillige tabeller. Billedteksterne er korte titler, der viser, hvad dataene i tabellen betyder og relaterer til. Billedteksten kan placeres enten oven på tabellen eller nedenfor i henhold til brugerens formateringstema.

Hvad er betydningen af ​​tabeltekster?

'Tabeltekster' bruges til at give titler til tabeller, så brugeren kan definere, hvad hver tabel betyder, og hvordan man bruger dataene i den. Billedtekster kan også hjælpe med at nummerere tabellerne på en webside for at gøre dataene i dem mere tilgængelige.

Billedtekster giver nøjagtig kontekst til hver tabel i et dokument eller en webside, hvor der er et stort antal tabeller. Desuden sørger strukturerede billedtekster for, at læserne hurtigt forstår, hvilke data der er indeholdt i hver tabel.





Hvordan bruger man en tabeltekst i Tailwind CSS?

I Tailwind CSS tilføjes en billedtekst til en tabel ved hjælp af ' ” tag. Denne billedtekst angiver en titel og flere oplysninger om dataene i tabellen.



Eksempel: Tilføjelse af en tabeltekst til både toppen og bunden af ​​tabellen
I den følgende kode tilføjer vi en 'billedtekst' til både toppen og bunden af ​​tabellen som følger:



< bord >
< bord klasse = 'min-w-fuld kant kant-grå-300 divider-y divider-grå-300' >
< thead >
< tr >
< th klasse = 'py-2 px-4 bg-gray-100 border-b' >
Navn
< / th >
< th klasse = 'py-2 px-4 bg-gray-100 border-b' >
E-mail
< / th >
< th klasse = 'py-2 px-4 bg-gray-100 border-b' >
ID
< / th >
< th klasse = 'py-2 px-4 bg-gray-100 border-b' >
Kontakt
< / th >
< / tr >
< / thead >
< kroppen >
< 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 >
< / kroppen >
< billedtekst >
Medarbejdernes personlige oplysninger
< / billedtekst >
< / bord >
< billedtekst >
Firmaets navn
< / billedtekst >

Følg disse trin i ovenstående kode: