CSVからHTMLテーブルへ変換

ブログ記事、社内ウィキ、またはメールニュースレターにデータテーブルを挿入する場合、通常はCMSのテーブル編集機能と対抗することになります。代わりに以下の方法でCSVファイルを貼り付けてください:最初の行は「<th>」セルとして扱われ、その後の行はすべて「<td>」となり、全体はインラインスタイルを含まないシンプルな「<table>」要素で囲まれます。このマークアップは、サイトが提供するCSSをそのまま採用できるため、非常に簡潔です。

変換の実行方法

  1. 1

    CSVを貼り付けます

    行の区切りで行を分割します;`str_getcsv`は各行を解析し、引用符付きカンマおよびエンコードされた引用符を正しく処理します。

  2. 2

    ヘッダーモードを切り替えます

    オンの状態では、最初の行には`<th>`セルが表示されます。オフの状態では、すべての行が標準の`<td>`として表示されます。

  3. 3

    値はHTMLエンコードされています

    コンバータはLaravelのe()ヘルパーを呼び出すため、`<`、`>`および`&`は出力時に安全に文字エンコード処理が施されています。

  4. 4

    マークアップをコピーします

    HTMLは可読性のため2つのスペースでインデントされています。これを直接Bladeファイル、Markdown投稿、またはWYSIWYGソースビューに挿入しても問題ありません。

出力のスタイル設定とアクセシビリティ

このコンバーターは構造がシンプルなHTMLを出力します。クラスもインラインスタイルも、<thead><tbody>のラッパーも使用していません。これにより出力内容はポータブルですが、必要に応じて美化する必要があります。

最小限のスタイルシート

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
th { background: #f9fafb; font-weight: 600; }
tr:nth-child(even) td { background: #fafafa; }

アクセシビリティを手早く改善する

  • 長いテーブルがある場合は、最初の行を「<thead>」で囲みましょう。これにより、ユーザーが行を移動する際にスクリーンリーダーがヘッダー列を認識できます。出力内容を簡潔に保つため、コンバーターはこの処理を自動的には実行しません。
  • テーブルの上部に「<caption>」要素を追加し、そのデータが何を表しているかを分かりやすい言葉で説明してください。
  • ヘッダー行が列を示している場合は、<th>セルにscope="col"を使用してください。最初の列が行を識別している場合は、scope="row"を使用してください。

HTMLが正しい形式でない場合

出力先がMarkdownの場合は、代わりにCSVからMarkdownへの変換ツールを使用してください。出力先がデータベースの場合は、CSVからSQLへの変換ツールにより直接実行可能なINSERT文が生成されます。HTMLテーブルはページへの表示には非常に適していますが、クエリや再並べ替えが必要な処理にはやや不向きです。

よくある質問

はい。値はLaravelのe()ヘルパーを使用して文字列としてエンコードされるため、<&lt;に変換され、ユーザーが提供したコンテンツからスクリプトタグを挿入したりテーブルを早期に閉じたりすることはできません。

デフォルトでは出力されません。出力は、直下に<tr>子要素を持つ単一の<table>です。対象のCSSで必要な場合は、ヘッダーの<tr><thead>で、その他の部分を<tbody>で囲んでください。

埋め込みされた改行文字を含むセルはそのまま表示されます。ブラウザで改行が表示されるようにする場合は、変換前にそれらを<br>に置き換えるか、<td>のCSSでwhite-space: pre-wrap;を設定してください。

はい。テーブルを作成するためにCSVは当サーバーに送信されます。保存はされず、ページのリンクにも追加されません。

関連ツール