ToolConvoyToolConvoyv2.6
DEV

CSV to HTML — CSV データを HTML テーブルマークアップに変換

CSV データをフォーマット済みの HTML テーブルマークアップに変換します。thead、tbody、CSS クラスを任意で指定でき、すべてブラウザ内で動作します。アップロード不要、制限なし。

● ローカル動作 · タブ内で生成ページ読み込み以降のツールによる通信：0件

CSV to HTML Table

Convert CSV data to a formatted HTML table. Generates clean <table> markup with <thead> and <tbody>. Works entirely in your browser.

こんなツールも

行をソートMD5 ハッシュUUID ジェネレーターJSON → CSVBase64 エンコードPDF 分割HAR → cURLTOML ツール.env ヘルパーMsgPack インスペクターPDF 圧縮PDF → EPUB
変換ツールを開く

CSV to HTML は、テンプレート言語向けの作業に見えて、結局ツールが必要になる変換の一つです。その理由は、本物の CSV-to-HTML 変換では、素朴な文字列連結では正しく扱えない 3 つの事象に対応する必要があるからです。HTML エスケープ(セル内の <script> でページが壊れないようにする)、区切り文字の検出(セミコロン区切りのヨーロッパ向けエクスポートを手動設定なしで使えるようにする)、ヘッダー行の解釈(最初の行を <th> セルにしてアクセシビリティとスタイリングに役立て、データ行と区別する)。各セルを <td> でラップするだけの 10 行スクリプトは、入力に引用符や不等号、非カンマ区切りが現れるまでは動き、その瞬間からスクリプトはバグレポートに化けます。

HTML テーブルを生成する際にあまり自明ではないのは、アクセシビリティです。本ツールのデフォルト出力はセマンティックになっており、<thead> と <tbody> がヘッダー行とデータを分離し、<th scope=\"col\"> が各ヘッダーセルを列ヘッダーとしてマークし、caption はスクリーンリーダーが読み上げる実際の <caption> 要素としてレンダリングされます。いずれもテーブルの表示自体には必須ではありませんが、これが「すべての人に機能するテーブル」と「視覚的なユーザーにしか機能しないテーブル」の違いです。スクリーンリーダーは <th> と scope 属性を使って各セルを読み上げる際に列名を読み上げるため、データテーブルを非視覚的な文脈でナビゲートできるようにする仕組みとなっています。

最終的な受け渡しについて:HTML を静的サイト(ブログ記事、ドキュメントページ、GitHub の README)に組み込む場合は、出力をそのままコピーしてください。すでにテーブルコンポーネントを備えた CMS に組み込む場合は、Markdown 版の方が適していることが多いです。多くの静的サイトジェネレーターは Markdown テーブルを正しい <thead> 付きの HTML に自動変換するためです。配置先がすでにテーブルライブラリ(DataTables、AG Grid)を読み込んでいる Web アプリである場合は、スタイルなしの HTML を生成してそのライブラリに渡してください。スタイルを二重に適用してはなりません。

広告

使い方

  1. CSV データを貼り付けます

    CSV を入力エリアにドロップするか、.csv ファイルを読み込みます。ツールは区切り文字(カンマ、セミコロン、タブ)と UTF-8 BOM の有無を自動検出します。どちらも実際のエクスポートではよく出現します。

  2. HTML 構造を選択します

    最小構成のテーブル(`<table><tr><td>` のみ)、セマンティックなテーブル(`<thead>` と `<tbody>` 付き)、スタイル付きテーブル(Bootstrap 互換クラス付き)から選べます。切り替えるとプレビューが更新されます。

  3. HTML をコピーまたは下载します

    HTML をクリップボードにコピーするか、.html ファイルとして下载します。出力は単一の自己完結型テーブルです。外部 CSS、JavaScript、画像参照は一切含まれません。任意の HTML ドキュメントに貼り付けて使えます。

よくある質問

出力に CSS スタイルは含まれますか?

デフォルトでは含まれません。出力はインラインスタイルのないプレーンなセマンティック HTML です。「スタイル付きテーブル」オプションを有効にすると、Bootstrap 互換のクラス(`<table class="table">`、`<thead class="table-light">`)が追加され、Bootstrap プロジェクトでそのまま使えます。

最初の行はヘッダーとして扱われますか?

特殊文字はエスケープされますか?

はい、セル値に含まれる `<`、`>`、`&`、および引用符文字は HTML エスケープされます。セルに `<script>` を含む CSV を貼り付けると、出力では `&lt;script&gt;` となり、どの HTML ページに貼り付けても安全です。

caption やテーブル ID は追加できますか?

どちらも入力欄下にある任意のフィールドです。caption は `<caption>` としてレンダリングされ(セマンティックでアクセシビリティに有効)、ID は `<table id="...">` としてレンダリングされます(CSS targeting 或いは JavaScript フックに便利)。

空のセルはどのようにレンダリングされますか?

空のセルはデフォルトで `<td></td>` としてレンダリングされ、ほとんどのブラウザでは表示上何も見えません。「空セルに nbsp」オプションを有効にすると `<td>&nbsp;</td>` としてレンダリングされ、罫線のあるテーブルで行の高さを保てます。

制限事項

  • colspan / rowspan には非対応CSV はフラットなグリッドであり、結合セルを表現できません。ソースに結合ヘッダーがある場合、出力ではセルが個別にレンダリングされるため、`colspan` や `rowspan` を追加するには HTML を手動で編集する必要があります。
  • ネストされたテーブルには非対応セル値に含まれる改行は HTML 内でも単一行のままとなり、ネストされた要素にはなりません。複雑なセル内容がある場合は、出力を後処理して改行で分割し、`<br>` や `<p>` で囲んでください。
  • Bootstrap クラスのみ対応「スタイル付きテーブル」オプションが出力するのは Bootstrap 5 のクラス名です。Tailwind、Material UI、その他のフレームワークを使用する場合は、まずスタイルなしのテーブルを生成し、独自のテンプレート側でフレームワークのクラスを適用してください。

プラットフォーム別の注意点

macOS
Numbers と Excel はどちらも macOS ではデフォルトで UTF-8 の CSV をエクスポートします。旧バージョンの Mac 版 Excel は依然として MacRoman を出力する場合があり、レンダリングされた HTML で é の代わりに é のような文字化けが発生したら、UTF-8 で再保存してください。
Windows
Windows 版 Excel は、ロケールによってはデフォルトで ANSI や UTF-16 を出力します。エクスポートのドロップダウンでは「CSV UTF-8 (カンマ区切り)」を選び、決して「CSV (カンマ区切り)」を選ばないでください。出力 HTML のエンコード問題を回避できます。
Linux
ほとんどの Linux ツール(cut、awk、miller)はデフォルトで UTF-8 を出力します。Windows 由来のパイプ入力を扱う場合は、先に `iconv -f cp1252 -t utf8 input.csv > output.csv` を実行し、HTML 出力をクリーンに保ってください。
Web
完全にクライアントサイドで動作します。ページの読み込み後はオフラインでも動作します。HTML 出力は可搬性が高く、任意の HTML ドキュメント、ブログ記事、静的サイトジェネレーターに依存関係なしで貼り付けられます。
広告
広告