HTMLテーブルジェネレーター

仕組み

1. テーブルの寸法を定義: 初期グリッドを生成するために行と列の数を入力します。
2. データを入力: セルをクリックして内容を入力し、ヘッダー行を追加し、ボーダーとストライプを有効にします。
3. テーブルをスタイル設定: ボーダースタイル、ヘッダーの背景色、行のストライプ、セルパディングを選択します。
4. HTMLをコピー: 生成されたテーブルマークアップには、適切なセマンティック構造を持つ<th>ヘッダーを持つ<thead>が含まれます。

なぜHTMLテーブルジェネレーターを使うのか?

HTMLテーブルマークアップを手動で書くのは退屈で繰り返しが多い, 特に多くの行や複雑なヘッダーを持つテーブルの場合。<table>、<thead>、<tbody>、<tr>、<th>、<td>のネストを毎回正しく取得することはエラーが発生しやすいです。このジェネレーターは、スクリーンリーダー互換性のためにヘッダーセルにscope属性を持つ、セマンティックに正しくアクセシブルなHTMLテーブル、適切なキャプションサポート、ボーダーとホバー状態のためのクリーンなCSSを生成します。価格表、比較表、データ表、ドキュメンテーションに使用してください。

テーブル機能

• thead/tbody構造, アクセシビリティのためのセマンティックテーブルマークアップ
• 行ストライプ, CSS nth-childで交互の色
• ボーダースタイル, フルグリッド、水平のみ、ボーダーなし
• 列のマージ, colspanとrowspanのサポート
• レスポンシブラッパー, モバイル用のオプションの水平スクロールラッパー

HTMLテーブルジェネレーターとは何か?

HTMLテーブルジェネレーターは、スプレッドシートのように埋められる視覚的なグリッドを提供し、正しいセマンティック要素をすべて備えた同等の<table>マークアップを出力します。<table>、<thead>、<tbody>、<tr>、<th>、<td>を手で入力し、開始タグと終了タグを数える代わりに、寸法を設定し、データを入力し、結果をコピーします。出力は検証され、スクリーンリーダーに正しく読まれるHTMLです。

セマンティックテーブル要素は1993年のドラフトからHTMLに含まれており、HTML 2.0(1995)で形式化されました。それらは1つの理由のために存在します: 表形式データ。価格表、比較マトリックス、並べ替え可能なデータグリッド、元素周期表、行と列が意味を持つあらゆる矩形の事実のコレクション。テーブルは表形式データに使用されると支援技術に正しく読まれ、ページレイアウトに使用されるとアクセシビリティの悪夢を生み出します(<div>とFlexboxの時代はその乱用を終わらせました)。

このジェネレーターは、ヘッダーセル上のscope属性、ヘッダー行用の別の<thead>、およびチェックした視覚オプション用のインラインCSSを備えたアクセシブルなマークアップを出力します。出力は、ブログ投稿、ドキュメント、メールテンプレート、HTMLを受け入れるあらゆるコンテキストにコピー&ペーストで使える状態です。視覚グリッドはブラウザで完全に動作するので、データはデバイスを離れません。

ジェネレーターの中身

上部のコントロール行には、2つの数値入力(行と列)、適用ボタン、4つのオプションチェックボックス(ヘッダー行、ストライプ行、境界線付き、ホバー効果)が含まれています。最初に寸法を調整し、適用をクリックし、デザインに合うオプションをチェックします。下の編集可能なグリッドは即座に更新され、textareaの生成されたHTMLはあなたが行うすべての変更を反映します。

編集可能なグリッドは各セルに入力フィールドを持つ実際のHTMLテーブルなので、セル間をtabで移動したり、値の列を貼り付けたり、キーボードナビゲーションを使用したりできます。ヘッダー行(チェックされている場合)は色付きの背景で描画されるので、出力でどの行が<th>になるかを一目で確認できます。下の出力ボックスは結果のHTMLをモノスペースで表示し、コピー準備完了です。

下部に3つのアクションボタンがあります: Copy HTMLはClipboard API経由でマークアップをクリップボードに書き込み、Toggle Previewはスタイリングを確認できる下のレンダリングされたバージョンを表示し、Clear Cellsは寸法をリセットせずにデータを空にします。プレビューは出力と同じCSSを使用するので、表示されるものはブログまたはドキュメントが表示するものです。

歴史と背景

Tim Berners-Leeがテーブルを提案(1993)

