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> タグの行に変換されます。
CSV→HTMLテーブル変換とは
HTMLで表を書くには、行ごとに <tr>、セルごとに <td> を並べる必要があり、手作業では手間がかかります。このツールはCSVを読み取り、<table> 形式のHTMLスニペットへ変換します。結果はその場でプレビューできるため、貼り付け先での見え方をコピー前に確認できます。
セル内の <・>・& は自動でHTMLエンティティへ変換されるため、記号を含むデータでも表示が崩れません。thead・tbodyで囲むかどうかも選べます。意味的には付けるほうが望ましいものの、HTMLメールなど解釈が不安定な環境では外した最小構成が安定します。
HTMLテーブルの作り方
- CSVを貼り付ける 入力欄にCSVを貼り付けます。表計算ソフトからコピーした場合は区切り文字をタブに変更してください。
-
見出し行の扱いを決める
「先頭行を見出しとする」を有効にすると、1行目が
<th>タグで出力されます。 - thead/tbody の有無を選ぶ 通常は付けたままで構いません。HTMLメールなど表示が不安定な環境向けには外してください。
- プレビューで確認してコピーする 実際にレンダリングされた表を見て問題なければ、HTMLコードをコピーして貼り付けます。
使いこなすためのヒント
- HTMLメールやMarkdownが使えない古いCMSに表を貼り付けたいときは、thead/tbodyを外した最小構成の出力が扱いやすくなります。
- セル内の
<・>・&は自動的にHTMLエンティティへエスケープされるため、変換後のコードをそのまま貼り付けても表示が崩れません。 - プレビューは変換結果をそのままブラウザでレンダリングした表示なので、貼り付け先での見え方をコピー前に確認できます。
- 姉妹ツールのCSV→Markdown変換・CSV→JSON変換と合わせて使えば、1つのCSVを用途別に3つの形式へ変換できます。
CSV→HTML変換の活用シーン
ブログやCMSに表を載せる
Markdownに対応していないCMSでも、HTML編集モードへ貼り付ければ表を掲載できます。
HTMLメールに表を入れる
メールはMarkdownを解釈しないため、表を入れるにはHTMLが必要です。thead/tbodyを外した最小構成が安定します。
実装前のモックを作る
画面設計の段階で、実データに近い表をすぐHTMLにできます。スタイル適用の確認にも使えます。
記号を含むデータを安全に載せる
不等号やアンパサンドを含む値も自動でエスケープされるため、貼り付け先でレイアウトが壊れません。
HTMLテーブルの用語
- table 要素
- 表を表すHTMLタグです。行と列を持つ実データの表現に用いる、本来の用途では今も最適なタグです。
- th と td
<th>は見出しセル、<td>はデータセルです。区別することで読み上げソフトが対応関係を伝えられます。- thead / tbody
- 見出し部分と本文部分を意味的に分けるタグです。長い表の印刷時に見出しを繰り返す挙動にも関わります。
- HTMLエンティティ
- 記号を安全に表示するための書き方です。
<は<のように置き換えられます。 - テーブルレイアウト
- 表組みでページ全体の段組みを作る古い手法です。現在は明確なアンチパターンとされています。
よくある質問
<table> タグを使った標準的なHTMLスニペットのため、WordPress等のHTML編集モードやHTMLメールの本文にそのまま貼り付けて利用できます。
余談ですが ― <table> タグはなぜ今も生き続けているのか
1990年代後半のWeb黎明期には、レイアウト全体を <table> タグで組む「テーブルレイアウト」が主流だった時代がありました。CSSの表現力が乏しく、複数カラムの段組みを実現する手段が表組みしかなかったためで、当時のHTMLソースは本来の意味である「表形式データ」とは無関係な <table> だらけでした。
CSSが成熟しFlexbox・Gridが普及した現在では、レイアウト目的のテーブル使用は明確なアンチパターンとされています。しかし本来の用途である「行と列を持つ実際のデータ」を表現する場面では、<table> は今も最も適切かつアクセシビリティに優れたタグであり続けています。スクリーンリーダーは <th> と <td> の関係を読み上げに反映できるためです。
ブログ記事やメールマガジンにCSVの内容を貼り付けたいという需要は、HTMLメールがMarkdownを解釈できないことや、一部のCMSがMarkdownプラグインを持たないことから今も根強く存在します。表計算ソフトの結果をワンクリックでHTMLの表に変換できるツールは、こうした「素朴だが定番」の実務ニーズを支えています。