Адаптивний генератор HTML-таблиць
Створюйте HTML-таблицю візуально, клацаючи по клітинках і вводячи текст, — отримайте чисту семантичну розмітку з живим прев'ю, без формату для вставки чи конвертації.
Результат
Ця сторінка відкриває конструктор таблиць із уже заповненим широким прикладом на сім стовпців і вже увімкненою адаптивною обгорткою, тож рішення проблеми видно одразу.
Широкі таблиці — один із небагатьох елементів, які звичайний адаптивний CSS не може перевлаштувати: текст переноситься, а стовпці — ні, тож таблиця із шістьма й більше стовпцями або виходить за межі екрана, або стискає кожну клітинку до нечитабельного розміру на телефоні. Обгортання таблиці в блок div з overflow-x: auto зберігає її природну ширину і дозволяє відвідувачу прокручувати її вбік, замість того щоб ламати верстку сторінки.
Додайте чи приберіть стовпці відповідно до своїх даних, клацніть будь-яку клітинку, щоб відредагувати її, і скопіюйте готову розмітку — обгортка-div додається лише поки цей чекбокс увімкнено, тож ви можете порівняти HTML з обгорткою і без неї.