<table>を含む最初のHTMLドラフトは、1993年後半のDave RaggettのHTML 3.0提案でした。この要素は、技術文書に使用されるLaTeX tabular環境とCALS table modelをモデルにしました。Mosaicと初期のNetscapeは標準化前であってもマークアップが提案されるとすぐにテーブルをレンダリングしました。これが、テーブルがウェブ上で最も早い視覚プリミティブの1つであった理由です。

RFC 1942がテーブルモデルを標準化(1996)

Dave RaggettのRFC 1942(1996年5月)は、アクセシビリティ用のthead、tbody、tfoot、colgroup、scope属性を含む、HTMLテーブルの最初の正式な仕様を与えました。同年、W3C HTML 3.2の推奨はテーブルモデルを本質的に文字通りに採用しました。構造は30年間ほぼ変更されていません。

レイアウトテーブルの暗黒時代(1996年から2005年)

CSSが広くサポートされる前、デザイナーはページ要素を配置するためにテーブルを使用しました: 4セルのテーブルがヘッダー、左ナビ、コンテンツ、フッターを保持しました。この技術は機能しましたが、読めないマークアップを生成し、スクリーンリーダーを破壊し、再デザインを苦痛にしました。Eric MeyerのCSS伝道(2000-2005)とJeffrey ZeldmanのDesigning With Web Standards(2003)が時代に終止符を打ち、テーブルをそのセマンティックな目的に戻しました: 表形式データ。

CSS table-* display値(2004年以降)

CSS 2.1はdisplay: table、table-row、table-cellを追加したので、非テーブル要素でテーブルのようなレイアウト動作を得られます。これは、FlexboxとGridがまだサポートされていなかった短い期間(およそ2010年から2015年)に役立ちました。今日、display: gridとdisplay: flexがこれらのCSS table値をレイアウトに置き換え、本物のテーブルはデータ用に予約されています。

ARIA gridロールとアクセシビリティ(2014)

WAI-ARIA 1.0(2014)は、インタラクティブなテーブル用にrole=gridを導入し、scope属性とheaders/idパターンを介してスクリーンリーダーがテーブルヘッダーをどのようにアナウンスすべきかを明確にしました。最新のスクリーンリーダー(NVDA、JAWS、VoiceOver)は、適切にマークアップされた<table>を列と行のコンテキストで正しく読みます。これは<div>ベースのグリッドでは複製できません。

レスポンシブテーブルパターン(2011年から現在)

iPhoneが小さな画面を支配的にしたとき、デザイナーは狭いビューポート上で広いテーブルをどう表示するかを理解する必要がありました。Filament Groupの2011年のレスポンシブテーブルの記事はパターンの波を始めました: 水平スクロール、モバイルでの積み重ね行、優先順位による列の折りたたみ。CSS Working Groupは、これらのパターンをより簡単にするためにコンテナクエリとsubgridに取り組んでいます; 今のところ、標準的なアプローチはテーブルをoverflow-x: autoでラップすることです。

実用的なワークフロー

SaaSランディングページの価格表

3列(Free、Pro、Enterprise)に10前後の機能行。プラン名を<th>セルにするためにヘッダー行をチェックし、明確な分離のために境界線付きをチェックし、デザインが独自の行背景を持つ場合はストライプをオフのままにします。HTMLをコピーし、CMSまたは静的サイトに貼り付け、テーマ用に薄いラッパークラスを追加します。

ブログレビュー用の比較マトリックス

5つのツールを8つの基準で評価する場合、ストライプ行と境界線付きセルを持つテーブルは、箇条書きリストよりもクリアに読まれます。ストライプ、境界線付き、ヘッダー行をチェックし、データを入力または貼り付けし、コピーします。セマンティックマークアップは、フィードリーダー、アーカイブサービス、スクリーンリーダーで比較を読みやすくします。

APIドキュメントの参照テーブル

APIドキュメントはしばしば、パラメータ名、型、デフォルト、説明を表形式で表示します。ジェネレーターはヘッダー行付きの4列を提供し、パラメータを記入し、HTMLをコピーし、生のHTMLをサポートするMarkdown、またはドキュメントフレームワーク(Docusaurus、MkDocs、Hugo)に貼り付けます。scope属性は、列をスクリーンリーダーでナビゲート可能にします。

メールニュースレター(注意事項あり)

メールクライアント(特にOutlook 2007-2019)はCSSサポートが非常に一貫していないので、ニュースレターのHTMLはレイアウト用にテーブルを使用しています(レイアウトテーブルなしルールの例外)。ニュースレター内のデータテーブルでは、ジェネレーターのインラインスタイル出力はほとんどのクライアントで機能します。大きなリストに送信する前にLitmusまたはEmail on Acidでテストしてください。

