Cum se utilizează subtitrarea tabelului în Tailwind

Cum Se Utilizeaza Subtitrarea Tabelului In Tailwind



A ' Legenda tabelului ” este folosit pentru a da un titlu sau un nume unui anumit tabel. Această legendă facilitează revenirea utilizatorului la tabelul țintă atunci când manipulează cantități mari de date conținute în numeroase tabele. Legendele sunt titluri scurte care arată ce înseamnă și la ce se referă datele conținute în tabel. Legenda poate fi plasată fie deasupra tabelului, fie dedesubt, conform temei de formatare a utilizatorului.

Care este importanța legendelor de tabel?

„Letitrările tabelelor” sunt folosite pentru a da titluri tabelelor, astfel încât utilizatorul să poată defini ce înseamnă fiecare tabel și cum să utilizeze datele conținute în el. Legendele pot ajuta, de asemenea, la numerotarea tabelelor de pe o pagină web pentru a face datele din ele mai accesibile.

Legendele oferă contextul exact fiecărui tabel dintr-un document sau o pagină web unde există un număr mare de tabele. Mai mult, subtitrările structurate asigură că cititorii înțeleg rapid ce date sunt conținute în fiecare tabel.







Cum să utilizați o legendă de tabel în Tailwind CSS?

În Tailwind CSS, o legendă este adăugată la un tabel utilizând „ ' etichetă. Această legendă specifică un titlu și mai multe informații despre datele din tabel.



Exemplu: Adăugarea unei titluri de tabel atât în ​​partea de sus, cât și în partea de jos a tabelului
În următorul cod, vom adăuga o „legendă” atât în ​​partea de sus, cât și în partea de jos a tabelului, după cum urmează:



< masa >
< masa clasă = „min-w-chenar complet chenar-gri-300 divide-y divide-gri-300” >
< thead >
< tr >
< th clasă = „py-2 px-4 bg-gray-100 chenar-b” >
Nume
< / th >
< th clasă = „py-2 px-4 bg-gray-100 chenar-b” >
E-mail
< / th >
< th clasă = „py-2 px-4 bg-gray-100 chenar-b” >
ID
< / th >
< th clasă = „py-2 px-4 bg-gray-100 chenar-b” >
a lua legatura
< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td clasă = „py-2 px-4 chenar-b” > James < / td >
< td clasă = „py-2 px-4 chenar-b” > james@tsl.com < / td >
< td clasă = „py-2 px-4 chenar-b” > 61101-1234567-8 < / td >
< td clasă = „py-2 px-4 chenar-b” > 123-456-7890 < / td >
< / tr >
< tr >
< td clasă = „py-2 px-4 chenar-b” > Mihai < / td >
< td clasă = „py-2 px-4 chenar-b” > michael@tsl.com < / td >
< td clasă = „py-2 px-4 chenar-b” > 61101-8765432-1 < / td >
< td clasă = „py-2 px-4 chenar-b” > 098-765-4321 < / td >
< / tr >
< tr >
< td clasă = „py-2 px-4 chenar-b” > David < / td >
< td clasă = „py-2 px-4 chenar-b” > David@TSL.com < / td >
< td clasă = „py-2 px-4 chenar-b” > 54791-1234567-8 < / td >
< td clasă = „py-2 px-4 chenar-b” > 123-786-4290 < / td >
< / tr >
< tr >
< td clasă = „py-2 px-4 chenar-b” > Petru < / td >
< td clasă = „py-2 px-4 chenar-b” > peter@tsl.com < / td >
< td clasă = „py-2 px-4 chenar-b” > 54300-1234567-8 < / td >
< td clasă = „py-2 px-4 chenar-b” > 611-239-7890 < / td >
< / tr >
< / tbody >
< legendă >
Informații personale ale angajaților
< / legendă >
< / masa >
< legendă >
Numele companiei
< / legendă >

Urmați acești pași din codul de mai sus: