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 to HTML Table

Довідник елементів HTML-таблиці

Добре структурована HTML-таблиця використовує семантичні елементи, що розділяють заголовок, тіло та підвал. Екранні зчитувачі та пошукові системи використовують ці елементи для розуміння структури таблиці. Групування рядків за допомогою thead, tbody та tfoot дозволяє браузерам застосовувати незалежне прокручування та повторювати рядки заголовка в друкованих макетах.

CSV проти HTML-таблиці

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

Приклади коду

Нижче наведено приклади програмної конвертації CSV у HTML-таблиці різними мовами програмування. Кожен приклад окремо обробляє рядок заголовка та екранує HTML-сутності у вмісті клітинок. Ці фрагменти готові до використання у скриптах, конвеєрах збірки або бекенд-ендпоінтах, що генерують 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

Часті запитання