内部ダッシュボードのクイックモック

内部管理ダッシュボードのプロトタイピング時、ストライプ行付きの静的HTMLテーブルは、プレースホルダーテキストよりも最終製品に近く見えます。構造を生成し、ReactまたはVueコンポーネントに貼り付け、後で静的データをデータバインドループで置き換えます。

HTMLからのPDF生成

Puppeteer、wkhtmltopdf、またはChromeの印刷からPDFのようなツールでHTMLからPDFを生成する場合、テーブルはすべてのエンジンで信頼性高くレンダリングされます。ジェネレーターを使用してテーブルを構築し、テンプレートに貼り付け、PDFパイプラインを実行します。境界線付きオプションは、追加のCSSなしでクリスプな印刷ラインを提供します。

よくある落とし穴

ページレイアウトにテーブルを使用する

テーブルは表形式データのためのものであり、ページ構造のためのものではありません。ヘッダー、コンテンツ、サイドバーを配置するための1行3列の<table>は、スクリーンリーダーにページをデータテーブルとして読ませ、混乱します。代わりにレイアウトにFlexboxまたはCSS Gridを使用してください。唯一の例外はHTMLメールで、クロスクライアント レンダリングのためにレイアウトテーブルがまだ必要です。

ヘッダーセルにscope属性が欠落

各<th>には、どのヘッダーがどのデータセルに適用されるかをスクリーンリーダーが知るためにscope="col"またはscope="row"が必要です。scopeなしでは、リーダーは推測しなければならず、しばしば間違ったコンテキストを生成します。このジェネレーターはヘッダー行に対して自動的にscopeを出力します。HTMLを手動で編集する場合は、scope属性を所定の位置に保持してください。

複雑なヘッダー(マルチレベル)がheaders/idなし

グループ化された列ヘッダー(Q1、Q2がそれぞれJan、Feb、Marに分割される)を持つテーブルは、関連するヘッダーのidを指す各データセルのheaders属性が必要です。スコープだけでは2レベルヘッダーには不十分です。ジェネレーターは複雑なヘッダーを生成しません; これらには、HTMLを手動で編集するか、パターンをサポートするCMSプラグインを使用してください。

モバイルでの広いテーブル

6列のテーブルは375ピクセル幅の電話画面では読めません。デフォルトのモバイル フレンドリーなパターンは、テーブルをoverflow-x: autoのdivでラップして、ユーザーが水平にスクロールできるようにすることです。列の多いテーブルの場合、@media (max-width)を介して小さな画面で行をミニ カードに積み重ねることを検討してください。ジェネレーター出力は自動ラップされていません; CSSにラッパーを追加してください。

明示的なコンテンツのない空のセル

空白の<td></td>はスクリーンリーダーに空として読まれ、50項目をリストする際に奇妙に聞こえます。セルに正当にデータがない場合、<td>-</td>または<td aria-label="データなし">-</td>と書きます。ダッシュエンティティはエムダッシュを導入することに注意してください。このサイトはそれを避けます; 代わりにハイフン、"N/A"、または"利用不可"を使用してください。

プログレッシブ エンハンスメントなしのソートとフィルタリング

静的HTMLテーブルはユーザーがソートまたはフィルタリングできません。聴衆がインタラクティビティを必要とする場合、DataTables、AG Grid、またはTanstack Tableをレイヤーします。ジェネレーターは基礎となるセマンティックテーブルを生成し、これらのライブラリの基礎になります。キーボードナビゲーションとARIAロールはライブラリに付属しています。

プライバシーとデータ処理

すべてがブラウザで実行されます。視覚グリッド、HTML出力、プレビューはすべてクライアントサイドJavaScriptに存在します。データをどこにも送信せず、入力をログに記録せず、Cookieまたはローカルストレージに何も保存しません。ページをリロードすると、前のテーブルは消えます。

ページがロードされると、ツールはオフラインで動作します。ネットワークから切断し、顧客データ、内部価格、または他の機密コンテンツを含むテーブルを構築でき、それがサードパーティのサーバーに触れることはありません。Copy HTMLボタンは、ユーザーのジェスチャーを必要とし、外部の関係者には観察できないClipboard APIを使用します。

静的HTMLテーブルを使用しない場合

ページレイアウト(FlexboxまたはGridを使用)

