HTML TABLE
HTMLテーブルジェネレーター
行・列を編集して、HTMLのtableをかんたんに作成できます。見出し行、caption、行見出し、セル結合に対応し、プレビューを確認しながらHTMLコードをコピーできます。
表データはブラウザ内だけで処理され、保存・外部送信されません。
GENERATOR
表を編集してHTMLを作成
本文は最大50行・20列です。セル内容は安全なプレーンテキストとして扱います。
表の設定
行数・列数と、必要なHTML構造を選びます。
セルを編集
各セルへ直接入力できます。Tab／Shift+Tabで入力欄を移動できます。
本文セルの結合
選択中: 本文 1行 1列
結合で隠れたセルの内容は保持され、解除すると戻ります。結合と交差する行・列は削除できません。
Excelやスプレッドシートのセルをコピーして貼り付けられます。見出し行がONのときは先頭行を列見出しとして扱います。CSVの引用符ルールは解析しません。
プレビュー
生成される表の構造とセル結合を確認できます。
生成HTML
2スペースで整形した、表本体のHTMLです。見た目は貼り付け先のCSSで調整してください。
HTMLのtableとは？
HTMLの<table>は、関連するデータを行と列で表現する要素です。ページのレイアウト目的ではなく、商品一覧、料金比較、予定表、集計値などの表形式データに使います。
<table>表全体を囲みます。
<caption>表全体のタイトルや主題を示します。
<thead>列見出しなど、表の見出し部分です。
<tbody>表の本文データをまとめます。
<tfoot>注記や合計欄など、表の末尾部分です。本ツールは自動合計しません。
<tr>表の1行を表します。
<th>見出しセルです。
<td>データセルです。
th・td・scopeを使い分ける
thは見出しセル、tdはデータセルです。列見出しにはscope="col"、各行の先頭にある行見出しにはscope="row"を付けると、シンプルなデータ表で見出しとデータセルの関係を明確にできます。
captionは、その表が何についての表なのかを示します。ページ上の前後関係だけでは主題が分かりにくい表では、分かりやすいcaptionを付けましょう。
colspan・rowspanによるセル結合
colspanはセルを複数列へまたがらせます。例: <td colspan="2">合計</td>。rowspanはセルを複数行へまたがらせます。例: <td rowspan="2">東京</td>。
HTMLの表グリッドでは、セル同士が重複しないことが重要です。本ツールは結合範囲の重なりと表外へのはみ出しを検証し、不正なHTMLを生成しません。複数階層の見出しや不規則な見出しを持つ非常に複雑な表は、単純なscopeだけでは関係を表せない場合があります。本ツールは単純〜中程度のデータ表を対象とします。
よくある質問
HTMLの表はどう作りますか？
tableの中にtrを置き、見出しはth、データはtdで記述します。
thとtdの違いは？
thは見出しセル、tdはデータセルです。見出しでないセルへthを使わないことが大切です。
theadとtbodyは何ですか？
theadは表の見出し部分、tbodyは本文部分を構造化する要素です。
captionとは何ですか？
表全体のタイトルや主題を示す要素です。ONにした場合は空欄のまま生成できません。
行見出しはどう作りますか？
各本文行の見出しセルへth scope="row"を使います。本ツールでは「1列目を行見出し」をONにします。
列見出しはどう作りますか？
thead内の見出しセルへth scope="col"を使います。
セルを横に結合できますか？
はい。本文セルを選び、colspanを2以上にして結合します。
セルを縦に結合できますか？
はい。本文セルを選び、rowspanを2以上にして結合します。
セル内にHTMLタグを入力できますか？
セキュリティと予測可能性のため、セル内容はプレーンテキストとして扱います。タグは実行されず、HTMLコードではエスケープされます。
Excelやスプレッドシートから貼り付けられますか？
はい。コピーしたタブ区切りデータを一括貼り付けできます。本文50行・20列を超える場合は切り捨てずに中止します。
表の色や枠線もHTMLで設定できますか？
見た目はCSSで設定するのが基本です。本ツールはセマンティックな表本体のHTML生成を主目的とし、legacy属性やインラインCSSを付けません。