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

HTMLテーブルジェネレーターの使い方

このツールでは、プレビュー内のセルへ直接文字を入力しながら、HTMLのtable要素を作成できます。行数・列数の変更、thとtdの切り替え、複数セルの結合にも対応しています。

1. 行数と列数を「＋」「−」または数値入力で設定します。
2. 表のセルをクリックし、必要な文字を直接入力します。
3. 見出しにするセルを選択して「thにする」を押します。
4. 必要に応じて複数セルを選択し、「セル結合」を押します。
5. 生成されたHTMLをコピーして使用します。

セルの選択方法

1つのセルをクリックすると、そのセルだけを選択できます。連続する複数のセルはドラッグして選択でき、離れた位置までまとめて選びたい場合はShiftキーを押しながらクリックします。

選択したセルには色が付き、現在の選択範囲がプレビュー下に表示されます。操作をやり直したい場合は「選択解除」を押してください。

thとtdの違い

• th：列名や項目名など、表の見出しに使用するセルです。
• td：表の具体的なデータや内容に使用するセルです。

先頭行をすべてthにするとtheadとして出力され、それ以外の行はtbodyとして出力されます。見出しセルには表の構造に合わせてscope属性も自動的に付与されます。

セルを結合・解除する方法

縦または横に連続するセルを選択して「セル結合」を押すと、rowspanまたはcolspanを使用したHTMLが生成されます。結合済みのセルを選択して「結合解除」を押すと、元のセルへ戻せます。

長方形にならない範囲や、すでに別の結合セルを含む範囲は結合できません。その場合は一度結合を解除してから、範囲を選び直してください。

生成されたHTMLの使い方

「HTMLをコピー」を押し、WebページやWordPressのカスタムHTMLブロックへ貼り付けて使用します。生成されるのは表のHTMLなので、文字色・背景色・罫線・余白などの見た目は使用するサイトのCSSで調整できます。

<table>
  <thead>
    <tr>
      <th scope="col">項目</th>
      <th scope="col">内容</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>サンプル</td>
      <td>テキスト</td>
    </tr>
  </tbody>
</table>

よくある質問

作成できる表の最大サイズは？

行・列ともに最大12まで設定できます。大きな表はスマートフォンで横幅に収まらない場合があるため、設置後に実際の表示も確認してください。

セル内で改行できますか？

セルの編集時にEnterキーを押すと改行できます。不要な改行が入った場合は、セル内で削除してください。

表のデザインも生成されますか？

このツールはHTMLの作成に特化しています。デザイン用CSSは生成されないため、使用するサイトに合わせて自由に装飾できます。

生成したHTMLを商用サイトで使用できますか？

生成されたHTMLは、個人・商用を問わず自由に使用できます。

関連ツール

• CSS Gridジェネレーター
• CSS clamp()ジェネレーター
• Web制作に使える無料ツール一覧