В чем важность подписей к таблицам?
«Заголовки таблиц» используются для присвоения названий таблицам, чтобы пользователь мог определить, что означает каждая таблица и как использовать данные, содержащиеся в ней. Подписи также могут помочь пронумеровать таблицы на веб-странице, чтобы сделать данные в них более доступными.
Заголовки дают точный контекст для каждой таблицы в документе или на веб-странице, где имеется большое количество таблиц. Кроме того, структурированные заголовки гарантируют, что читатели быстро поймут, какие данные содержатся в каждой таблице.
Как использовать заголовок таблицы в Tailwind CSS?
В Tailwind CSS подпись добавляется к таблице с помощью « <заголовок> ' ярлык. Этот заголовок указывает заголовок и дополнительную информацию о данных в таблице.
Пример: добавление заголовка таблицы вверху и внизу таблицы
В следующем коде мы добавим «заголовок» вверху и внизу таблицы следующим образом:
< стол >
< стол сорт '=' 'min-w-полная граница граница-серый-300 разделить-y разделить-серый-300' >
< голова >
< тр >
< й сорт '=' 'py-2 px-4 bg-серый-100 бордюр-б' >
Имя
< / й >
< й сорт '=' 'py-2 px-4 bg-серый-100 бордюр-б' >
Электронная почта
< / й >
< й сорт '=' 'py-2 px-4 bg-серый-100 бордюр-б' >
ИДЕНТИФИКАТОР
< / й >
< й сорт '=' 'py-2 px-4 bg-серый-100 граница-б' >
Контакт
< / й >
< / тр >
< / голова >
< тело >
< тр >
< тд сорт '=' 'py-2 px-4 граница-б' > Джеймс < / тд >
< тд сорт '=' 'py-2 px-4 граница-b' > Джеймс@tsl.com < / тд >
< тд сорт '=' 'py-2 px-4 граница-b' > 61101-1234567-8 < / тд >
< тд сорт '=' 'py-2 px-4 граница-б' > 123-456-7890 < / тд >
< / тр >
< тр >
< тд сорт '=' 'py-2 px-4 граница-b' > Майкл < / тд >
< тд сорт '=' 'py-2 px-4 граница-b' > Майкл@tsl.com < / тд >
< тд сорт '=' 'py-2 px-4 граница-б' > 61101-8765432-1 < / тд >
< тд сорт '=' 'py-2 px-4 граница-б' > 098-765-4321 < / тд >
< / тр >
< тр >
< тд сорт '=' 'py-2 px-4 граница-б' > Дэйвид < / тд >
< тд сорт '=' 'py-2 px-4 граница-б' > Дэвид@TSL.com < / тд >
< тд сорт '=' 'py-2 px-4 граница-б' > 54791-1234567-8 < / тд >
< тд сорт '=' 'py-2 px-4 граница-б' > 123-786-4290 < / тд >
< / тр >
< тр >
< тд сорт '=' 'py-2 px-4 граница-б' > Питер < / тд >
< тд сорт '=' 'py-2 px-4 граница-б' > peter@tsl.com < / тд >
< тд сорт '=' 'py-2 px-4 граница-б' > 54300-1234567-8 < / тд >
< тд сорт '=' 'py-2 px-4 граница-б' > 611-239-7890 < / тд >
< / тр >
< / тело >
< подпись >
Личная информация сотрудников
< / подпись >
< / стол >
< подпись >
Название компании
< / подпись >
Выполните следующие шаги в приведенном выше коде:
- Создайте таблицу с помощью « <таблица> ' ярлык.
- Укажите форматирование таблицы через служебный класс.
- Определите заголовки таблиц «Имя», «Электронная почта», «ID» и «Контакт» с помощью « ' ярлык.
- Определите данные для всех 4 сотрудников в таблице, используя « ” и “ <тд> ” теги.
- Затем укажите заголовок таблицы с помощью « <заголовок> » и закройте таблицу.
- Наконец, мы добавляем еще один тег «
» в конце, чтобы применить заголовок таблицы внизу таблицы. - Примечание : это так, что заголовок таблицы в верхней части таблицы указывается в теге «
», тогда как нижний заголовок должен быть указан после закрывающего тега таблицы.
Выход
Заключение
Заголовки таблиц необходимы для предоставления дополнительной информации о таблицах и содержащихся в них данных. Следовательно, доступность таблиц многократно возрастает как для пользователей, так и для читателей. Заголовок предоставляет дополнительную информацию о таблице в сжатой форме, которую также можно просмотреть в онлайн-описании.
- Определите данные для всех 4 сотрудников в таблице, используя « ” и “ <тд> ” теги.