Какво е значението на надписите на таблиците?
„Надписи на таблици“ се използват за даване на заглавия на таблици, така че потребителят да може да определи какво означава всяка таблица и как да използва данните, съдържащи се в нея. Надписите също могат да помогнат за номерирането на таблиците на уеб страница, за да направят данните в тях по-достъпни.
Надписите дават точен контекст на всяка таблица в документ или уеб страница, където има голям брой таблици. Освен това структурираните надписи гарантират, че читателите бързо разбират какви данни се съдържат във всяка таблица.
Как да използвам надпис на таблица в Tailwind CSS?
В Tailwind CSS, надпис се добавя към таблица с помощта на „ <надпис> ” таг. Този надпис указва заглавие и повече информация за данните в таблицата.
Пример: Добавяне на надпис към таблицата както в горната, така и в долната част на таблицата
В следния код ще добавим „надпис“ както в горната, така и в долната част на таблицата, както следва:
< маса >
< маса клас = 'min-w-пълна граница border-gray-300 divide-y divide-gray-300' >
< thead >
< тр >
< th клас = 'py-2 px-4 bg-gray-100 border-b' >
Име
< / th >
< th клас = 'py-2 px-4 bg-gray-100 border-b' >
електронна поща
< / th >
< th клас = 'py-2 px-4 bg-gray-100 border-b' >
документ за самоличност
< / th >
< th клас = 'py-2 px-4 bg-gray-100 border-b' >
Контакт
< / th >
< / тр >
< / thead >
< tbody >
< тр >
< td клас = 'py-2 px-4 border-b' > Джеймс < / td >
< td клас = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td клас = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td клас = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / тр >
< тр >
< td клас = 'py-2 px-4 border-b' > Майкъл < / td >
< td клас = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td клас = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td клас = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / тр >
< тр >
< td клас = 'py-2 px-4 border-b' > Дейвид < / td >
< td клас = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td клас = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td клас = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / тр >
< тр >
< td клас = 'py-2 px-4 border-b' > Петър < / td >
< td клас = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td клас = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td клас = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / тр >
< / tbody >
< надпис >
Лична информация на служителите
< / надпис >
< / маса >
< надпис >
Име на компания
< / надпис >
Следвайте тези стъпки в горния код:
- Създайте таблица с помощта на „ <таблица> ” таг.
- Задайте форматирането на таблицата чрез класа на помощната програма.
- Дефинирайте заглавките на таблицата на „Име“, „Имейл“, „Идентификационен номер“ и „Контакт“ чрез „ ” таг.
- Дефинирайте данните за всичките 4 служители в таблицата, като използвате „ “ и „
” етикети. - След това посочете надписа на таблицата, като използвате „ <надпис> ” и затворете таблицата.
- Накрая добавяме още един таг “
” в края, за да приложим надпис на таблица в долната част на таблицата. - Забележка : Така е, че надписът на таблицата в горната част на таблицата е посочен в тага „
“, докато долният надпис трябва да бъде посочен след затварящия таг на таблицата.
Изход
Заключение
Надписите на таблиците са жизненоважни, за да дадат повече информация за таблиците и съдържащите се в тях данни. Следователно достъпността на таблиците се увеличава многократно както за потребителите, така и за читателите. Надписът предоставя допълнителна информация относно таблица по стегнат начин, която може да се види и в онлайн описанието.
- Дефинирайте данните за всичките 4 служители в таблицата, като използвате „ “ и „