メインコンテンツの横にサイドバー、カードグリッド、またはナビゲーションバーが必要な場合は、CSS Flexbox(display: flex)またはCSS Grid(display: grid)を使用してください。レイアウト用のテーブルは混乱するスクリーンリーダー出力を生成し、最新のレイアウト プリミティブのようにビューポートの変更に適応しない柔軟性のないHTMLを生成します。

大規模なデータセット(1000行以上)

10,000行の静的HTMLテーブルはレンダリングが遅く、多大なメモリを消費します。表示行のみをレンダリングする仮想化グリッドライブラリ(TanStack Virtual、React Window、AG Grid)を使用してください。静的HTMLは数百行以下に適しています。

インタラクティブなデータ操作(グリッドライブラリを使用)

ユーザーがソート、フィルタリング、編集、グループ化、またはページネートする必要がある場合、本物のグリッドライブラリが必要です。AG Grid、TanStack Table、DataTables、Bootstrap Tableはすべて、インタラクティビティを追加しながらアクセシブルな<table>マークアップを内部で生成します。ジェネレーターの出力は出発点であり、終わりではありません。

チャートとグラフ(SVGまたはcanvasを使用)

棒グラフはテーブルではなく、可視化です。Chart.js、D3、Recharts、または任意のSVGベースのチャートライブラリを使用してください。アクセシビリティのためにチャートとバックアップデータテーブルの両方が必要な場合、チャートをレンダリングし、近くに同じデータを持つ<table>を配置(または視覚的に隠すクラスで隠す)して、スクリーンリーダーユーザーが数値を取得できるようにします。

その他の質問

常にtheadとtbodyを使用すべきですか?

ヘッダー行を持つテーブルの場合、はい。<thead>はヘッダー行をデータ行から分離し、長いテーブルでブラウザがヘッダーをフリーズすることを許可し、スクリーンリーダーがヘッダーを正しくアナウンスすることを許可します。ジェネレーターは、ヘッダー行オプションがチェックされている場合、theadを自動的に含みます。ヘッダーなしのテーブルの場合、両方を省略できますが、完全性のために<tbody>を含めるのは安価です。

scope="col"とscope="row"はいつ使用しますか?

scope="col"は列(ヘッダーの最上行)にラベルを付ける<th>セルに使用します。scope="row"は行(各行に名前がある場合の最も左のセル)にラベルを付ける<th>セルに使用します。ほとんどのテーブルには列ヘッダーのみがあるので、scope="col"が一般的なケースです。両方ある場合は、適切なスコープでそれぞれをマークします。

ソート可能なテーブルを作るには?

既存の<table>マークアップにクリックでソートを追加するJavaScriptライブラリを使用してください。Sortable.js、TanStack Table、DataTablesはすべてこれを行います。純粋なCSSはソートできません。ジェネレーターの出力は静的な基盤です; 最終プロジェクトでライブラリを上に重ねます。アクセシビリティのために、ライブラリはアクティブな列にaria-sortを追加すべきです。

最良のレスポンシブパターンは何ですか?

最もシンプルで最もアクセシブルなのは、ラッピングdivのoverflow-x: autoで、テーブルのセマンティクスを保持しながら、ユーザーが水平にスクロールできるようにします。列の多いテーブルの場合、スタックされた行パターン(狭い幅でtdsにdisplay: block、data-label属性経由のデータラベル)は、モバイルで各行をラベル付きリストとして読みます。両方とも有効です; テーブルの読み取り対比較ユースケースに基づいて選択してください。

MarkdownでHTMLテーブルを使用できますか?

ほとんどのMarkdownプロセッサ(GitHub Flavored Markdown、Pandoc、MDX、MkDocs、Hugo)はMarkdown構文と並んで生のHTMLを受け入れるので、ジェネレーターの出力を直接貼り付けできます。Markdownのネイティブテーブル構文はよりシンプルですが、colspan、rowspan、スコープ、スタイリングが欠けているので、シンプルなグリッドを超えるものには、HTMLが優れています。注: 一部の厳格なMarkdownパーサー(拡張なしのCommonMark)はデフォルトでHTMLを無視します。

CSSなしで交互の行の色をスタイルするには?

ジェネレーターのStriped Rowsオプションをチェックします。出力には1行おきにインラインスタイル属性が含まれているので、CSSが取り除かれるコンテキスト(一部のWebmailクライアント)でもストライピングが生き残ります。環境が外部CSSを許可する場合、スタイルシートでtr:nth-child(even)を優先してください。これはインラインスタイルよりもクリーンで、更新が簡単です。