HTMLテーブルジェネレータ
ビジュアルエディタからHTMLテーブルコードを生成します。行と列を追加し、ヘッダーとスタイルオプションを設定できます。インラインスタイルまたはCSSクラスを使用したクリーンなHTMLをエクスポートできます。
Rows:3
Columns:4
Border style
Edit Table
HTMLテーブルジェネレータの使い方
- 1行と列の数を設定します。
- 2セルをクリックしてコンテンツを編集します。
- 3ヘッダー行を切り替え、枠線スタイルを選択します。
- 4生成されたHTMLテーブルコードをコピーします。
Zenovayアナリティクス
関連ツール
CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。よくある質問
HTMLテーブルの基本構造は何ですか？▾
<table>：ラッパー要素。<thead>：テーブルヘッダーセクション（オプションだが推奨）。<tbody>：テーブル本体。<tfoot>：テーブルフッター（オプション）。<tr>：テーブル行（thead、tbody、またはtfoot内）。<th>：テーブルヘッダーセル — デフォルトで太字・中央揃え、scope属性を持つ。<td>：テーブルデータセル。例：<table><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody><tr><td>Alice</td><td>30</td></tr></tbody></table>。
HTMLテーブルに境界線を追加するにはどうすればよいですか？▾
HTMLのborder属性は非推奨です。CSSを使用してください：table { border-collapse: collapse; } td, th { border: 1px solid #ddd; padding: 8px; }。border-collapse: collapseにより隣接する境界線が1つにマージされ、border-collapse: separate（デフォルト）は別々の境界線を保持します。縞模様の行には：tr:nth-child(even) { background: #f9f9f9; }。ホバー効果には：tr:hover { background: #f0f0f0; }。
colspanとrowspanとは何ですか？▾
colspan：セルが跨ぐ列数。rowspan：セルが跨ぐ行数。例：<td colspan="2">2列に跨がる</td>。複数の列をカバーするヘッダーや複数の行をカバーするセルなど、結合されたセルに使用されます。colspan/rowspanを使用する場合、跨がれたセルはHTMLから削除されますが、テーブルは正しくレンダリングされます。ほとんどのスプレッドシート-to-HTMLコンバーターはこれを自動的に処理します。
HTMLテーブルをアクセシブルにするにはどうすればよいですか？▾
ヘッダーセルにscopeを追加します：<th scope="col">Column</th>または<th scope="row">Row header</th>。テーブルタイトルには<caption>を使用します。複雑なテーブルにはid/headers属性を追加します：<th id="h1">Name</th>、<td headers="h1">Alice</td>。テーブル以外のHTML要素をテーブルとして使用する場合はrole="table"を使用します。レイアウトにテーブルを使用しないでください — CSS GridまたはFlexboxを使用してください。スクリーンリーダーは列/行数をアナウンスし、矢印キーでセルをナビゲートします。
HTMLテーブルをレスポンシブにするにはどうすればよいですか？▾
スクロール可能なコンテナでラップします：<div style="overflow-x:auto"><table>...</table></div>。これにより小さい画面での水平スクロールが可能になります。より高度なテクニック：CSSでモバイル上の重要度の低い列を非表示にする（ブレークポイントでdisplay:none）、data-label属性+CSSを使用して列が折りたたまれたときにラベルを表示する、またはモバイルでカードに変換する：table { width:100% } td { display:block; } td::before { content:attr(data-label); }。DataTablesなどのライブラリはレスポンシブ動作を自動的に処理します。