Kako koristiti natpis tablice u Tailwindu

Kako Koristiti Natpis Tablice U Tailwindu



A “ Opis tablice ” koristi se za davanje naslova ili imena određenoj tablici. Ovaj naslov olakšava korisniku povratak na ciljnu tablicu kada rukuje velikom količinom podataka sadržanih u brojnim tablicama. Naslovi su kratki naslovi koji pokazuju što podaci sadržani u tablici znače i na što se odnose. Naslov se može postaviti ili na vrh tablice ili ispod, ovisno o temi oblikovanja korisnika.

Koja je važnost opisa tablica?

'Natpisi tablica' koriste se za davanje naslova tablicama tako da korisnik može definirati što svaka tablica znači i kako iskoristiti podatke sadržane u njoj. Naslovi također mogu pomoći pri numeriranju tablica na web stranici kako bi podaci u njima bili dostupniji.

Opisi daju točan kontekst svakoj tablici u dokumentu ili web-stranici gdje postoji veliki broj tablica. Štoviše, strukturirani naslovi osiguravaju da čitatelji brzo razumiju koji su podaci sadržani u svakoj tablici.





Kako koristiti natpis tablice u Tailwind CSS-u?

U Tailwind CSS-u, naslov se dodaje u tablicu pomoću ' ” oznaka. Ovaj natpis navodi naslov i više informacija o podacima u tablici.



Primjer: Dodavanje naslova tablice i na vrh i na dno tablice
U sljedećem kodu dodat ćemo 'natpis' i na vrh i na dno tablice kako slijedi:



< stol >
< stol razreda = 'min-w-puna granica granica-siva-300 divide-y divide-gray-300' >
< thead >
< tr >
< th razreda = 'py-2 px-4 bg-gray-100 border-b' >
Ime
< / th >
< th razreda = 'py-2 px-4 bg-gray-100 border-b' >
E-mail
< / th >
< th razreda = 'py-2 px-4 bg-gray-100 border-b' >
iskaznica
< / th >
< th razreda = 'py-2 px-4 bg-gray-100 border-b' >
Kontakt
< / th >
< / tr >
< / thead >
< tijelo >
< tr >
< td razreda = 'py-2 px-4 border-b' > James < / td >
< td razreda = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td razreda = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td razreda = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td razreda = 'py-2 px-4 border-b' > Michael < / td >
< td razreda = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td razreda = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td razreda = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td razreda = 'py-2 px-4 border-b' > David < / td >
< td razreda = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td razreda = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td razreda = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td razreda = 'py-2 px-4 border-b' > Petar < / td >
< td razreda = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td razreda = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td razreda = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / tr >
< / tijelo >
< naslov >
Osobni podaci zaposlenika
< / naslov >
< / stol >
< naslov >
Ime kompanije
< / naslov >

Slijedite ove korake u gornjem kodu: