カテゴリー: 開発ツール

CSV to HTML テーブル

サイト側で企画したツールツールが見つからない?

CSVをエスケープ済みのHTMLテーブルに変換

CSV、セミコロン、タブまたはパイプ区切りのデータを貼り付けてHTMLテーブルのマークアップを生成します。先頭行をヘッダーとして描画するオプション付きです。すべてのセルの値はHTMLエスケープされます。すべてブラウザ内で完結します。

ブラウザ内で2行の表を生成しました。

HTML
<table>
  <thead>
    <tr><th>name</th><th>score</th><th>team</th></tr>
  </thead>
  <tbody>
    <tr><td>Ava</td><td>92</td><td>Blue</td></tr>
    <tr><td>Noah</td><td>88</td><td>Green</td></tr>
  </tbody>
</table>

このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。

このツールでできること

CSVのエクスポートをHTMLテーブルとして公開するには、通常`<table>`、`<tr>`、`<td>`のマークアップを手で書く必要があり、セルに`<`や`&`のような文字が含まれていると間違えやすくなります。このツールは貼り付けられた区切りデータを解析し、すべてのセルの値をエスケープしてマークアップとして誤読されないようにしたうえで、ヘッダーを指定した場合は`<thead>`行を含む`<table>`を、残りの行には`<tbody>`を書き出します。

使い方

  1. CSVまたは区切りデータを貼り付けるか、例を読み込みます。
  2. 区切り文字と、先頭行がヘッダーかどうかを選択します。
  3. 生成されたHTMLテーブルのマークアップをコピーします。

プライバシー

このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。

よくある質問

データはどこかにアップロードされますか。
いいえ。解析とHTMLの生成はページ内で動作するJavaScriptで行われるため、貼り付けた内容が端末の外に出ることはありません。
生成されたHTMLはページに貼り付けても安全ですか。
すべてのセルの値はマークアップに書き込まれる前にHTMLエスケープされるため、データ内の`<`、`&`、`"`のような文字がタグや属性として解釈されることはありません。
データにヘッダー行がない場合はどうなりますか。
ヘッダーのトグルをオフにしてください。その場合、すべての行は`<thead>`なしで`<tbody>`内の通常の`<td>`行として書き出されます。