Kako uporabljati napis tabele v Tailwindu

Kako Uporabljati Napis Tabele V Tailwindu



A “ Napis tabele ” se uporablja za dajanje naslova ali imena določeni tabeli. Ta napis uporabniku olajša vrnitev v ciljno tabelo, ko obravnava velike količine podatkov v številnih tabelah. Podnapisi so kratki naslovi, ki prikazujejo, kaj pomenijo in na kaj se nanašajo podatki v tabeli. Napis lahko postavite na vrh tabele ali pod njo glede na temo oblikovanja uporabnika.

Kakšen je pomen napisov tabel?

»Napisi tabel« se uporabljajo za dajanje naslovov tabelam, tako da lahko uporabnik določi, kaj posamezna tabela pomeni in kako uporabiti podatke, ki jih vsebuje. Napisi lahko pomagajo tudi pri oštevilčevanju tabel na spletni strani, da so podatki v njih bolj dostopni.

Podnapisi dajejo natančen kontekst vsaki tabeli v dokumentu ali spletni strani, kjer je veliko tabel. Poleg tega strukturirani napisi poskrbijo, da bralci hitro razumejo, kateri podatki so v posamezni tabeli.





Kako uporabiti napis tabele v Tailwind CSS?

V Tailwind CSS je napis dodan tabeli z uporabo ' ' oznaka. Ta napis določa naslov in več informacij o podatkih v tabeli.



Primer: dodajanje napisa tabele tako na vrh kot na dno tabele
V naslednji kodi bomo dodali »napis« tako na vrh kot na dno tabele, kot sledi:



< tabela >
< tabela razred = 'min-w-polna obroba obroba-siva-300 razdelitev-y razdelitev-siva-300' >
< thead >
< tr >
< th razred = 'py-2 px-4 bg-siva-100 obroba-b' >
Ime
< / th >
< th razred = 'py-2 px-4 bg-siva-100 obroba-b' >
E-naslov
< / th >
< th razred = 'py-2 px-4 bg-siva-100 obroba-b' >
ID
< / th >
< th razred = 'py-2 px-4 bg-siva-100 obroba-b' >
Kontakt
< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td razred = 'py-2 px-4 border-b' > James < / td >
< td razred = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td razred = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td razred = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td razred = 'py-2 px-4 border-b' > Michael < / td >
< td razred = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td razred = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td razred = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td razred = 'py-2 px-4 border-b' > David < / td >
< td razred = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td razred = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td razred = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td razred = 'py-2 px-4 border-b' > Peter < / td >
< td razred = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td razred = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td razred = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / tr >
< / tbody >
< napis >
Osebni podatki zaposlenih
< / napis >
< / tabela >
< napis >
Ime podjetja
< / napis >

Sledite tem korakom v zgornji kodi: