HTMLテーブルジェネレーター
本当に必要な表だけ作り、ほぼ要らないスプレッドシートは開かない
価格表、スペック比較、配送サマリーなど、小さな表のためにExcelを開き、直しが必要なHTMLを受け取る作業はよくあります。このHTMLテーブルジェネレーターは行・列数から始め、セルに直接入力し、CMSブロック、ニュースレターモジュール、社内Wikiに貼れる `<table>` コードを出力します。 HTML表作成ツールを探して手書きマークアップと比較しているなら、ここでは小さな格子を編集する流れに近いです。ツールバーで構造を変え、セル内で書式を付け、プレビューペインとHTMLパネルが同期します。テーブルHTMLを一度作ってすぐ使うのに向いています。
本番投入前に信頼できるマークアップ
4×6の表は `<td>` が24個、先頭行がヘッダーなら `<thead>` も必要です。閉じタグの欠落や、下の行と合わない `rowspan` だけで、メールテンプレートが崩れたりCMSがセーフモードに入ったりします。このページのエディタはその種の作業向けです。行・列のサイズ変更、Shift+クリックでラベルを結合、価格の太字、リンク、PC上の画像をセルに入れるまで、格子から離れません。 表単位で `border`、`cellpadding`、`width`、`id`、`class`、枠線結合、数種のカラーテーマを指定でき、セルごとに手塗りする必要はありません。プレビューで体裁が合えばHTMLタブでフラグメントをコピーするか、基本の表CSS入りの完全ドキュメントをダウンロードしてブラウザだけで確認できます。
表用HTMLを生成するツールの多くは、スプレッドシートの書き出しだけだったり、コードだけ見せてレンダリングが信用できなかったりします。ここでは編集・プレビュー・ソースが結び付いています。左で直すと右にすぐ反映され、タグはワンクリックで確認できます。結合後に余分なセルがないか、`</th>` の抜け、格子ではよく見えるのにiframeでは余白がおかしいか——貼り付け前に拾えます。処理はブラウザ内で、表の内容が「変換」のためにサーバーへ送られることはありません。
HTMLテーブルジェネレーターを開く編集とプレビューを並べて
格子の変更がプレビューと書き出し文字列に同時に反映され、属性がどう出力されるか当て推量しなくて済みます。
URL・ローカル画像
リンクまたはPCのファイルで商品写真やアイコンをセルに入れられ、カタログや比較表に便利です。
フラグメントまたは完全ドキュメント
既存ページには `<table>` だけコピー。手早く見たいときは完成したHTMLファイルを書き出します。
このHTMLテーブルジェネレーターの違い
格子編集、素直なマークアップ、貼り付け前にミスを拾うプレビュー——Excel書き出しをもう一段挟む流れではありません。
空の格子から貼れるHTMLまで、道のりが短い
行・列を決め、必要なら先頭行を `<thead>` のヘッダーに、キャプションを付け、スプレッドシート書き出しなしでセルを埋められます。行挿入・列削除・セル結合は表メニューにまとまり、画面を移さず済みます。出力はCMSやメールツールが期待する素直な表マークアップで、望まないインラインスタイルの塊ではありません。
- 結合・書式付きの格子編集
- プレビューとHTMLが同期
- セル内ローカル画像
- ブラウザ内実行・アップロードなし
HTMLテーブルジェネレーターの使い方
表の形を決める
行・列数を入力し、上段を `<th>` にしたいときは「先頭行をヘッダーに」をオンにします。表オプションで幅、枠線、キャプション、テーマを合わせます。あとからサイズを変えても、格子が許す範囲では結合と内容は維持されます。
セルを入力・書式設定
セルをクリックして入力します。書式バーで強調、リンク、画像（URL・ローカル）を入れます。結合はセルをクリックし、Shift+クリックで矩形を取り、表メニューから「セルを結合」。分割で列を戻せます。
プレビューとHTMLを照合
編集中はプレビュータブを開いたままに。結合後に列がずれたりヘッダーのrowspanがおかしいときは、HTMLタブで `colspan`、`rowspan` を確認します。CMSプレビューの往復が減ります。
書き出して実環境で確認
埋め込み用フラグメントをコピーするか `.html` を受け取るか、トップページのPlaygroundへ送ります。メールクライアントとCMSには差が残るので、実際の貼り付け先でも一度見る価値はあります——ただし出発点は壊れたタグの修理ではなく、きれいな意味的な表です。
HTMLテーブルジェネレーター FAQ
表を作る準備はできましたか？
格子を描き、プレビューとHTMLが一致するのを確認してからコピーしてください。
HTMLテーブルジェネレーター
- 結合・書式付きの格子編集
- ローカル画像とライブプレビュー
- フラグメントまたは完全HTMLの書き出し
- No signup; use the tool in the browser
メールクライアントとCMSでは余白の出方がまだ違います。貼ったあと実環境でも一度確認してください。
そのまま貼れる `<table>` HTML
画面で作り、プレビューで確認し、HTMLタブから同じマークアップをコピー。