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

Что делает HTML-таблицу хорошей

HTML-таблицы существуют для представления по-настоящему табличных данных — строк и столбцов, где положение значения несёт смысл, как матрица цен, расписание или сравнительная таблица. Правильная таблица — это больше, чем сетка ячеек; она строится из небольшого семейства элементов, описывающих роли: table оборачивает всё, thead и tbody отделяют заголовок от тела, th помечает ячейку заголовка, а td содержит ячейку данных. Этот генератор выдаёт для вас всю эту структуру, чтобы вывод был чистым и соответствующим стандартам.

Правильная структура важна, потому что на неё опираются и браузеры, и поисковые системы, и вспомогательные технологии. Сетка, подделанная элементами div, может выглядеть как таблица, но не передаёт никаких связей, тогда как правильная разметка таблицы точно сообщает каждому потребителю страницы, как организованы данные.

Два способа ввести данные

Вы можете построить таблицу интерактивно в редакторе сетки, добавляя и удаляя строки и столбцы и печатая прямо в каждую ячейку, что идеально для небольших таблиц или быстрых правок. Для всего, что уже живёт в таблице, вкладка «Импорт CSV» быстрее: вставьте свои данные, и они за один шаг разбираются в сетку.

Импортёр гибок в отношении разделителей. Он принимает текст, разделённый запятой, табуляцией, точкой с запятой и вертикальной чертой, поэтому работают и копия прямо из Excel или Google Таблиц (где используется табуляция), и скачанный CSV (где используются запятые). Отметьте «Первая строка — заголовок», когда верхняя строка содержит названия столбцов, и эти значения станут ячейками th в thead, а не обычными данными.

Разобранный пример

Вставьте три строки во вкладку «Импорт CSV», пометив первую как заголовок: Name, Email, Phone в первой строке, затем две строки контактов. Инструмент создаёт таблицу, в которой thead содержит одну строку из трёх ячеек th, а tbody содержит две строки tr с ячейками td. Включите «Таблица с границами» и «Чередующиеся строки», и разметка получит классы и стили, рисующие границы ячеек и чередующуюся заливку строк, так что предпросмотр в точности совпадёт с тем, что появится на вашей странице ещё до того, как вы скопируете код.

Параметры визуального оформления

Основные параметры покрывают оформление, к которому прибегают чаще всего. «Таблица с границами» рисует линии вокруг ячеек, «Чередующиеся строки» затеняют чётные и нечётные строки, чтобы длинные таблицы было легче просматривать, а «Эффект при наведении» подсвечивает строку под курсором, что помогает читателям отслеживать движение по широким строкам. Каждый параметр сразу отражается в предпросмотре.

Для более тонкого контроля расширенные параметры открывают внутренний отступ и интервал ячеек, ширину и цвет границ, а также режим border-collapse, который решает, сливаются ли границы соседних ячеек в одиночные линии (collapse) или остаются раздельными двойными линиями (separate). Вы также можете прикрепить собственный ID и класс, чтобы таблица подключалась к вашей существующей таблице стилей, а не полагалась исключительно на встроенные стили.

Подписи и область заголовка для доступности

Подпись (caption) даёт таблице видимый, программно связанный заголовок, и вы можете разместить её сверху или снизу. Это доступный способ назвать таблицу, гораздо лучший, чем соседний абзац, потому что программы чтения с экрана объявляют её как метку таблицы.

Параметр «Область заголовка» — самая важная настройка доступности здесь. Установка scope в значение col на ячейках заголовка говорит вспомогательным технологиям, что каждый th подписывает столбец под собой; установка в row подписывает строку рядом; а комбинированный вариант обрабатывает таблицы, у которых есть и строка заголовка, и столбец заголовка. При правильно заданном scope программа чтения с экрана может объявлять соответствующие заголовки, когда пользователь переходит от ячейки к ячейке, так что значение читается как «Phone: 555-1234», а не как голое число без контекста.

Оговорка об адаптивности

Таблицы по своей природе широкие, и таблица с множеством столбцов выйдет за пределы экрана телефона. Параметр «Адаптивная таблица» решает это, оборачивая таблицу так, чтобы она прокручивалась по горизонтали внутри своего контейнера, а не ломала макет страницы, благодаря чему каждый столбец остаётся целым и доступным. Это безопасное значение по умолчанию для таблиц данных на маленьких экранах.

Стоит понимать компромисс: горизонтальная прокрутка точно сохраняет данные, но просит читателя прокручивать. Невозможно переформатировать настоящую таблицу данных в один узкий столбец, не потеряв связи строк и столбцов, поэтому для по-настоящему табличного содержимого прокрутка — это честное решение, а не уловка.

Распространённые ошибки, которых стоит избегать

Самое частое неправильное использование — прибегать к таблице для управления макетом страницы, а не для представления данных; современный CSS вроде flexbox и grid — это правильный инструмент для макета, а таблицы следует приберечь для табличного содержимого. Ещё одна частая оплошность — полностью опускать ячейки заголовка, что оставляет пользователей программ чтения с экрана без контекста столбцов, поэтому всегда повышайте первую строку до заголовка, когда она содержит названия. Наконец, не зарывайте оформление в длинные встроенные атрибуты style, когда класс был бы чище и удобнее в поддержке; используйте поля ID и класса, чтобы связать таблицу с таблицей стилей.