Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
このツールは使いやすかったですか？
フィードバックは改善に役立ちます
ドラッグ＆ドロップでHTMLテーブルを作成。セル結合やスタイル設定に対応し、コードをワンクリックでコピーできます。
{row}と{col}のプレースホルダーを使用できます。
1～20行/列に対応します。範囲外の値は自動修正されます。
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 |
|---|---|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 | Row 1 Cell 4 | Row 1 Cell 5 |
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 | Row 2 Cell 4 | Row 2 Cell 5 |
| Row 3 Cell 1 | Row 3 Cell 2 | Row 3 Cell 3 | Row 3 Cell 4 | Row 3 Cell 5 |
| Row 4 Cell 1 | Row 4 Cell 2 | Row 4 Cell 3 | Row 4 Cell 4 | Row 4 Cell 5 |
| Row 5 Cell 1 | Row 5 Cell 2 | Row 5 Cell 3 | Row 5 Cell 4 | Row 5 Cell 5 |
| Row 6 Cell 1 | Row 6 Cell 2 | Row 6 Cell 3 | Row 6 Cell 4 | Row 6 Cell 5 |
概要
解決できる課題、処理の仕組み、データの範囲を確認できます。
このHTMLテーブル生成ツールは、行数・列数、列見出し、配色テーマ、表示オプションを指定し、プレビューとHTMLコードを作るツールです。表の中身をデータファイルから読み込むのではなく、指定した形のセルとサンプル文言を生成します。CSVやExcelの表をそのままHTMLへ変換したい場合は、入力方式が異なります。
表は行と列の関係で情報を示すHTML要素です。出力には表本体のほか、選択したテーマのスタイルが含まれます。見出しを有効にすると列名が見出しセル（<th>）になり、通常のデータセル（<td>）と区別されます。仕様上の要素の役割はWHATWG HTML Standardの表に関する定義で確認できます。
行数と列数はそれぞれ1～20の範囲です。列見出しは改行またはカンマで区切って入力でき、指定数に足りない場合は「Header 1」のような既定名が補われます。セルのサンプル文言は「Row {row} Cell {col}」のようなテンプレートから作られ、{row}と{col}は行・列番号に置き換わります。サンプル内容をオフにすれば空のデータセルになります。
見出し行、行ホバー時の強調、サンプル文言、<thead>と<tbody>による区分、コードの圧縮を切り替えられます。出力はHTMLの表とスタイルの断片で、完全なページやデータ入力・検証機能ではありません。HTML表の基本要素と見出し・データセルの考え方はMDNのHTMLテーブル基礎も参考になります。
使い方
手順に沿って操作し、例を使って入力と結果を確認します。
寸法を決める：行数と列数を入力します。値は1～20の範囲に整えられ、プレビューにも反映されます。
見出しとセル文言を整える：見出し欄に列名を改行またはカンマ区切りで入力します。セルテンプレートには必要に応じて{row}（行番号）と{col}（列番号）を使います。日本語の表にする場合、初期値の「Header 1」「Row 1 Cell 1」などは日本語の見出しや例に置き換えてください。
表示方法を選ぶ：テーマを選択し、見出し行、ホバー強調、サンプル内容、意味的な区分、コード圧縮の各設定を確認します。たとえば見出しを「商品、価格、在庫」とし、サンプル内容をオフにすると、実データを後から埋めるための枠を作れます。
プレビューを確認してコピー：行列数、見出し、見た目を確認し、生成されたHTMLコードをコピーします。圧縮を有効にすると改行や空白が少ないコードになりますが、表の内容自体を変える設定ではありません。
活用例
仕事や日常の流れの中での活用方法を紹介します。
曜日と科目などの列見出しを設定して表の構造を作り、コピーしたコードを課題ページや学習用HTMLに貼り付けて、実際の内容を編集できます。
項目名と行列数を先に決め、テーマを選んで見た目を確認できます。コードはページやCMSのHTML編集欄に組み込み、掲載先で表示を確認します。
画面設計や説明資料に使う仮の表を作り、見出し・本文の区分を含む出発点として利用できます。複雑な表の関係や操作機能は、対象プロジェクトに合わせて別途実装します。
Q&A
よくある疑問や迷いやすい点をまとめて確認できます。
このツールはCSV・Excelの読み込みやセルごとのデータ貼り付けには対応していません。行列の形、見出し、サンプル文言を設定してコードを作る用途です。
はい。見出し欄やセルテンプレートに日本語を入力できます。ただし初期表示の見本は英語なので、意図した日本語の内容になるよう設定欄を編集してください。
見出し欄の項目は列数に合わせて使われます。項目が足りない列には「Header 1」などの既定名が入るため、列数と見出しの数をそろえてプレビューを確認してください。
いいえ。生成されるのは表とスタイルの断片です。既存ページの適切な場所に貼り付けるか、別途HTMLページの構造を用意してください。
注意
利用範囲、結果の制限、必要な注意点を事前に確認します。
プレビューで見える結果が、貼り付け先のページでも同じになるとは限りません。サイト側のCSSやCMSの設定によって色・余白・幅が変わることがあるため、公開前に実際の表示環境で確認してください。列数が多い表や長い文言は、狭い画面で読みにくくなる場合があります。
見出しや意味的な区分を選ぶだけで、表の内容が正確になったり、すべての利用者にとって読みやすくなったりするわけではありません。見出しとデータの対応が明確か、複雑な表なら必要な構造を追加できているかを確認します。このツールはセル結合、並べ替え、検索、データの正誤確認を行いません。
関連
関連ツール、特集、利用可能なAPIを探せます。