ViewCSVCSV ファイルを開くか貼り付けると、<th scope="col"> の見出しを並べた <thead> と、1 行につき 1 つの <tr> を持つ <table>、またはそのまま開ける完全な HTML ページが作成されます。すべての値が HTML エスケープされるため、データ内の <script> や & は文字として表示され、マークアップになることはありません。ファイルはブラウザー内で変換され、アップロードされることはありません。
CSV を HTML に変換する手順
- ファイルを開く を選ぶか、
.csv、.tsv、.txtファイルをツールにドロップするか、貼り付け を選びます。列の分かれ方がおかしい場合は、読み込み設定 で区切り文字や文字コードを調整してください。 - 出力 で、既存のページや CMS にマークアップを貼り付ける場合は 表のみ を、単体のファイルにする場合は 完全な HTML ページ を選びます。
- 表のタイトル（省略可） を入力し、スタイルと改行の扱いを決めてから、コピー または HTML をダウンロード を選びます。
README や Wiki には、編集しやすい Markdown の表 が通常は適しています。印刷用のファイルが必要な場合は、CSV を PDF に変換 を使ってください。
各オプションの内容
| 表のみ | 既定の設定です。<table> 要素だけを出力するため、Web ページ、メールのテンプレート、CMS の HTML ブロックにそのまま貼り付けられます。 |
|---|---|
| 完全な HTML ページ | <!doctype html>、<html lang="en"> のような言語タグ（日本語版では lang="ja"）、<meta charset="utf-8">、<title>（表のタイトル。ない場合は Table）を追加するため、どのブラウザーでも正しく開けます。 |
| 表のタイトル（省略可） | 表の最初の子要素として <caption> を書き出します。スクリーン リーダーが表の名前として読み上げる、アクセシブルな名前になります。 |
| 簡単なスタイルを付ける | 既定でオンです。完全なページでは、罫線、網掛けした見出し行、右揃えの数値を指定した小さなスタイルシートを埋め込みます。表のみ の場合は、代わりに表に class="csv-table" を、数値のセルに class="num" を付けるため、見た目は自分の CSS で決められます。 |
| セル内の改行を表示する | 既定でオンです。値の中の改行は <br> になります。オフにすると改行はソースにそのまま残り、ブラウザーでは空白として表示されます。 |
扱いにくいデータの処理
- すべてのセル、見出し、表のタイトルで、
&、<、>、"、'はそれぞれ&、<、>、"、'として書き出されます。データ内のタグは文字として表示されるため、CSV にもともと含まれている HTML も表示用には解釈されません。 - 各セルには
dir="auto"が付くため、アラビア語やヘブライ語の値は、左から右へ書くページの中でも右から左へ表示されます。 - 列が数値の列とみなされるのは、空でないすべての値が単純な数値である場合だけです。
0042のような ID の列は文字列として扱われ、右揃えにはなりません。値自体の書式が変わることはありません。 - 引用符で囲まれたコンマ、引用符、改行は RFC 4180 に従って読み込みます。空の見出しは
Column 3、重複した見出しはname (2)になります。 - 出力は UTF-8 です。完全なページでは
<meta charset="utf-8">で宣言されます。表のみ を別のページに貼り付ける場合は、そのページも UTF-8 である必要があります。
うまくいかない場合
- ソース ファイルでアクセント付きの文字が é のように表示される。 CSV が UTF-8 ではありません。「読み込み設定」でファイルの文字コード（古い Excel で書き出したファイルでは Windows-1252、日本語のファイルでは Shift_JIS が多い）を選び、開き直してください。
- データ内のタグが文字として表示される。 セル内の HTML は、マークアップとして実行されないよう意図的にエスケープされています。内容が信頼でき、表示させたい場合は、結果を編集してください。
- 貼り付けた表に罫線がない。 表のみ では（スタイルをオンにした場合）クラス名が付くだけで、CSS は付きません。サイトのスタイルシートで
.csv-tableとtd.numにスタイルを指定するか、完全な HTML ページ を選んで組み込みのスタイルを使ってください。 - 1 つの列にすべての値が入っている。 区切り文字の判定が誤っています。「読み込み設定」で指定してください。
制限とプライバシー
25 MB、10万行、200万セルまでのファイルは、先頭 200 行のリアルタイムのプレビュー付きで開きます。それより大きなファイルはストリーミング方式で変換します。ファイルを分割して 2 回読み込み（1 回目で列とどれが数値の列かを確認し、2 回目で書き出す）、ダウンロードにはファイル全体が含まれることが通知され、コピー は使えません。1 つの出力ファイルは 4 GB までです。
変換はこのタブ内のバックグラウンドのワーカーで実行されるため、ページの操作が止まることはなく、キャンセル で中止できます。CSV がサーバーに送信されることはありません。
例
アンパサンド、アポストロフィ、引用符、2 行のコメント内の HTML を含む受注リストを、既定の設定（表のみ、スタイルあり、改行を表示）で変換した例です。qty はすべて数値なので、そのセルには class="num" が付きます。
id,product,qty,comment 0042,Fish & Chips,2,"<b>Extra</b> vinegar no salt" 0043,"O'Brien's ""Stout""",12,
<table class="csv-table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">product</th>
<th scope="col">qty</th>
<th scope="col">comment</th>
</tr>
</thead>
<tbody>
<tr>
<td dir="auto">0042</td>
<td dir="auto">Fish & Chips</td>
<td class="num" dir="auto">2</td>
<td dir="auto"><b>Extra</b> vinegar<br>no salt</td>
</tr>
<tr>
<td dir="auto">0043</td>
<td dir="auto">O'Brien's "Stout"</td>
<td class="num" dir="auto">12</td>
<td dir="auto"></td>
</tr>
</tbody>
</table>よくある質問
出力を自分の Web サイトに貼り付けても安全ですか？
データによってマークアップが挿入されることはありません。すべての値、見出し、表のタイトルは HTML エスケープされ、値が属性に入ることもありません。出力に含まれるタグは、このツール自身が書き出す表の要素だけです。
ページの `lang` が ja になっているのはなぜですか？
完全なページの言語タグは、利用しているサイトの表示言語から取られます。データが別の言語の場合は、ダウンロードした後で lang 属性を変更してください。