HTMLテーブル作成｜表を編集してコード生成

HTMLテーブル作成ツールでできること

「HTMLで表を作りたいけれど、tableやthの書き方が分からない」「WordPressの記事に見やすい比較表を入れたい」というときに使える、無料のHTMLテーブル作成ツールです。画面上で行・列・文字を編集すると、プレビューとHTMLコードが自動で更新されます。複雑なコードを最初から手入力せずに、表の構成と見た目を整えられます。

表タイトル、1行目の見出し、文字の位置・サイズ、罫線の色、見出しや本文の背景色・文字色・太字を調整できます。本文の奇数行と偶数行を別の色にしたり、特定の行やセルだけを強調したりすることも可能です。生成したコードはコピーして利用するほか、HTMLファイルとして保存できます。

使い方：表の作成からHTMLコードの取得まで

1. 表のサイズを決める：「行数」「列数」を設定します。編集できる範囲は最大20行×10列です。
2. 内容を入力する：編集表のセルをクリックして文字を入力します。Excelなどの表からコピーしたタブ区切りのデータも貼り付けられます（上限を超える部分は取り込まれません）。
3. 見出しとタイトルを設定する：必要なら「1行目を見出し（thead / th）にする」を有効にし、表のタイトルを入力します。タイトルを空欄にすると表示されません。
4. 色・太さを調整する：見出しの背景と文字色、本文の奇数行・偶数行の背景色、罫線、文字サイズなどを選びます。
5. 表示を確認する：「表示プレビュー」で配色や読みやすさを確かめ、問題なければ「HTMLをコピー」または「HTMLファイルを保存」を使います。

表タイトル・見出し・交互配色の設定方法

タイトルはcaptionとして出力

「表のタイトル」に名前を入力すると、HTMLのcaption要素として表の上部に表示されます。左寄せ・中央寄せ・右寄せと、文字色・標準／太字を設定できます。たとえば「プラン別の料金比較」「対応ブラウザ一覧」など、何を比べる表なのか分かるタイトルがおすすめです。

thead・tbodyを分けて見やすく

1行目を見出しとして扱う設定がオンの場合、最初の行はthead内のth、それ以外はtbody内のtdとして出力されます。見出し専用の背景色・文字色・太さを設定できるので、表の項目名を本文と区別できます。見出しを使わない場合はすべて本文行として作成されます。

奇数行・偶数行で背景色を分ける

「交互に背景色を付ける」をオンにすると、tbodyの奇数行と偶数行で異なる背景色を使用できます。たとえば白と淡い青を交互に使うと、横に長い比較表でも行を追いやすくなります。オフにすると本文全体に「奇数行の背景色」が適用されます。背景色を変更した際は、文字とのコントラストも一緒に確認してください。

行・セルを個別に装飾する方法

表の中で一部だけ強調したい場合は、編集表から対象のセルを選択し、「行・セルを個別に装飾する（詳細設定）」を開きます。行（tr）単位でもセル（th・td）単位でも、背景色・文字色・文字の太さを指定できます。「上書き」を有効にした項目だけに個別設定が反映されます。

基本設定よりも行の設定、行の設定よりもセルの設定が優先されます。個別設定を戻したいときは「この行の個別設定を解除」「このセルの個別設定を解除」を使えます。特定の列全体をまとめて装飾する専用機能ではないため、必要に応じて各セルを選択して調整してください。

具体例：3列の比較表を作る

「項目」「内容」「備考」の3列を用意し、1行目を見出しに設定します。本文には「料金／無料／追加費用なし」「表示形式／HTMLテーブル／横スクロール対応」などを入力します。見出しを青背景・白文字・太字にし、本文を白と薄い青の交互配色にすると、情報を追いやすい比較表になります。重要なセルだけ背景色や太字を変えれば、注目してほしい情報も示せます。

生成したHTMLをWordPressで使うには

生成コードには表の構造と色・文字サイズなどのインラインスタイルが含まれ、横幅が足りないときに横スクロールできる枠も出力されます。WordPressのブロックエディターでは「カスタムHTML」ブロックを追加し、「HTMLをコピー」で取得したコードを貼り付けてください。ファイルとして残したい場合は「HTMLファイルを保存」も利用できます。

このツールの表示プレビューは、サイトのテーマから影響を受けにくい独立した表示領域です。そのため、WordPressに貼り付けた後はテーマのCSSや画面幅によって見た目が異なる場合があります。公開前に実際のページをPC・スマートフォンの両方で確認することをおすすめします。

利用時の注意点

• 行数は最大20行、列数は最大10列です。大量データを扱う用途には向きません。
• セルの内容は文字として扱われます。入力したHTMLタグや特殊文字はエスケープされ、セル内のコードとして実行されません。
• 色を自由に設定できるため、淡い文字色と淡い背景色などの組み合わせは読みにくくなる場合があります。
• 横スクロールへの対応は、狭い画面ですべての列が同時に見えることを保証するものではありません。

よくある質問（FAQ）

Q. HTMLの知識がなくても表を作れますか？

A. はい。画面上で行数・列数・文字・配色を設定することでHTMLを生成できます。生成後のコードを自分で修正する場合は、基本的なHTMLの知識があると便利です。

Q. Excelの表をそのまま貼り付けられますか？

A. Excelなどからコピーしたタブ区切りの表データを、セルに貼り付けられます。取り込み範囲は最大20行×10列です。Excelファイルそのものをアップロードして読み込む機能ではありません。

Q. 表の見出しと本文で色を変えられますか？

A. はい。見出しの背景色・文字色・太さと、本文の文字色・太さ・奇数行／偶数行の背景色を個別に指定できます。行やセル単位でさらに上書きすることも可能です。

Q. WordPressに貼り付けてもスマホで表示できますか？

A. 生成コードには横スクロール対応の枠が含まれます。ただし表の列数やWordPressテーマの設定によって見え方が変わるため、公開前にスマートフォンで確認してください。

Q. 作成した表を保存できますか？

A. はい。「HTMLをコピー」でコードを取得するか、「HTMLファイルを保存」でファイルとして保存できます。編集中の設定をアカウントへ保存・同期する機能はありません。