Генератор HTML-таблиць

Як згенерувати HTML-таблицю

1. Заповніть сітку. Користуйтеся кнопками Додати рядок, Додати стовпець, Видалити останній рядок і Видалити останній стовпець або кнопками × поруч із кожним рядком і стовпцем. Кнопка Нова порожня таблиця починає знову з порожньої сітки 3 × 3.
2. Щоб використати наявні дані, вставте CSV або клітинки, скопійовані з Excel, LibreOffice чи Google Sheets, у поле Імпорт даних CSV чи електронної таблиці, перевірте Роздільник і натисніть Імпортувати. Можна також вставити блок клітинок електронної таблиці прямо в будь-яку клітинку сітки.
3. Додайте Підпис і виберіть, чи Перший рядок – заголовки та чи Перший стовпець – заголовки.
4. У розділі Оформлення виберіть Без стилів, Клас CSS або Вбудовані стилі і за бажання налаштуйте Колір рамки, Тло заголовка та Смугасті рядки.
5. Перевірте Попередній перегляд, а потім натисніть Копіювати HTML або завантажте код як файл .html.

Доступна розмітка таблиць

Таблиця доступна лише тоді, коли програми читання з екрана можуть визначити, які клітинки є заголовками й що вони описують. Цей інструмент записує структуру, яку рекомендують стандарт HTML і методики WCAG:

• <caption> дає таблиці назву. Програми читання з екрана озвучують її під час входу в таблицю, і вона допомагає кожному читачеві зрозуміти, на що він дивиться. Нехай вона буде короткою й описовою.
• <thead> і <tbody> відокремлюють рядок заголовків від рядків даних. Браузери можуть повторювати <thead> на кожній надрукованій сторінці.
• <th scope="col"> позначає кожен заголовок стовпця, а з опцією Перший стовпець – заголовки <th scope="row"> позначає першу клітинку кожного рядка. Коли користувач програми читання з екрана переходить до клітинки даних, вона може озвучити відповідні заголовки, наприклад «Профі, Ціна, 120 ₴».

Використовуйте таблиці лише для табличних даних, ніколи для розмітки сторінки. Уникайте об’єднаних клітинок, коли це можливо: прості сітки з одним рядком заголовків і, за потреби, одним стовпцем заголовків найлегше читати за допомогою допоміжних технологій.

Параметри оформлення

• Без стилів записує чисту розмітку, яка успадковує стилі таблиць вашого сайту. Це найкращий вибір для CMS або сайту з дизайн-системою.
• Клас CSS додає class="…" до <table> і показує відповідний блок CSS для вставлення у вашу таблицю стилів. Назва класу очищується до літер, цифр, дефісів і підкреслень, тож це завжди коректний селектор.
• Вбудовані стилі розміщують атрибути style на кожному елементі. Це громіздко, але саме це потрібно для електронних листів у форматі HTML, бо багато поштових клієнтів ігнорують блоки <style>. Кнопка Завантажити додає CSS в елемент <style>, коли ви використовуєте клас.

У CSS записуються лише справжні шістнадцяткові кольори з вибірників кольору, тож у ваших стилях не може опинитися нічого несподіваного.

Екранування й безпека

Кожна клітинка екранується: <, > і & стають <, > та &, тому текст на кшталт <b> чи a < b з’являється точно так, як введено, а не інтерпретується як розмітка. Переноси рядків в імпортованих клітинках стають <br>. Попередній перегляд будується лише з цієї екранованої розмітки й проходить через санітайзер, що залишає тільки елементи таблиці, тому вставлений скрипт ніколи не виконається.