Kokia yra lentelių antraščių svarba?
„Lentelių antraštės“ naudojamos lentelėms pavadinimams suteikti, kad vartotojas galėtų apibrėžti, ką kiekviena lentelė reiškia ir kaip panaudoti joje esančius duomenis. Antraštės taip pat gali padėti sunumeruoti lenteles tinklalapyje, kad jose esantys duomenys būtų lengviau pasiekiami.
Antraštės pateikia tikslų kiekvienos dokumento ar tinklalapio lentelės kontekstą, kuriame yra daug lentelių. Be to, struktūrinės antraštės užtikrina, kad skaitytojai greitai suprastų, kokie duomenys yra kiekvienoje lentelėje.
Kaip naudoti lentelės antraštę „Tailwind CSS“?
Tailwind CSS antraštė pridedama prie lentelės naudojant „
Pavyzdys: lentelės antraštės pridėjimas ir lentelės viršuje, ir apačioje
Šiame kode lentelės viršuje ir apačioje pridėsime „antraštę“ taip:
< stalo >
< stalo klasė = „min.-w-visa kraštinė-pilka-300 padalijimas-y padalijimas-pilka-300“ >
< thead >
< tr >
< th klasė = „py-2 px-4 bg-grey-100 border-b“ >
vardas
< / th >
< th klasė = „py-2 px-4 bg-grey-100 border-b“ >
El. paštas
< / th >
< th klasė = „py-2 px-4 bg-grey-100 border-b“ >
ID
< / th >
< th klasė = „py-2 px-4 bg-grey-100 border-b“ >
kontaktas
< / th >
< / tr >
< / thead >
< tkūnas >
< tr >
< td klasė = 'py-2 px-4 border-b' > Džeimsas < / td >
< td klasė = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td klasė = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td klasė = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td klasė = 'py-2 px-4 border-b' > Mykolas < / td >
< td klasė = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td klasė = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td klasė = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td klasė = 'py-2 px-4 border-b' > Deividas < / td >
< td klasė = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td klasė = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td klasė = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td klasė = 'py-2 px-4 border-b' > Petras < / td >
< td klasė = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td klasė = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td klasė = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / tr >
< / tkūnas >
< antraštė >
Darbuotojų asmeninė informacija
< / antraštė >
< / stalo >
< antraštė >
Įmonės pavadinimas
< / antraštė >
Atlikite šiuos veiksmus aukščiau pateiktame kode:
- Sukurkite lentelę naudodami „
“ žymą. - Nurodykite lentelės formatavimą naudodami naudingumo klasę.
- Apibrėžkite lentelės antraštes „Vardas“, „El. paštas“, „ID“ ir „Kontaktai“ naudodami „ “ žymą.
- Apibrėžkite visų 4 darbuotojų duomenis lentelėje naudodami „ ' ir '
“ žymas. - Tada nurodykite lentelės antraštę naudodami „
“ žymą ir uždarykite lentelę. - Galiausiai, pabaigoje pridedame dar vieną žymą „
“, kad lentelės apačioje pritaikytume lentelės antraštę. - Pastaba : yra tokia, kad lentelės viršuje esanti lentelės antraštė nurodyta žymoje „
“, o apatinė antraštė turi būti nurodyta po lentelės uždarymo žyma.
Išvestis
Išvada
Lentelių antraštės yra labai svarbios norint suteikti daugiau informacijos apie lenteles ir jose esančius duomenis. Vadinasi, lentelių prieinamumas padidės tiek vartotojams, tiek skaitytojams. Antraštėje glaustai pateikiama papildomos informacijos apie lentelę, kurią galima peržiūrėti ir internetiniame aprašyme.
- Apibrėžkite visų 4 darbuotojų duomenis lentelėje naudodami „ ' ir '