HTMLテーブル生成ツール（セル結合・CSS付き）
行数と列数を指定して表を作り、セルを編集・結合して、コピーできるHTMLの table タグを出力します。罫線や縞模様などのCSSを付けることもできます。セル内の文字は自動でエスケープされます。逆にHTMLの表からデータを取り出したい場合は HTMLテーブル→CSV変換 をご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
表のサイズ
読み込める行が見つかりませんでした。
表の編集
セルの結合
2つ以上のセルを含む範囲を指定してください。
スタイルと出力
プレビュー
使い方
- 「行数」「列数」で表の大きさを決め、表のセルに内容を入力します。Excelなどの表は「表に読み込む」から貼り付けられます。
- 結合したい範囲を「開始行」から「終了列」で指定し、「セルを結合」を押します。戻すときは範囲内のセルを指定して「結合を解除」を押します。
- 「スタイル」と「CSSの出力方法」、余白や罫線の色を選ぶと、プレビューと出力が変わります。
- 下の「HTML」欄を「コピー」するか、「ダウンロード」でファイルとして保存します。
注意事項
- セル内の & や < や > などの文字は自動でエスケープされ、改行は br タグ（<br>）になります。HTMLタグをセルに書いても、タグとしては動作しません。
- 見出し行を有効にすると、1行目は thead 内の th として出力され、1行目の縦方向の結合（rowspan）は無効になります。
- 結合すると、範囲の左上以外のセルの内容は消えます。
- 縞模様の背景色などは固定の配色です。細かなデザインは、出力したCSSを編集してください。
- プレビューは、このページ内の表示です。お使いのサイトのCSSがあると、見え方が変わることがあります。
用語解説
colspan / rowspan
セルを横方向（colspan）・縦方向（rowspan）に何マス分つなげるかを指定するHTMLの属性です。
thead / tbody / th
thead は見出し行のまとまり、tbody は本文行のまとまり、th は見出しセルを表すタグです。スクリーンリーダーが表の構造を読み上げる助けになります。
インラインスタイル
要素の style 属性に直接CSSを書く方法です。HTMLメールなど、styleタグが使えない場面で役立ちます。
よくある質問
セルを結合する方法と、結合を解除する方法を教えてください。
「開始行」「終了行」「開始列」「終了列」で範囲を指定して「セルを結合」を押すと、範囲の左上のセルに colspan と rowspan が付きます。解除は範囲内のセルを指定して「結合を解除」を押します。結合した範囲の左上以外の文字は消えます。
セルに「<」や「&」を入れても大丈夫ですか？
はい。セルの文字は「<」「&」などに自動でエスケープして出力するため、HTMLタグとして解釈されることはありません。改行は br タグに置き換わります。
styleタグ方式とインライン方式のどちらを選べばよいですか？
ふつうのWebページでは、見た目をまとめて管理できるstyleタグ＋クラスが向いています。HTMLメールやCMSの入力欄など、styleタグが使えない場所では、各要素にstyle属性を付けるインライン方式を選んでください。
見出し行を有効にすると、1行目の縦結合ができません。
thead は本文の行と分けて出力されるため、見出し行の rowspan は無効にしています。縦に結合したい場合は、見出し行の設定をオフにしてください。横方向の結合（colspan）は使えます。
このページをシェア