CSV→HTMLテーブル変換

CSVをHTMLテーブルに変換します

サンプルを試す

CSV入力

HTML出力

ローカルで実行 · シークレットの貼り付けも安全
HTMLテーブルがここに表示されます…
最初の行をヘッダーとして使用:

CSVからHTMLテーブルへの変換とは?

CSVからHTMLテーブルへの変換は、カンマ区切りの値を、ブラウザが視覚的なテーブルとして表示できる構造化されたHTMLマークアップに変換する処理です。出力にはHTML Living Standardで定義された標準的なHTMLテーブル要素を使用します:<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テーブルを手作業で書くのは手間がかかりミスが起きやすい作業です。特に数十列・数百行のデータセットでは顕著です。このコンバーターは解析・エスケープ・整形を1ステップで処理します。

即時テーブル生成
CSVを貼り付けると、theadとtbodyの構造を持つ完全なHTMLテーブルが即座に得られます。タグの手書きも行ごとのセル数カウントも不要です。
🔒
プライバシー優先の処理
すべての変換はJavaScriptを使用してブラウザ上で実行されます。CSVデータがサーバーに送信されることも、ログに記録されることも、保存されることもありません。
🎯
クリーンで有効な出力
生成されるHTMLはHTML Living Standardに従い、正しいネスト構造になっています:table > thead/tbody > tr > th/td。特殊文字はエンティティエスケープされ、表示の問題を防ぎます。
📋
柔軟な入力形式
カンマ・セミコロン・タブ・パイプを区切り文字として自動検出します。エスケープされたダブルクォートや複数行フィールドを含むRFC 4180のクォートルールにも対応しています。

CSVからHTMLテーブルへの変換ユースケース

フロントエンド開発
サンプルデータからHTMLテーブルを生成してUIコンポーネントをプロトタイプします。出力をReact・Vue・AngularテンプレートにそのままコピーしてCSSクラスを適用できます。
メールテンプレートの作成
メールクライアント(Outlook・Gmail)はHTMLテーブルを確実にレンダリングしますが、ほとんどのCSSレイアウト手法は無視されます。CSVの連絡先リストやレポートをHTMLメールに埋め込めるテーブルに変換できます。
静的サイトのコンテンツ
スプレッドシートからエクスポートしたデータをJekyll・Hugo・AstroのページにHTMLテーブルとして直接埋め込めます。ビルド時のプラグインは不要です。
QAテストデータの表示
CSVのテストマトリクスをHTMLテーブルに変換し、テストレポートやConfluenceページに掲載できます。レビュアーはスプレッドシートアプリケーションを開かずに結果を確認できます。
データジャーナリズム
CSVデータセットをHTMLテーブルに変換し、CMSの記事にスタイリングして埋め込めます。変換後にCSSでストライプ・ソート・レスポンシブ対応を追加できます。
教育とドキュメント
チュートリアル・APIドキュメント・教材のために実際のCSVデータからHTMLテーブルの例を作成できます。ソース形式とレンダリング後の出力の両方を示せます。

HTMLテーブル要素リファレンス

適切に構造化されたHTMLテーブルは、ヘッダー・本文・フッターを分離するセマンティック要素を使用します。スクリーンリーダーと検索エンジンはこれらの要素を使用してテーブルの構造を理解します。thead・tbody・tfootで行をグループ化することで、ブラウザは独立したスクロールを適用し、印刷時にヘッダー行を繰り返すことができます。

要素役割備考
<table>Table rootWraps the entire table structure
<thead>Header groupContains header rows; browsers repeat on print page breaks
<tbody>Body groupContains data rows; enables independent scrolling with CSS
<tfoot>Footer groupSummary or totals row; renders after tbody
<tr>Table rowGroups cells horizontally
<th>Header cellBold and centered by default; supports scope attribute for accessibility
<td>Data cellStandard content cell; accepts any inline or block HTML
<caption>Table captionVisible title above the table; read by screen readers first
<colgroup>Column groupApplies width or style to entire columns without per-cell classes

CSV vs HTMLテーブル

