Побудуйте таблицю візуально, отримайте чистий HTML. Налаштуйте структуру ліворуч (рядки, стовпці, заголовок, підпис, рамки, кольори, вирівнювання), вводьте прямо в сітку або вставляйте дані TSV / CSV / Excel. HTML генерується в реальному часі і показується і як код, і як пісочний живий перегляд. Оберіть вивід Класичний (атрибути border / cellpadding) або Сучасний (вбудований CSS), потім скопіюйте код або завантажте самодостатній файл .html. Усе працює локально — нічого не вивантажується.
Розміри
Структура
Розмір і рамки
Оформлення
Вивід
Вставте дані, розділені табуляцією/новим рядком (Excel або TSV), або розділені комами (CSV з підтримкою лапок).
Клітинки5 × 5натисніть маленький × на краю рядка/стовпця, щоб його прибрати
Вводьте в клітинки або натисніть «Згенерувати», щоб створити HTML.
HTML-код
Попередній перегляд
у пісочниці — скрипти вимкнено
Поради: вміст клітинок за замовчуванням екранується в HTML, тож введення на кшталт <script> не може зламати згенерований код або перегляд; знімайте позначку «Екранувати HTML у клітинках», лише коли свідомо хочете вставити розмітку. Вставляйте рядки Excel як TSV (кнопка «Імпортувати дані...» автоматично визначає табуляції або коми). Сітка підтримує до 100 рядків × 30 стовпців, а перегляд у iframe працює в пісочниці (без скриптів).
Таблиці, що мають сенс
<th scope="col"> і scope="row" кажуть рідерам екрана, що описує кожен заголовок, а <caption> називає всю таблицю. colspan і rowspan об'єднують клітинки для справді об'єднаних даних, але плутають парсери, коли їх використовують для візуального макета.
Використовуйте таблиці для зв'язків даних, а CSS grid або flexbox для розмітки — табличний макет шкодить і доступності, і адаптивності.
