Aký je význam popisov tabuliek?
„Titulky tabuliek“ sa používajú na pomenovanie tabuliek, aby používateľ mohol definovať, čo každá tabuľka znamená a ako využiť údaje v nej obsiahnuté. Titulky môžu tiež pomôcť očíslovať tabuľky na webovej stránke, aby boli údaje v nich prístupnejšie.
Titulky poskytujú presný kontext každej tabuľke v dokumente alebo webovej stránke, kde je veľké množstvo tabuliek. Štruktúrované titulky navyše zaisťujú, že čitatelia rýchlo pochopia, aké údaje sú obsiahnuté v každej tabuľke.
Ako používať popis tabuľky v CSS Tailwind?
V CSS Tailwind sa titulok pridá do tabuľky pomocou „
Príklad: Pridanie popisku tabuľky do hornej aj dolnej časti tabuľky
V nasledujúcom kóde pridáme „popis“ do hornej aj dolnej časti tabuľky takto:
< tabuľky >
< tabuľky trieda = 'min-w-úplný okraj ohraničenie-sivá-300 rozdeľte-y rozdeľte-sivá-300' >
< hlava >
< tr >
< th trieda = 'py-2 px-4 bg-grey-100 border-b' >
názov
< / th >
< th trieda = 'py-2 px-4 bg-grey-100 border-b' >
< / th >
< th trieda = 'py-2 px-4 bg-grey-100 border-b' >
ID
< / th >
< th trieda = 'py-2 px-4 bg-grey-100 border-b' >
Kontakt
< / th >
< / tr >
< / hlava >
< tbody >
< tr >
< td trieda = 'py-2 px-4 border-b' > James < / td >
< td trieda = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td trieda = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td trieda = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td trieda = 'py-2 px-4 border-b' > Michael < / td >
< td trieda = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td trieda = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td trieda = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td trieda = 'py-2 px-4 border-b' > David < / td >
< td trieda = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td trieda = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td trieda = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td trieda = 'py-2 px-4 border-b' > Peter < / td >
< td trieda = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td trieda = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td trieda = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / tr >
< / tbody >
< titulok >
Osobné údaje zamestnancov
< / titulok >
< / tabuľky >
< titulok >
Názov spoločnosti
< / titulok >
Postupujte podľa týchto krokov vo vyššie uvedenom kóde:
- Vytvorte tabuľku pomocou „
” tag. - Zadajte formátovanie tabuľky cez pomocnú triedu.
- Definujte hlavičky tabuľky „Meno“, „E-mail“, „ID“ a „Kontakt“ cez „ ” tag.
- Definujte údaje pre všetkých 4 zamestnancov v tabuľke pomocou „ “ a „
'značky.' - Potom zadajte popis tabuľky pomocou „
“ a zatvorte stôl. - Nakoniec pridáme na koniec ďalšiu značku „
“, aby sme použili popis tabuľky v spodnej časti tabuľky. - Poznámka : Je to také, že popis tabuľky v hornej časti tabuľky je špecifikovaný v značke „
“, zatiaľ čo spodný popis je potrebné špecifikovať za koncovou značkou tabuľky.
Výkon
Záver
Popisy tabuliek sú nevyhnutné na poskytnutie ďalších informácií o tabuľkách a údajoch v nich obsiahnutých. V dôsledku toho sa prístupnosť tabuliek mnohonásobne zvyšuje pre používateľov aj pre čitateľov. Titulok poskytuje stručné informácie o tabuľke navyše, ktoré je možné zobraziť aj v online popise.
- Definujte údaje pre všetkých 4 zamestnancov v tabuľke pomocou „ “ a „