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

Генератор таблиц HTML строит сетку размером до 50 строк и 20 столбцов, а код таблицы в окне ниже меняется с каждым вашим действием. Текст набирается прямо в ячейках, строки и столбцы можно убирать и добавлять где угодно, не пересоздавая таблицу заново. Кнопка «Отменить» откатывает до 50 шагов. Знаки «<», «>» и «&» экранируются и не ломают разметку, а перевод строки внутри ячейки превращается в тег br.

Как объединить ячейки и что получится в коде

Выделите нужные ячейки мышью и нажмите «Объединить»; выделить их можно и через Shift + щелчок. На телефоне выделения нет, поэтому поставьте курсор в ячейку и нажмите «Объединить →» либо «Объединить ↓»: первая кнопка склеивает ячейки по горизонтали, вторая по вертикали.

В коде объединение выглядит как атрибут colspan у горизонтальной склейки и rowspan у вертикальной. Поглощённые ячейки из кода исчезают, а их тексты дописываются к оставшемуся через пробел. Кнопка «Разъединить» возвращает ячейки на место, текст остаётся в левой верхней. Если внутрь объединённой области вставляется строка или столбец, она растягивается и на них.

Объединяйте в конце, когда таблица уже заполнена и строки расставлены. Тексты склеенных ячеек собираются в одну строку, и после «Разъединить» обратно по клеткам они не расходятся — возвращать тексты на место придётся вручную.

Таблица из Excel или Google Таблиц

Скопируйте диапазон в Excel или Google Таблицах, поставьте курсор в ячейку сетки и вставьте через Ctrl+V. Значения лягут начиная с этой ячейки, и таблица сама дорастёт до нужного размера; содержимое многострочных ячеек переносится целиком. То, что не влезает за 50 строк и 20 столбцов, отбрасывается. Из Excel переносится только текст: цвета, шрифты и объединения туда не попадают.

Большие таблицы перед вставкой на сайт лучше разрезать на части: широкая таблица на телефоне уезжает за край экрана. Если значения уже лежат в CSV-файле, таблицу HTML можно собрать из файла CSV и не набивать вручную.

Стили: в тегах, блоком CSS или без них

Переключатель в блоке «Оформление» решает, куда попадут рамки, фон и выравнивание. Режим «в тегах» пишет атрибут style в каждую ячейку; он нужен, когда таблица отправится в письмо или в редактор CMS, где блок style вырезают. Режим «блоком CSS» ставит перед таблицей тег style с классом simple-table, код ячеек остаётся чистым, а класс можно переименовать под свой сайт. Режим «без стилей» отдаёт голую разметку: вид таблице задаст CSS того сайта, куда вы её вставите.

Галочка шапки переносит первую строку в thead и помечает ячейки атрибутом scope — так программы экранного чтения понимают, к чему относятся значения в столбце. «Полосатые строки» чередуют фон через строку в теле таблицы.

Если таблица нужна для README, заметок или документации, сгенерируйте её в формате Markdown: генератор таблиц Markdown собирает ту же сетку и задаёт выравнивание для каждого столбца.