Как пользоваться: CSV и Excel в HTML-таблицу
- Вставьте ячейки CSV или Excel, откройте файл
.csv,.xlsxили.json, либо загрузите пример. - Выберите стиль: простая разметка, встроенный CSS или классы Bootstrap, при необходимости добавьте свои имена классов.
- Включите или отключите
<thead>, экранирование HTML, обработку переносов строк и минификацию. - Проверьте отображение в предпросмотре, затем скопируйте разметку или скачайте её.
Что такое генератор HTML-таблиц?
Генератор HTML-таблиц преобразует строки данных в разметку <table>, которую можно вставить на веб-страницу, в CMS, письмо или документацию. Писать такую разметку вручную медленно и легко ошибиться: каждой ячейке нужен свой тег, а специальные символы необходимо экранировать. Этот инструмент делает всё за один шаг из CSV, ячеек Excel или JSON.
Доступная семантическая разметка
Строка заголовков превращается в <thead> с ячейками <th scope="col">, а данные помещаются в <tbody>. Программы чтения с экрана используют эти элементы, чтобы озвучивать название столбца для каждой ячейки, а браузеры повторяют <thead> на каждой напечатанной странице. Необязательный <caption> даёт таблице доступное название.
<table class="data-table">
<thead>
<tr>
<th scope="col">name</th>
<th scope="col">plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ada Lovelace</td>
<td>pro</td>
</tr>
</tbody>
</table>Почему важно экранирование
Когда включена опция Экранировать HTML в ячейках (по умолчанию), символы вроде <, >, & и " преобразуются в мнемоники, поэтому значение вроде <b> отображается как текст и не меняет страницу. Отключайте экранирование, только если ячейки намеренно содержат доверенный HTML, например ссылки. Предпросмотр работает в песочнице с отключёнными скриптами.
Варианты стиля
| Стиль | Что вы получаете |
|---|---|
| Простой HTML | Чистая разметка, которая наследует CSS вашего сайта |
| Встроенный CSS | Небольшой блок <style>: границы, фон заголовка, чередующиеся строки, выравнивание чисел по правому краю |
| Bootstrap | Классы table table-striped table-bordered для сайтов на Bootstrap 4/5 |
Для rich text в Webflow и сайтов на Markdown может быть проще таблица в Markdown. Чтобы превратить существующую HTML-таблицу в Markdown, воспользуйтесь HTML в Markdown.
Также ищут как: csv в html, excel в html таблицу, генератор html таблиц, конвертировать csv в html таблицу, json в html таблицу, таблица html из excel.
Инструменты, которые хорошо сочетаются с CSV и Excel в HTML-таблицу
- Генератор выпадающих списков — Не нужно вручную набирать списки вариантов.
- HTML форматер — Вставьте минифицированную или неаккуратную разметку и получите чистый HTML с единообразными отступами, включая встроенные блоки <style> и <script>.
- Markdown в HTML — Введите или вставьте Markdown и мгновенно получите чистый HTML: с безопасным живым предпросмотром, таблицами GFM, списками задач и блоками кода с ограждениями.
- Excel в JSON — Откройте книгу .xlsx или вставьте ячейки прямо из Excel или Google Sheets и получите чистый JSON.
Часто задаваемые вопросы
Как преобразовать таблицу Excel в HTML?
Могут ли ячейки содержать ссылки или другой HTML?
Будет ли таблица адаптивной?
overflow-x:auto, так делают большинство адаптивных фреймворков.