CSVはシンプルさを重視したデータ転送フォーマットですが、HTMLはブラウザでのレンダリング・アクセシビリティ・インタラクティビティを重視した表示フォーマットです。

CSV
プレーンテキスト形式。データ型なし:すべての値は文字列。スタイリングなし、ネストなし、メタデータなし。行は改行で区切られ、フィールドは区切り文字で区切られます。ファイルサイズは最小限。スプレッドシート・データベース・ETLツールで広くサポートされています。RFC 4180で定義されています。
HTML Table
セマンティック構造を持つマークアップ形式。ヘッダー(th)とデータ(td)を区別します。colspan・rowspan・scope・classなどの属性によるスタイリングとアクセシビリティをサポートします。ブラウザがDOMに解析し、CSSとJavaScriptで操作できます。サーバーサイド処理なしにDataTablesなどのライブラリでソート・フィルタリング・ページネーションが可能です。

コード例

以下は各言語でCSVをHTMLテーブルにプログラム的に変換する方法です。各例ではヘッダー行を別途処理し、セルの内容のHTMLエンティティをエスケープしています。これらのコードはスクリプト・ビルドパイプライン・データエクスポートからHTMLレポートを生成するバックエンドAPIエンドポイントにそのまま組み込めます。

JavaScript (browser / Node.js)
// 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>
Python
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
<?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>
CLI (awk / csvtool)
# 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

よくある質問

CSVをHTMLテーブルに変換するにはどうすればよいですか?
入力パネルにCSVを貼り付けます。コンバーターは各行を解析し、最初の行を&lt;thead&gt;内の&lt;th&gt;要素にマッピングし、残りの行を&lt;tbody&gt;内の&lt;td&gt;要素で囲みます。出力はそのままコピーして使用できる完全なHTMLテーブルです。
生成されたHTMLはアクセシブルですか?
出力は&lt;thead&gt;と&lt;th&gt;要素を使用しており、スクリーンリーダーにテーブルの構造情報を提供します。WCAG 2.1の完全準拠のためには、ヘッダーセルにscope属性を追加し、テーブルの内容を説明する&lt;caption&gt;要素を追加することを推奨します。
CSVに含まれる&lt;や&amp;などの特殊文字はどう処理されますか?
コンバーターはHTMLに影響する文字をすべてエスケープします:&lt; は &amp;lt; に、&gt; は &amp;gt; に、&amp; は &amp;amp; に、ダブルクォートは &amp;quot; になります。これによりマークアップの破損を防ぎ、テーブルをWebページに埋め込む場合のXSSを防ぎます。
セミコロン区切りやタブ区切りのファイルも変換できますか?
はい。ツールは入力の最初の行を分析して区切り文字を自動検出します。カンマ・セミコロン・タブ・パイプに対応しています。事前にカンマ区切り形式に変換する必要はありません。
CSVからHTMLへの変換とCSVからMarkdownへの変換の違いは何ですか?
CSVからHTMLへの変換はセマンティック要素(thead・tbody・th・td)を持つブラウザでレンダリング可能なマークアップを生成し、CSSクラスによるスタイリングをサポートします。CSVからMarkdownへの変換はGitHubのREADMEやドキュメントで使用されるパイプ区切りのプレーンテキストテーブルを生成します。スタイリング制御やメール互換性が必要な場合はHTML、ドキュメントやリポジトリにはMarkdownを使用してください。
クォートフィールドを含むCSVファイルは処理できますか?
はい。パーサーはRFC 4180のルールに従います:ダブルクォートで囲まれたフィールドはカンマ・改行・リテラルのダブルクォート(連続する2つのダブルクォートでエスケープ)を含むことができます。クォートは出力から取り除かれ、フィールドの内容がHTMLセル内に配置されます。
生成されたHTMLテーブルにCSSでスタイルを適用できますか?
出力はインラインスタイルやクラスのないプレーンなHTMLなので、任意のCSSを適用できます。&lt;table&gt;要素にクラスを追加し、table th でヘッダー、table td でセル、table tr:nth-child(even) でゼブラストライプのセレクターを使用できます。BootstrapやTailwindには組み込みのテーブルユーティリティクラスがあります。