Доступный генератор HTML-таблиц: CSV в HTML с подписью | We.Inc
Вставьте CSV или начните с готового прайс-листа или часов работы. Получите настоящую HTML-таблицу с подписью, ячейками заголовка и scope, безопасно экранированную, плюс небольшой блок адаптивного CSS для копирования.
Вставьте строки из таблицы или CSV, либо начните с готового прайс-листа услуг или часов работы. Вы получите настоящую HTML-таблицу с подписью, ячейками заголовка и атрибутами scope, которые используют программы чтения с экрана, плюс короткий блок CSS, который сохраняет её читаемой на телефонах. Каждое значение экранируется, поэтому вставленный текст не может сломать вашу страницу. Всё считается в вашем браузере. Ничего из того, что вы вводите, не отправляется в We.Inc или кому-либо ещё, и всё исчезает при закрытии вкладки.
Выберите готовый вариант или вставьте свои строки. Работают запятые, табуляция (из таблицы) и точки с запятой, а значения в кавычках с запятыми внутри остаются вместе.
Выберите, содержит ли первая строка заголовки столбцов и обозначает ли первый столбец каждую строку. Они становятся ячейками th с атрибутами scope.
Напишите подпись. Она называет таблицу для пользователей программ чтения с экрана и показывается над ней для всех остальных.
Выберите стиль и просмотрите его на десктопной и телефонной ширине. Широкие таблицы прокручиваются вбок внутри своего блока на маленьких экранах вместо того, чтобы сжиматься.
Скопируйте HTML и CSS, либо скачайте оба в одном файле.
Используйте таблицу только для данных со строками и столбцами, например цен или часов работы. Для макета страницы используйте CSS.
Делайте заголовки короткими. Они повторяются при каждом объявлении программы чтения с экрана.
Указывайте единицы в заголовке (Цена, USD), а не в каждой ячейке.
Не объединяйте ячейки без необходимости. Объединённые ячейки трудно воспринимать с программой чтения с экрана.
Проверьте таблицу на ширине телефона. Если нужно больше одного смахивания вбок, подумайте о разделении.
Частые вопросы
Что делает HTML-таблицу доступной?
Подпись, которая её называет, ячейки заголовка th для заголовков столбцов и строк, и атрибуты scope, которые говорят, принадлежит ли заголовок столбцу или строке. Программы чтения с экрана используют это, чтобы объявить, к какому заголовку относится каждое значение. Этот генератор добавляет все три.
Почему не сделать таблицу из div-ов?
Сетка из div может выглядеть как таблица, но вспомогательные технологии не смогут определить, какая ячейка к какому заголовку относится. Настоящий элемент таблицы несёт этот смысл бесплатно.
Как обрабатывается адаптивная таблица?
Таблица помещается в блок, который прокручивается вбок на узких экранах. Блок доступен для фокуса и подписан заголовком таблицы, так что пользователи клавиатуры тоже могут его прокручивать.
Мои данные экранируются?
Да. Амперсанды, угловые скобки и кавычки в ваших ячейках преобразуются в HTML-сущности, поэтому ячейка с <script> показывается как текст, а не выполняется.
Можно вставить прямо из Excel или Google Таблиц?
Да. Скопированные ячейки приходят разделённые табуляцией, которую инструмент распознаёт автоматически.
Это бесплатно?
Да, без регистрации. Работает в вашем браузере.
Прайс-листы и часы работы — это таблицы
На большинстве сайтов малого бизнеса есть как минимум две таблицы: сколько что стоит и когда вы открыты. Оба случая — это настоящие табличные данные, поэтому их стоит размечать как таблицы, где каждая цена привязана к своей услуге, а каждое время — к своему дню.
Готовые варианты здесь дают вам старт именно с этими двумя структурами. Замените примерные строки своими перед публикацией; это заглушки, а не реальные цены.