HTMLテーブル生成ツールとは?
HTMLテーブル生成ツールとは、行と列の数を決めてセルに文字を入力するだけで、表(table)のHTMLコードを自動で作成できるツールです。セルの結合(colspan / rowspan)も、範囲をドラッグして「結合」を押すだけで、属性の指定に悩む必要がありません。
HTMLテーブル生成ツールの使い方
- 表の大きさを決める「行」「列」の数を入力または+ / −ボタンで調整します。
- 文字を入力する「文字入力」モードにして、セルをクリックし直接入力します。入力後は「セル選択」モードに戻せます。
- セルを結合・分割する「セル選択」モードでドラッグして範囲を選び「結合」。結合済みのセルを選んで「分割」で元に戻せます。見出しにしたいセルは「td ⇔ th」で切り替えできます。
- コピーして使う完成したら「HTMLをコピー」。枠線を付ける場合は一緒に表示されるCSSもコピーして使えます。
colspan / rowspan について
横方向の結合には colspan、縦方向の結合には rowspan が使われます。本ツールでは結合した範囲から自動でこれらの属性を計算するため、数値を手で数える必要はありません。なお td と th が混在した範囲を結合した場合は td に統一されます。
こんな場面で使えます
ブログ・記事の表組み
比較表や仕様表を、そのまま貼り付けられるHTMLで作成できます。
複雑な結合セルの表
colspan / rowspan を意識せず、ドラッグ操作だけで結合できます。
メール・CMSへの貼り付け
見出し(th)やキャプション付きの表を手早く用意できます。
よくある質問
結合したセルを元に戻せますか?
はい。結合したセルを選択して「分割」を押すと元に戻ります。また「元に戻す」ボタンで直前の操作を取り消せます。
枠線やデザインは付けられますか?
「枠線CSSを付ける」を有効にすると、表用のCSSも一緒に出力されます。色や余白はコピーしたCSSを編集して調整してください。
入力した内容はサーバーに送信されますか?
いいえ、表の作成もコード生成もすべてブラウザ内で行われ、入力内容が外部に送信・保存されることはありません。