Как перевести CSV в готовую HTML-таблицу
Чтобы превратить сырой текст с разделителями в чистую HTML-сетку для карточки товара или статьи, откройте html table generator на Zyntec, вставьте данные в форму, настройте параметры и нажмите кнопку «Построить». В результате вы моментально получите наглядный предпросмотр и готовый HTML-код с правильными тегами table, thead и tbody для быстрой вставки в CMS интернет-магазина.
Такой способ исключает ручные ошибки при верстке объемных таблиц с характеристиками, габаритами или ценами.
Настройки генератора перед конвертацией
Перед формированием разметки проверьте параметры в форме:
- Поле «CSV-данные». Сюда вставляется исходный текст со строками и колонками.
- Разделитель. В выпадающем списке по умолчанию стоит вариант «Авто» с автоматическим определением символа. При необходимости можно вручную указать один из вариантов: «Запятая», «Точка с запятой» или «Табуляция».
- Первая строка. Определяет роль верхнего ряда таблицы. По умолчанию выбран пункт «Заголовки (thead)», который оборачивает первую строку в блок thead с тегами th. Если таблица состоит только из товарных позиций без шапки, переключите настройку на «Это данные».
- CSS-класс таблицы. Текстовое поле, в котором по умолчанию заданы классы table table-dark table-striped. Вы можете стереть их или вписать собственные стилевые классы вашей темы оформления.
Если нужно очистить форму и начать заново, воспользуйтесь кнопкой «Сбросить».
Чек-лист проверки результата перед вставкой на сайт
После нажатия кнопки «Построить» проверьте полученный результат по следующим этапам:
1. Проверка структуры и счетчиков
- [ ] Число колонок и строк. Посмотрите на информационные карточки «Колонок» и «Строк». Значения должны точно совпадать с вашим исходным файлом. Если колонка всего одна, значит, разделитель определился неверно.
- [ ] Соответствие разделителя. Если режим «Авто» сработал некорректно из-за сложного текста, выберите точный тип разделителя вручную («Запятая», «Точка с запятой» или «Табуляция») и нажмите «Построить» повторно.
2. Проверка шапки и тела таблицы
- [ ] Роль первой строки. Убедитесь через блок «Предпросмотр», что названия колонок (например, «Артикул», «Цвет», «Цена») выделены в шапку thead, а товарные ряды попали в тело таблицы tbody.
- [ ] Смещение данных. Проверьте, чтобы первая позиция товара случайно не заменила собой заголовок таблицы, если шапка изначально не предполагалась.
3. Проверка стилей и кода для CMS
- [ ] Стилевые классы. В поле «CSS-класс таблицы» должны быть указаны именно те классы, которые поддерживает верстка вашего сайта. Они автоматически попадут в открывающий тег table.
- [ ] Целостность разметки. В поле «HTML-код» сформирован готовый код только для чтения. Скопируйте его целиком, чтобы перенести в редактор страниц или карточку товара без потери закрывающих тегов.
Возможные ошибки при генерации
Если таблица не построилась, сервис подскажет причину:
- Сообщение «Введите CSV-данные» появляется, если нажать «Построить» при пустом поле ввода. Заполните поле исходным текстом.
- Сообщение «Ошибка парсинга CSV: ...» указывает на синтаксические проблемы в структуре строк, например незакрытые кавычки или поврежденный формат данных. Исправьте спорную строку и сформируйте код снова.