CSV を HTML の表に、大きいものも含めて

カンマ、セミコロン、タブ、縦棒、どれも使われています。とくにセミコロン：小数点にカンマを使う地域で表を書き出すとセミコロンになります。カンマはもう取られているからです。

判定は先頭十行を読み、候補をそれぞれ試して、列数が揃うものを選びます。先頭数行が普通でないファイル —— たとえば見出しの上にタイトル行があるもの —— は読み違えることがあるので、判定した区切り文字は出力に書いてあります。違っていたら手で指定してください。

二重引用符で囲んだ値には区切り文字を入れられ、その中で引用符を二つ続けると引用符そのものの意味になります。これは RFC 4180 で、きちんと処理しています。

引用符で囲んだ値には改行も入れられます。HTML ではそれがセルのなかの <br> になるので、二行の住所は行を壊さずに二行のまま残ります。

一列しかない CSV では区切り文字の注意が出ます。そのファイルはたいてい正常なので、説明しておく価値があります。

判定は、どの文字なら各行を一貫して切れるかを探す方法で動いています。一列だと切る場所がないので、何も区切り文字に見えず、そのとおりに伝えます。出力は正しいままです。一列、行はすべて揃っています。

この注意を見たくなければ、自動のままにせず区切り文字を明示してください。

別々の上限が二つ。ファイル一つ 25 MB、そして十万セル —— 行数×列数なので、六列のファイルなら一万六千行あたり、百列なら千行ほどで止まります。

先に当たるのはセル数のほうで、これはパーサーではなくブラウザの都合です。プレビューではセル一つが複数の DOM ノードになるので、数十万セルの表はそのタブを固めます。固まるより断るほうがましです。

本当にもっと大きいものは行で分けて何回か変換してください —— 見出しの行はそれぞれに付け直せます。空の行は自動で落とします。区切り文字だけの行も含みます。ファイル末尾の「,,,」の塊は、たいていそれです。

見出しの行は <thead> になり、セルは <th scope="col"> です。それ以外は <tbody> に入ります。長さの揃わない行は一番広い行まで埋めて、表が長方形のまま保たれます。何行を埋めたかは出力に書きます —— たいていは手前で何かが壊れているしるしです。

型変換は一切しません。007 は 007 のまま、1-2 のような値が日付になることもありません。Excel はそれをやりますが、ここではやりません。

レスポンシブを有効にすると、表は横スクロールする <div class="table-wrap"> に包まれます。十二列の表はスマートフォンに収まりませんし、あふれさせるとその表だけでなくページ全体が広がってしまいます。