CSV to HTML Table

Что такое конвертация CSV в HTML-таблицу?

Конвертация CSV в HTML-таблицу преобразует значения, разделённые запятыми, в структурированную HTML-разметку, которую браузеры отображают как визуальную таблицу. Результат использует стандартные элементы HTML, определённые в HTML Living Standard: table, thead, tbody, tr, th и td. В процессе конвертации каждая строка CSV отображается в элемент tr, а каждое поле — в ячейку td или th.

CSV-файлы хранят данные в виде обычного текста: строки разделены переносами строк, поля — разделителями (как правило, запятыми). CSV хорошо подходит для хранения данных и обмена между приложениями — Excel, Google Sheets, базами данных, — но не имеет слоя представления. HTML-таблицы добавляют этот слой, оборачивая данные в семантическую разметку с поддержкой оформления через CSS, сортировки через JavaScript и доступности с помощью атрибутов scope и aria-label.

Конвертация должна обрабатывать несколько граничных случаев, описанных в RFC 4180: поля в кавычках, содержащие запятые или переносы строк, экранированные двойные кавычки внутри полей и различные разделители (точки с запятой, табуляции, вертикальные черты). Корректный конвертер также экранирует HTML-сущности в содержимом ячеек, заменяя <, >, &, а также символы кавычек их эквивалентами в виде сущностей, чтобы предотвратить некорректную разметку и уязвимости XSS.

Зачем использовать конвертер CSV в HTML-таблицу?

Создавать HTML-таблицы вручную утомительно и чревато ошибками, особенно для наборов данных с десятками столбцов или сотнями строк. Этот конвертер выполняет разбор, экранирование и форматирование за один шаг.

Варианты использования CSV в HTML-таблицу

Справочник по элементам HTML-таблицы

Хорошо структурированная HTML-таблица использует семантические элементы, разделяющие заголовки, тело и подвал. Программы чтения с экрана и поисковые системы используют эти элементы для понимания структуры таблицы. Группировка строк с помощью thead, tbody и tfoot позволяет браузерам применять независимую прокрутку и повторять строки заголовков в макетах для печати.

CSV vs HTML-таблица

CSV — это транспортный формат, оптимизированный для простоты, тогда как HTML — формат представления, оптимизированный для отображения, доступности и интерактивности в браузерах.

Примеры кода

Ниже показано, как программно конвертировать CSV в HTML-таблицы на разных языках программирования. Каждый пример обрабатывает строку заголовков отдельно и экранирует HTML-сущности в содержимом ячеек. Эти фрагменты готовы к вставке в скрипт, сборочный конвейер или конечную точку серверного API, генерирующую HTML-отчёты из экспорта данных.

// CSV string → HTML table with thead/tbody
const csv = `name,age,city
Alice,30,Berlin
Bob,25,Tokyo`

function csvToHtmlTable(csv) {
  const rows = csv.trim().split('\n').map(r => r.split(','))
  const [headers, ...data] = rows
  const ths = headers.map(h => `<th>${h}</th>`).join('')
  const trs = data.map(row =>
    '    <tr>' + row.map(c => `<td>${c}</td>`).join('') + '</tr>'
  ).join('\n')
  return `<table>
  <thead><tr>${ths}</tr></thead>
  <tbody>
${trs}
  </tbody>
</table>`
}

console.log(csvToHtmlTable(csv))
// → <table><thead><tr><th>name</th>...</tr></thead><tbody>...</tbody></table>

import csv, io, html

csv_string = """name,age,city
Alice,30,Berlin
Bob,25,Tokyo"""

reader = csv.reader(io.StringIO(csv_string))
headers = next(reader)

lines = ['<table>', '  <thead>', '    <tr>']
for h in headers:
    lines.append(f'      <th>{html.escape(h)}</th>')
lines += ['    </tr>', '  </thead>', '  <tbody>']

for row in reader:
    lines.append('    <tr>')
    for cell in row:
        lines.append(f'      <td>{html.escape(cell)}</td>')
    lines.append('    </tr>')

lines += ['  </tbody>', '</table>']
print('\n'.join(lines))
# → well-formed HTML table with escaped special characters

<?php
$csv = "name,age,city\nAlice,30,Berlin\nBob,25,Tokyo";
$rows = array_map('str_getcsv', explode("\n", trim($csv)));
$headers = array_shift($rows);

echo "<table>\n  <thead>\n    <tr>\n";
foreach ($headers as $h) {
    echo "      <th>" . htmlspecialchars($h) . "</th>\n";
}
echo "    </tr>\n  </thead>\n  <tbody>\n";

foreach ($rows as $row) {
    echo "    <tr>\n";
    foreach ($row as $cell) {
        echo "      <td>" . htmlspecialchars($cell) . "</td>\n";
    }
    echo "    </tr>\n";
}
echo "  </tbody>\n</table>";
// → <table><thead>...<th>name</th>...</thead><tbody>...</tbody></table>

# Using awk — quick one-liner for simple CSV (no quoted fields)
awk -F, 'NR==1{print "<table><thead><tr>";for(i=1;i<=NF;i++)print "<th>"$i"</th>";print "</tr></thead><tbody>"}
NR>1{print "<tr>";for(i=1;i<=NF;i++)print "<td>"$i"</td>";print "</tr>"}
END{print "</tbody></table>"}' data.csv

# Using Python one-liner for RFC 4180-compliant parsing
python3 -c "
import csv, sys, html
r=csv.reader(sys.stdin); h=next(r)
print('<table><thead><tr>')
print(''.join(f'<th>{html.escape(c)}</th>' for c in h))
print('</tr></thead><tbody>')
for row in r:
    print('<tr>'+''.join(f'<td>{html.escape(c)}</td>' for c in row)+'</tr>')
print('</tbody></table>')
" < data.csv

Часто задаваемые вопросы