HTMLテーブルジェネレーター
GUIでテーブルを作成し、HTML・Markdown・CSV形式のコードを生成できます。料金表やスペック比較表の作成に最適。ヘッダー行・列の固定表示やおすすめプラン強調にも対応しています。
スタイルオプション
固定表示
おすすめ列
選択した列を青色のボーダーと「おすすめ」バッジで強調します。料金プランの比較表などに最適です。
A | B | C | ||
|---|---|---|---|---|
1 | ||||
2 | ||||
3 |
プレビュー
出力コード（HTML）
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>HTMLテーブルとは
HTMLのテーブル（<table>）は、データを行と列で整理して表示するための要素です。 料金比較表、仕様一覧、スケジュール表など、構造化されたデータの表示に適しています。
セマンティックなテーブルHTMLを書くには、<thead>（ヘッダー）、<tbody>（本体）、 <th>（見出しセル）、<td>（データセル）を正しく使い分ける必要があります。 このツールを使えば、GUIで入力するだけで正しい構造のHTMLを自動生成できます。
出力形式の使い分け
| 形式 | 用途 |
|---|---|
| HTML | Webサイト、ブログ（HTML直書き） |
| Markdown | GitHub README、技術ブログ、ドキュメント |
| CSV | Excel・スプレッドシートへの取り込み |
行列固定・おすすめ列ハイライト
HTML出力モードでは、スタイルオプションからヘッダー行や1列目の固定（sticky）を設定できます。 料金表やスペック比較表など、行数・列数が多いテーブルでスクロールしても見出しが常に表示されます。 CSSの position: sticky を使用するため、テーブルの親要素に高さの指定や overflow: auto が必要です。
また、スタイルオプションの「おすすめ列」からハイライトしたい列を選択すると、青色のボーダーと「おすすめ」バッジで強調表示できます。 SaaSの料金プラン比較表で定番の、推奨プランを目立たせるデザインをコード付きで生成します。
テーブルの活用例
料金表・プラン比較表 — SaaSやフリーランスのサービス紹介で使用する料金プラン表。おすすめ列ハイライト機能を使えば、 推奨プランを目立たせるデザインも自動で生成できます。
スペック比較表 — 製品やツールの機能比較を一覧で表示。ヘッダー行と1列目を固定すれば、 列数が多くなっても項目名を見失わずにスクロールできます。
スケジュール・ガントチャート風の表 — プロジェクトの進捗管理やイベント一覧。Markdown出力でGitHub IssueやREADMEに直接貼り付けられます。
Markdownテーブルの書き方
Markdownテーブルはパイプ記号（|）とハイフン（---）で構成されます。 手書きではセル幅の調整や区切り行の入力が面倒ですが、このツールを使えばGUIで入力するだけで 正しいMarkdown記法を自動生成できます。
| プラン | 月額 | 機能 | | --- | --- | --- | | Free | ¥0 | 基本機能 | | Pro | ¥980 | 全機能 |
GitHub、Qiita、Zenn、Notionなど多くのサービスがMarkdownテーブルに対応しています。 CSV形式のデータがある場合は「CSV貼り付け」機能でインポートしてからMarkdownに変換するのが効率的です。
このツールの使い方
- セルをクリックしてデータを入力します（Excelデータは「CSV貼り付け」で一括インポート可能）
- 行や列の追加・削除ボタンでテーブルサイズを調整します
- 「1行目をヘッダーにする」チェックで<thead>/<th>を生成します
- HTML出力時はスタイルオプションで行列固定・おすすめ列を設定できます
- 出力形式（HTML / Markdown / CSV）を切り替えてコードをコピーします
- プレビューで実際の表示を確認し、必要に応じて調整します
関連記事
よくある質問
- Q. どの出力形式に対応していますか？
- HTML、Markdown、CSVの3形式に対応しています。HTMLはWebサイトやブログに、MarkdownはGitHub READMEや技術ブログに、CSVはExcelやスプレッドシートへの取り込みに使えます。用途に合わせてワンクリックで切り替え可能です。
- Q. ヘッダー行や列を固定（freeze）できますか？
- はい、HTML出力モードのスタイルオプションから「ヘッダー行を固定」「1列目を固定」を設定できます。CSSのposition: stickyを使用したコードが自動生成されるので、料金表やスペック比較表などスクロールが必要なテーブルに最適です。
- Q. おすすめ列のハイライト表示はできますか？
- はい、HTML出力モードのスタイルオプションにある「おすすめ列」セレクトボックスから列を選択すると、青色のボーダーと「おすすめ」バッジ付きで強調表示できます。SaaSの料金プラン比較表などで推奨プランを目立たせるデザインに対応しています。
- Q. Excelやスプレッドシートのデータをそのままテーブルにできますか？
- はい、「CSV貼り付け」ボタンからExcelやGoogleスプレッドシートのデータを直接貼り付けられます。タブ区切り（TSV）とカンマ区切り（CSV）の両方を自動判別するので、コピー＆ペーストするだけでテーブルに変換できます。
- Q. Markdownテーブルの書き方がわかりません。自動生成できますか？
- はい、GUIでセルにデータを入力し、出力形式を「Markdown」に切り替えるだけでパイプ記号（|）区切りのMarkdownテーブルが自動生成されます。GitHub READMEやQiita、Zennなどの技術ブログにそのまま貼り付けて使えます。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。