ViewCSVОткройте или вставьте CSV-файл и получите <table> с <thead> из заголовков <th scope="col"> и по одному <tr> на строку — или полную HTML-страницу, которую можно сразу открыть. Каждое значение экранируется, поэтому <script> или & в ваших данных отображаются как текст и никогда не становятся разметкой. Файл конвертируется в вашем браузере и никогда не загружается на сервер.
Как преобразовать CSV в HTML
- Нажмите Открыть файл, перетащите на инструмент файл
.csv,.tsvили.txtили выберите Вставить. Если столбцы выглядят неправильно, поправьте разделитель или кодировку в разделе Параметры импорта. - В поле Результат выберите Только таблица, чтобы вставить разметку в существующую страницу или CMS, или Полная HTML-страница для отдельного файла.
- Добавьте Подпись (необязательно), решите, как быть с оформлением и переносами строк, затем нажмите Копировать или Скачать HTML.
Для README или вики обычно удобнее таблица Markdown, а для файла, который нужно распечатать, — CSV в PDF.
Что делает каждая настройка
| Только таблица | Вариант по умолчанию. Только элемент <table> — его можно вставить на страницу, в шаблон письма или в HTML-блок CMS. |
|---|---|
| Полная HTML-страница | Добавляет <!doctype html>, <html lang="en"> (в русской версии сайта — lang="ru"), <meta charset="utf-8"> и <title> (подпись или, если её нет, Table), так что файл правильно открывается в любом браузере. |
| Подпись (необязательно) | Записывает <caption> первым дочерним элементом таблицы — это доступное имя, которое программы чтения с экрана произносят для таблицы. |
| Добавить простое оформление | По умолчанию включено. В полную страницу встраивается небольшая таблица стилей: рамки, затемнённая строка заголовков и числа по правому краю. При Только таблица вместо этого к таблице добавляется class="csv-table", а к числовым ячейкам — class="num", чтобы внешний вид определял ваш собственный CSS. |
| Показывать переносы строк в ячейках | По умолчанию включено. Перенос строки внутри значения становится <br>. Если отключить, перенос остаётся в исходном тексте, а браузеры показывают его как пробел. |
Как обрабатываются сложные данные
&,<,>,"и'записываются как&,<,>,"и'в каждой ячейке, заголовке и подписи. Теги из ваших данных показываются как текст, а значит, и HTML, который уже есть в CSV, не отображается как разметка.- У каждой ячейки есть
dir="auto", поэтому значения на арабском или иврите показываются справа налево даже на странице с письмом слева направо. - Столбец считается числовым, только если каждое непустое значение — простое число; столбец идентификаторов вроде
0042остаётся текстом и не выравнивается вправо. Сами значения никогда не переформатируются. - Запятые, кавычки и переносы строк в кавычках читаются по RFC 4180. Пустой заголовок становится
Column 3, повторяющийся —name (2). - Результат в кодировке UTF-8. Полная страница объявляет её через
<meta charset="utf-8">; если вставляете Только таблица в другую страницу, та тоже должна быть в UTF-8.
Устранение неполадок
- В исходном файле вместо букв «кракозябры» вроде é или ����. CSV не в UTF-8. Выберите его кодировку в параметрах импорта (у старых выгрузок из Excel это часто Windows-1252, у файлов из русской Windows — Windows-1251) и откройте его заново.
- Теги из моих данных показываются как текст. HTML в ячейках экранирован намеренно, чтобы он не мог сработать как разметка. Если вы доверяете содержимому и хотите, чтобы оно отображалось, отредактируйте результат.
- У вставленной таблицы нет рамок. Только таблица добавляет имена классов (при включённом оформлении), а не CSS. Задайте стили для
.csv-tableиtd.numв таблице стилей сайта или выберите Полная HTML-страница, чтобы получить встроенные стили. - Все значения в одном столбце. Разделитель определён неверно; задайте его в параметрах импорта.
Ограничения и конфиденциальность
Файлы до 25 МБ, 100 000 строк или 2 млн ячеек открываются с живым предпросмотром первых 200 строк. Бо́льшие файлы конвертируются в потоковом режиме: файл читается частями дважды (сначала чтобы измерить столбцы и определить, какие из них числовые, затем чтобы записать результат), уведомление сообщает, что скачанный файл охватывает весь файл, а кнопки Копировать нет. Один выходной файл ограничен 4 ГБ.
Конвертация идёт в фоновом обработчике в этой вкладке, поэтому страница не зависает, а кнопка Отмена её останавливает. CSV никогда не отправляется на сервер.
Пример
Список заказов с амперсандом, апострофом, кавычками и HTML внутри двухстрочного комментария, преобразованный с настройками по умолчанию (Только таблица, с оформлением, переносы строк показываются). В qty только числа, поэтому его ячейки получают class="num".
id,product,qty,comment 0042,Fish & Chips,2,"<b>Extra</b> vinegar no salt" 0043,"O'Brien's ""Stout""",12,
<table class="csv-table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">product</th>
<th scope="col">qty</th>
<th scope="col">comment</th>
</tr>
</thead>
<tbody>
<tr>
<td dir="auto">0042</td>
<td dir="auto">Fish & Chips</td>
<td class="num" dir="auto">2</td>
<td dir="auto"><b>Extra</b> vinegar<br>no salt</td>
</tr>
<tr>
<td dir="auto">0043</td>
<td dir="auto">O'Brien's "Stout"</td>
<td class="num" dir="auto">12</td>
<td dir="auto"></td>
</tr>
</tbody>
</table>Вопросы и ответы
Безопасно ли вставлять результат на свой сайт?
Данные не могут внедрить разметку: каждое значение, заголовок и подпись экранируются, и ни одно значение не попадает в атрибут. Единственные теги в результате — элементы таблицы, которые записывает сам конвертер.
Откуда на странице атрибут lang="ru"?
Полная страница получает языковой тег по языку сайта, которым вы пользуетесь, — в английской версии это lang="en". Если ваши данные на другом языке, измените атрибут lang после скачивания.
Можно ли сортировать или фильтровать таблицу HTML?
Результат — статическая таблица без скриптов. Сначала отсортируйте или отфильтруйте данные с помощью сортировки CSV или фильтра строк CSV, а потом конвертируйте.