CSV→HTMLテーブル変換
CSVファイルを <table><tr><td> 形式のHTMLスニペットに変換します。区切り文字・見出し行の有無・thead/tbodyの有無を指定でき、変換結果はその場でプレビューでき、コピー・ダウンロードもできます。ファイルの内容はブラウザ内で処理されサーバーには送信されません。
| 区切り文字 |
|
|---|---|
| 先頭行を見出しとする | |
| thead/tbodyで囲む |
プレビュー
HTMLコード
コピーしました！CSVを入力すると、ここにHTMLテーブルが表示されます。
CSVの行とHTMLテーブルの対応
| CSVの1行 | name,age,city |
|---|---|
| 変換後のHTML記法 | <tr><td>name</td><td>age</td><td>city</td></tr> |
先頭行を見出しとして使う場合は <th> タグの行に、それ以降の各データ行は <td> タグの行に変換されます。
Tips
- HTMLメールやMarkdownが使えない古いCMSに表を貼り付けたいときは、thead/tbodyを外した最小構成の出力が扱いやすくなります。
- セル内の
<・>・&は自動的にHTMLエンティティへエスケープされるため、変換後のコードをそのまま貼り付けても表示が崩れません。 - プレビューは変換結果をそのままブラウザでレンダリングした表示なので、貼り付け先での見え方をコピー前に確認できます。
- 姉妹ツールのCSV→Markdown変換・CSV→JSON変換と合わせて使えば、1つのCSVを用途別に3つの形式へ変換できます。
よくある質問
見出し行と本文行を意味的に区別できるため、可能であれば付けることが推奨されます。ただしメール本文などthead/tbodyの解釈が不安定な環境では、外した最小構成のほうが安定して表示されることがあります。
はい。ダブルクォートで囲まれたセル内のカンマや改行も正しく解釈されるため、Excel等からコピーした複雑なCSVもテーブルの体裁を崩さずにHTMLへ変換できます。
はい。生成されるのは
<table> タグを使った標準的なHTMLスニペットのため、WordPress等のHTML編集モードやHTMLメールの本文にそのまま貼り付けて利用できます。いいえ。変換処理はすべてブラウザ内のJavaScriptで行われ、入力したCSVの内容がサーバーに送信されることはありません。
余談ですが ― <table> タグはなぜ今も生き続けているのか
1990年代後半のWeb黎明期には、レイアウト全体を <table> タグで組む「テーブルレイアウト」が主流だった時代がありました。CSSの表現力が乏しく、複数カラムの段組みを実現する手段が表組みしかなかったためで、当時のHTMLソースは本来の意味である「表形式データ」とは無関係な <table> だらけでした。
CSSが成熟しFlexbox・Gridが普及した現在では、レイアウト目的のテーブル使用は明確なアンチパターンとされています。しかし本来の用途である「行と列を持つ実際のデータ」を表現する場面では、<table> は今も最も適切かつアクセシビリティに優れたタグであり続けています。スクリーンリーダーは <th> と <td> の関係を読み上げに反映できるためです。
ブログ記事やメールマガジンにCSVの内容を貼り付けたいという需要は、HTMLメールがMarkdownを解釈できないことや、一部のCMSがMarkdownプラグインを持たないことから今も根強く存在します。表計算ソフトの結果をワンクリックでHTMLの表に変換できるツールは、こうした「素朴だが定番」の実務ニーズを支えています。