Генератор доступних HTML-таблиць: CSV у HTML із підписом | We.Inc
Вставте CSV або виберіть шаблон цін чи годин роботи. Отримайте HTML-таблицю з підписом, заголовками й атрибутами scope з безпечним екрануванням та невеликим адаптивним фрагментом CSS для копіювання.
Вставте рядки з електронної таблиці чи файлу CSV або виберіть шаблон прайсу послуг чи годин роботи. Ви отримаєте належно створену HTML-таблицю з підписом, заголовками й атрибутами scope, які використовують програми читання з екрана, а також короткий фрагмент CSS для зручного читання на телефоні. Усі значення екрануються, тому вставлений текст не порушить роботу сторінки. Усе працює у вашому браузері. Введені вами дані не надсилаються до We.Inc чи будь-кому іншому та зникають після закриття вкладки.
Виберіть шаблон або вставте власні рядки. Підійдуть коми, табуляція (з електронної таблиці) й крапки з комою; значення в лапках із комами всередині залишаються разом.
Укажіть, чи містить перший рядок заголовки стовпців і чи позначає перший стовпець рядки. Вони стануть комірками th з атрибутами scope.
Додайте підпис. Він називає таблицю для користувачів програм читання з екрана й показується над нею для всіх.
Виберіть стиль і перегляньте таблицю на екрані комп’ютера й телефона. На малих екранах широкі таблиці прокручуються вбік у власному блоці, а не стискаються.
Скопіюйте HTML-код і CSS або завантажте їх одним файлом.
Використовуйте таблицю лише для даних у рядках і стовпцях, наприклад цін чи годин. Для макета сторінки використовуйте CSS.
Робіть заголовки короткими. Програми читання з екрана повторюють їх у кожному оголошенні.
Зазначте одиниці вимірювання в заголовку (Ціна, USD), а не в кожній комірці.
Не об’єднуйте комірки без потреби. Користувачам програм читання з екрана складно орієнтуватися в об’єднаних комірках.
Перевірте таблицю на ширині телефона. Якщо для неї потрібно більше одного руху вбік, подумайте, чи не краще розділити її.
Поширені запитання
Що робить HTML-таблицю доступною?
Підпис, який її називає; комірки заголовків th для стовпців і рядків; атрибути scope, що вказують, чи належить заголовок до стовпця або рядка. Програми читання з екрана використовують їх, щоб пояснити, якому заголовку відповідає кожне значення. Генератор додає всі три елементи.
Чому не створити таблицю з елементів div?
Сітка з елементів div може виглядати як таблиця, але допоміжні технології не визначають, як комірки пов’язані із заголовками. Справжній елемент таблиці відразу містить цю інформацію.
Як адаптується таблиця?
Таблиця розміщується в блоці, який прокручується вбік на вузьких екранах. Блок доступний для фокусу й має підпис, тож користувачі клавіатури також можуть його прокручувати.
Чи екрануються мої дані?
Так. Амперсанди, кутові дужки й лапки в комірках перетворюються на HTML-сутності, тож вміст комірки <script> показується як текст, а не виконується.
Чи можна вставити дані з Excel або Google Sheets?
Так. Скопійовані комірки розділено табуляцією, яку інструмент визначає автоматично.
Це безплатно?
Так, реєстрація не потрібна. Інструмент працює у вашому браузері.
Прайси й години роботи потрібно оформлювати таблицями
На більшості сайтів малого бізнесу є принаймні дві таблиці: ціни й години роботи. В обох випадках це справжні табличні дані, які потрібно розмічати саме як таблиці, пов’язавши кожну ціну з послугою, а кожний час — із днем.
Шаблони допоможуть створити обидва типи таблиць. Перед публікацією замініть приклади рядків на власні: це заповнювачі, а не справжні ціни.