Создайте таблицу визуально, получите чистый 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 — для вёрстки: табличная вёрстка вредит и доступности, и адаптивности.
