Jaký je význam popisků tabulek?
„Titulky tabulek“ se používají k označení tabulek, takže uživatel může definovat, co každá tabulka znamená a jak využít data v ní obsažená. Titulky mohou také pomoci očíslovat tabulky na webové stránce, aby byla data v nich přístupnější.
Titulky poskytují přesný kontext každé tabulce v dokumentu nebo webové stránce, kde je velké množství tabulek. Strukturované titulky navíc zajišťují, že čtenáři rychle pochopí, jaká data jsou v každé tabulce obsažena.
Jak používat titulek tabulky v Tailwind CSS?
V Tailwind CSS se titulek přidá do tabulky pomocí „
Příklad: Přidání popisku tabulky do horní i spodní části tabulky
V následujícím kódu přidáme „titulek“ do horní i spodní části tabulky následovně:
< stůl >
< stůl třída = 'min-w-full border border-grey-300 division-y division-grey-300' >
< hlava >
< tr >
< čt třída = 'py-2 px-4 bg-grey-100 border-b' >
název
< / čt >
< čt třída = 'py-2 px-4 bg-grey-100 border-b' >
E-mailem
< / čt >
< čt třída = 'py-2 px-4 bg-grey-100 border-b' >
ID
< / čt >
< čt třída = 'py-2 px-4 bg-grey-100 border-b' >
Kontakt
< / čt >
< / tr >
< / hlava >
< tbody >
< tr >
< td třída = 'py-2 px-4 border-b' > James < / td >
< td třída = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td třída = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td třída = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td třída = 'py-2 px-4 border-b' > Michaele < / td >
< td třída = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td třída = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td třída = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td třída = 'py-2 px-4 border-b' > Davide < / td >
< td třída = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td třída = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td třída = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td třída = 'py-2 px-4 border-b' > Petr < / td >
< td třída = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td třída = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td třída = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / tr >
< / tbody >
< titulek >
Osobní údaje zaměstnanců
< / titulek >
< / stůl >
< titulek >
Jméno společnosti
< / titulek >
Postupujte podle těchto kroků ve výše uvedeném kódu:
- Vytvořte tabulku pomocí „
” tag. - Zadejte formátování tabulky pomocí třídy utility.
- Definujte záhlaví tabulky „Jméno“, „E-mail“, „ID“ a „Kontakt“ pomocí „
” tag. - Definujte data pro všechny 4 zaměstnance v tabulce pomocí „ “ a „
” tagy. - Poté zadejte popisek tabulky pomocí „
“ a zavřete stůl. - Nakonec přidáme na konec další značku „
“, abychom použili popisek tabulky ve spodní části tabulky. - Poznámka : Popisek tabulky v horní části tabulky je uveden ve značce „
“, zatímco spodní popisek je třeba zadat za uzavírací značkou tabulky.
Výstup
Závěr
Popisky tabulek jsou nezbytné pro poskytnutí více informací o tabulkách a datech v nich obsažených. V důsledku toho se mnohonásobně zvyšuje přístupnost tabulek jak pro uživatele, tak pro čtenáře. Titulek poskytuje stručnou informaci o tabulce navíc, kterou lze zobrazit také v online popisu.
- Poté zadejte popisek tabulky pomocí „