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

Введите ячейки в сетке или вставьте CSV или TSV из таблицы и загрузите их. Выберите строку и столбец заголовков, добавьте подпись и скопируйте HTML.

Бесплатно Работает в браузере Проверено вторник, 10 ноября 2026 г.

Этот инструмент работает в вашем браузере. То, что вы вводите, нам не отправляется.

Как пользоваться

  1. Введите ячейки в сетке или вставьте CSV или TSV в поле Вставить CSV или TSV (необязательно) и нажмите Загрузить в таблицу.
  2. Отметьте Первая строка — заголовок и Первый столбец — заголовок, чтобы обозначить ячейки заголовков.
  3. Введите Подпись, в которой сказано, что показывает таблица. Отметьте Добавить минимальное оформление, если таблице нужны границы.
  4. Скопируйте поле HTML или нажмите Скачать и вставьте разметку на свою страницу.

Почему ячейки заголовков имеют область действия

Ячейка заголовка — это элемент th, а не td. Его атрибут scope показывает, какие ячейки он подписывает: col для заголовка над столбцом и row для заголовка в начале строки. Программы чтения с экрана объявляют эти заголовки вместе с каждой ячейкой данных, поэтому посетитель, который не видит сетку, всё равно понимает, что означает число.

Подпись — это название всей таблицы, и она стоит первой внутри таблицы. Пишите подпись, которая говорит, что показывает таблица, например «Продажи по месяцам», а не пропускайте её. В разделе о таблицах HTML (на английском) описаны эти элементы.

заголовок над столбцом: th с scope col;  заголовок в начале строки: th с scope row;  данные: td

Вставка из таблицы и экранирование

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

Текст каждой ячейки экранируется до записи. Знак «меньше» или амперсанд становится ссылкой на символ, поэтому на странице он выглядит как текст и никогда не читается как разметка. Короткая строка дополняется пустыми ячейками, поэтому у каждой строки одинаковое число ячеек.

Пример: таблица из двух столбцов с заголовками строки и столбца

Возьмём ячейки Месяц и Продажи в первой строке и Янв и 1200 во второй, с первой строкой и первым столбцом как заголовками и подписью Продажи.

Таблица начинается с элемента caption с текстом Продажи. Затем идёт заголовочная строка из двух ячеек заголовков, у каждой из которых scope col, а затем тело таблицы, в котором Янв — ячейка заголовка со scope row, а 1200 — ячейка данных.

Частые вопросы

Что делает атрибут scope?

Он говорит вспомогательным технологиям, какие ячейки подписывает заголовок. Значение col означает, что заголовок стоит над своим столбцом, а row — что он стоит в начале своей строки. Без scope программе чтения с экрана приходится угадывать эту связь.

Когда нужен столбец заголовков?

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

Зачем таблице подпись?

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

Какой разделитель выбрать для электронной таблицы?

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

Меняет ли минимальное оформление другие таблицы на моей странице?

Да, если вставить его в страницу как есть, потому что элемент style действует на каждую таблицу страницы. Не добавляйте его, если ваша страница уже оформляет таблицы, или скопируйте только нужные правила.

Таблица, которую я ввожу или вставляю, куда-нибудь отправляется или сохраняется?

Нет. Таблица, предпросмотр и HTML создаются в вашем браузере. Ничего не сохраняется и не отправляется на наш сервер, поэтому скопируйте HTML или скачайте его, прежде чем покинуть страницу.

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..

Мы используем необходимые cookie, чтобы сайт работал. С вашего согласия Google также использует рекламные cookie, чтобы показывать персонализированную рекламу. Если вы откажетесь, реклама всё равно будет показываться, но не будет персонализированной.