🔲 HTMLテーブル生成

入力データ(カンマまたはタブ区切り)

1行目を見出し行にする

Name	Age	City
Alice	30	Tokyo
Bob	25	Osaka

生成されたHTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>Tokyo</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>Osaka</td>
    </tr>
  </tbody>
</table>

スプレッドシートからコピーしたタブ区切りのデータや、カンマ区切りのデータから、HTMLのtableタグを自動生成するツールです。プレビュー表示で見た目も確認できます。

使い方

テーブルにしたいデータを、1行に1レコードずつ入力します(セルはカンマまたはタブで区切ります)。
必要に応じて「1行目を見出し行にする」を切り替えます。
生成されたHTMLコードを「コピー」ボタンでコピーします。

計算の仕組み

このツールは、1行を表の1行、区切り文字で分けた各値を1つのセルとして、HTMLの <table> を組み立てます。行にタブ文字が含まれていればタブ区切り、なければカンマ区切りとして読み取ります。Excelやスプレッドシートからセル範囲をコピーすると、セルの間はタブ、行の間は改行になるため、そのまま貼り付けるだけで表として認識されます。 1行目は見出しとして <thead> の中に <th> で、2行目以降は <tbody> の中に <td> で出力します。<th> を使うことで、スクリーンリーダーなどの支援技術が見出しとデータを区別できるようになります。セルの中の「&」「<」「>」は、HTMLのタグとして解釈されないよう &・<・> に変換して出力します。

計算例

スプレッドシートから次の範囲をコピーして貼り付けた場合商品価格りんご 120 みかん 80 生成されるHTML（抜粋） <table> <thead> <tr> <th>商品</th> <th>価格</th> </tr> </thead> <tbody> <tr> <td>りんご</td> <td>120</td> </tr> … </tbody> </table>

使用上の注意

カンマ区切りで入力すると、セルの中のカンマも区切りとして扱われます。カンマを含むデータはタブ区切りで入力してください。
セルの結合（colspan・rowspan）には対応していません。
生成されるHTMLにはクラスやスタイルが付いていません。見た目はCSSで調整してください。
各セルの前後の空白は取り除かれます。

よくある質問

Excelやスプレッドシートからそのまま貼り付けられますか?

はい。スプレッドシートからコピーしたセル範囲はタブ区切りになっているため、そのまま入力欄に貼り付けるだけで自動的に認識されます。

セルの中にカンマを含むデータは正しく扱えますか?

カンマ区切りの入力の場合、セル内のカンマは列の区切りとして解釈されてしまいます。カンマを含むデータはタブ区切り(スプレッドシートからのコピー)でご利用ください。

生成されたHTMLにCSSクラスは付与されますか?

いいえ。生成されるのはシンプルな<table><thead><tbody>構造のみで、クラス名やスタイルは付与されません。必要に応じて手動で追加してください。

🔲 HTMLテーブル生成

使い方

計算の仕組み

計算例

使用上の注意

よくある質問

関連ツール