HTMLテーブルジェネレーター

ビジュアルエディターでHTMLテーブルを作成します。行、列、配置、ヘッダー、ボーダー、ストライプをカスタマイズし、きれいなHTMLコードをすぐにコピーできます。

4
4
1:
2:
3:
4:
 
<table style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
    </tr>
    <tr>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
    </tr>
    <tr>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
    </tr>
  </tbody>
</table>
すべてのテーブル生成はブラウザで処理されます。セル内容はセキュリティのため自動的にHTMLエスケープされます。

使い方

  1. 1

    テーブルサイズの設定

    +/-ボタンで行と列の数を調整します。最大20行、12列まで対応しています。

  2. 2

    セル内容の入力

    グリッドエディターのセルをクリックして内容を入力します。「ヘッダー行」が有効な場合、最初の行がヘッダーになります。

  3. 3

    スタイルのカスタマイズ

    ボーダー、ストライプ行、ヘッダー背景、レスポンシブラッパーのオプションを切り替えてテーブルをスタイリングします。

  4. 4

    HTMLをコピー

    「コピー」をクリックして生成されたHTMLテーブルコードをコピーします。

よくある質問

メールで使えますか？
はい！インラインスタイルを使用しているため、外部CSSを削除するメールクライアントと互換性があります。
コンテンツはエスケープされますか？
はい。すべてのセル内容はXSS攻撃を防ぐため自動的にエスケープされます。
列の配置を設定できますか？
はい！配置ボタン（← ↔ →）で各列の配置を独立して設定できます。
レスポンシブラッパーとは？
「レスポンシブラッパー」を有効にすると、テーブルがoverflow-x: autoのdivで囲まれ、小さい画面で横スクロールが可能になります。