HTMLテーブルジェネレーター
HTMLテーブルを視覚的に作成して、コードをコピーします。
使い方
- 行と列の数を設定し、適用をクリックします。
- 編集可能なセルに直接データを入力します。
- ヘッダー行、ストライプ、ボーダー、ホバーなどのオプションを有効にします。
- HTMLをコピーをクリックして、生成されたコードをコピーします。
よくある質問
生成されたコードにCSSは含まれますか?
はい。ストライプ、ボーダー、ホバーなどのオプションを有効にすると、ツールはテーブルがどこでも機能するようにHTMLにインラインCSSスタイルを生成します。
テーブルの最大サイズは?
最大50行と20列。より大きなデータセットには、スプレッドシートツールを使用してHTMLにエクスポートすることを検討してください。
仕組み
- テーブルの寸法を定義: 初期グリッドを生成するために行と列の数を入力します。
- データを入力: セルをクリックして内容を入力し、ヘッダー行を追加し、ボーダーとストライプを有効にします。
- テーブルをスタイル設定: ボーダースタイル、ヘッダーの背景色、行のストライプ、セルパディングを選択します。
- HTMLをコピー: 生成されたテーブルマークアップには、適切なセマンティック構造を持つ
<th>ヘッダーを持つ<thead>が含まれます。
なぜHTMLテーブルジェネレーターを使うのか?
HTMLテーブルマークアップを手動で書くのは退屈で繰り返しが多い, 特に多くの行や複雑なヘッダーを持つテーブルの場合。<table>、<thead>、<tbody>、<tr>、<th>、<td>のネストを毎回正しく取得することはエラーが発生しやすいです。このジェネレーターは、スクリーンリーダー互換性のためにヘッダーセルにscope属性を持つ、セマンティックに正しくアクセシブルなHTMLテーブル、適切なキャプションサポート、ボーダーとホバー状態のためのクリーンなCSSを生成します。価格表、比較表、データ表、ドキュメンテーションに使用してください。
テーブル機能
- thead/tbody構造, アクセシビリティのためのセマンティックテーブルマークアップ
- 行ストライプ, CSS nth-childで交互の色
- ボーダースタイル, フルグリッド、水平のみ、ボーダーなし
- 列のマージ, colspanとrowspanのサポート
- レスポンシブラッパー, モバイル用のオプションの水平スクロールラッパー
HTMLテーブルジェネレーターとは何か?
HTMLテーブルジェネレーターは、スプレッドシートのように埋められる視覚的なグリッドを提供し、正しいセマンティック要素をすべて備えた同等の
| 、 | を手で入力し、開始タグと終了タグを数える代わりに、寸法を設定し、データを入力し、結果をコピーします。出力は検証され、スクリーンリーダーに正しく読まれるHTMLです。
セマンティックテーブル要素は1993年のドラフトからHTMLに含まれており、HTML 2.0(1995)で形式化されました。それらは1つの理由のために存在します: 表形式データ。価格表、比較マトリックス、並べ替え可能なデータグリッド、元素周期表、行と列が意味を持つあらゆる矩形の事実のコレクション。テーブルは表形式データに使用されると支援技術に正しく読まれ、ページレイアウトに使用されるとアクセシビリティの悪夢を生み出します( とFlexboxの時代はその乱用を終わらせました)。
このジェネレーターは、ヘッダーセル上のscope属性、ヘッダー行用の別の、およびチェックした視覚オプション用のインラインCSSを備えたアクセシブルなマークアップを出力します。出力は、ブログ投稿、ドキュメント、メールテンプレート、HTMLを受け入れるあらゆるコンテキストにコピー&ペーストで使える状態です。視覚グリッドはブラウザで完全に動作するので、データはデバイスを離れません。
上部のコントロール行には、2つの数値入力(行と列)、適用ボタン、4つのオプションチェックボックス(ヘッダー行、ストライプ行、境界線付き、ホバー効果)が含まれています。最初に寸法を調整し、適用をクリックし、デザインに合うオプションをチェックします。下の編集可能なグリッドは即座に更新され、textareaの生成されたHTMLはあなたが行うすべての変更を反映します。 編集可能なグリッドは各セルに入力フィールドを持つ実際のHTMLテーブルなので、セル間をtabで移動したり、値の列を貼り付けたり、キーボードナビゲーションを使用したりできます。ヘッダー行(チェックされている場合)は色付きの背景で描画されるので、出力でどの行が 下部に3つのアクションボタンがあります: Copy HTMLはClipboard API経由でマークアップをクリップボードに書き込み、Toggle Previewはスタイリングを確認できる下のレンダリングされたバージョンを表示し、Clear Cellsは寸法をリセットせずにデータを空にします。プレビューは出力と同じCSSを使用するので、表示されるものはブログまたはドキュメントが表示するものです。 Dave RaggettのRFC 1942(1996年5月)は、アクセシビリティ用のthead、tbody、tfoot、colgroup、scope属性を含む、HTMLテーブルの最初の正式な仕様を与えました。同年、W3C HTML 3.2の推奨はテーブルモデルを本質的に文字通りに採用しました。構造は30年間ほぼ変更されていません。 CSSが広くサポートされる前、デザイナーはページ要素を配置するためにテーブルを使用しました: 4セルのテーブルがヘッダー、左ナビ、コンテンツ、フッターを保持しました。この技術は機能しましたが、読めないマークアップを生成し、スクリーンリーダーを破壊し、再デザインを苦痛にしました。Eric MeyerのCSS伝道(2000-2005)とJeffrey ZeldmanのDesigning With Web Standards(2003)が時代に終止符を打ち、テーブルをそのセマンティックな目的に戻しました: 表形式データ。 CSS 2.1はdisplay: table、table-row、table-cellを追加したので、非テーブル要素でテーブルのようなレイアウト動作を得られます。これは、FlexboxとGridがまだサポートされていなかった短い期間(およそ2010年から2015年)に役立ちました。今日、display: gridとdisplay: flexがこれらのCSS table値をレイアウトに置き換え、本物のテーブルはデータ用に予約されています。 WAI-ARIA 1.0(2014)は、インタラクティブなテーブル用にrole=gridを導入し、scope属性とheaders/idパターンを介してスクリーンリーダーがテーブルヘッダーをどのようにアナウンスすべきかを明確にしました。最新のスクリーンリーダー(NVDA、JAWS、VoiceOver)は、適切にマークアップされた iPhoneが小さな画面を支配的にしたとき、デザイナーは狭いビューポート上で広いテーブルをどう表示するかを理解する必要がありました。Filament Groupの2011年のレスポンシブテーブルの記事はパターンの波を始めました: 水平スクロール、モバイルでの積み重ね行、優先順位による列の折りたたみ。CSS Working Groupは、これらのパターンをより簡単にするためにコンテナクエリとsubgridに取り組んでいます; 今のところ、標準的なアプローチはテーブルをoverflow-x: autoでラップすることです。 3列(Free、Pro、Enterprise)に10前後の機能行。プラン名を 5つのツールを8つの基準で評価する場合、ストライプ行と境界線付きセルを持つテーブルは、箇条書きリストよりもクリアに読まれます。ストライプ、境界線付き、ヘッダー行をチェックし、データを入力または貼り付けし、コピーします。セマンティックマークアップは、フィードリーダー、アーカイブサービス、スクリーンリーダーで比較を読みやすくします。 APIドキュメントはしばしば、パラメータ名、型、デフォルト、説明を表形式で表示します。ジェネレーターはヘッダー行付きの4列を提供し、パラメータを記入し、HTMLをコピーし、生のHTMLをサポートするMarkdown、またはドキュメントフレームワーク(Docusaurus、MkDocs、Hugo)に貼り付けます。scope属性は、列をスクリーンリーダーでナビゲート可能にします。 メールクライアント(特にOutlook 2007-2019)はCSSサポートが非常に一貫していないので、ニュースレターのHTMLはレイアウト用にテーブルを使用しています(レイアウトテーブルなしルールの例外)。ニュースレター内のデータテーブルでは、ジェネレーターのインラインスタイル出力はほとんどのクライアントで機能します。大きなリストに送信する前にLitmusまたはEmail on Acidでテストしてください。 内部管理ダッシュボードのプロトタイピング時、ストライプ行付きの静的HTMLテーブルは、プレースホルダーテキストよりも最終製品に近く見えます。構造を生成し、ReactまたはVueコンポーネントに貼り付け、後で静的データをデータバインドループで置き換えます。 Puppeteer、wkhtmltopdf、またはChromeの印刷からPDFのようなツールでHTMLからPDFを生成する場合、テーブルはすべてのエンジンで信頼性高くレンダリングされます。ジェネレーターを使用してテーブルを構築し、テンプレートに貼り付け、PDFパイプラインを実行します。境界線付きオプションは、追加のCSSなしでクリスプな印刷ラインを提供します。 テーブルは表形式データのためのものであり、ページ構造のためのものではありません。ヘッダー、コンテンツ、サイドバーを配置するための1行3列の 各 グループ化された列ヘッダー(Q1、Q2がそれぞれJan、Feb、Marに分割される)を持つテーブルは、関連するヘッダーのidを指す各データセルのheaders属性が必要です。スコープだけでは2レベルヘッダーには不十分です。ジェネレーターは複雑なヘッダーを生成しません; これらには、HTMLを手動で編集するか、パターンをサポートするCMSプラグインを使用してください。 6列のテーブルは375ピクセル幅の電話画面では読めません。デフォルトのモバイル フレンドリーなパターンは、テーブルをoverflow-x: autoのdivでラップして、ユーザーが水平にスクロールできるようにすることです。列の多いテーブルの場合、@media (max-width)を介して小さな画面で行をミニ カードに積み重ねることを検討してください。ジェネレーター出力は自動ラップされていません; CSSにラッパーを追加してください。 空白の 静的HTMLテーブルはユーザーがソートまたはフィルタリングできません。聴衆がインタラクティビティを必要とする場合、DataTables、AG Grid、またはTanstack Tableをレイヤーします。ジェネレーターは基礎となるセマンティックテーブルを生成し、これらのライブラリの基礎になります。キーボードナビゲーションとARIAロールはライブラリに付属しています。 すべてがブラウザで実行されます。視覚グリッド、HTML出力、プレビューはすべてクライアントサイドJavaScriptに存在します。データをどこにも送信せず、入力をログに記録せず、Cookieまたはローカルストレージに何も保存しません。ページをリロードすると、前のテーブルは消えます。 ページがロードされると、ツールはオフラインで動作します。ネットワークから切断し、顧客データ、内部価格、または他の機密コンテンツを含むテーブルを構築でき、それがサードパーティのサーバーに触れることはありません。Copy HTMLボタンは、ユーザーのジェスチャーを必要とし、外部の関係者には観察できないClipboard APIを使用します。 メインコンテンツの横にサイドバー、カードグリッド、またはナビゲーションバーが必要な場合は、CSS Flexbox(display: flex)またはCSS Grid(display: grid)を使用してください。レイアウト用のテーブルは混乱するスクリーンリーダー出力を生成し、最新のレイアウト プリミティブのようにビューポートの変更に適応しない柔軟性のないHTMLを生成します。 10,000行の静的HTMLテーブルはレンダリングが遅く、多大なメモリを消費します。表示行のみをレンダリングする仮想化グリッドライブラリ(TanStack Virtual、React Window、AG Grid)を使用してください。静的HTMLは数百行以下に適しています。 ユーザーがソート、フィルタリング、編集、グループ化、またはページネートする必要がある場合、本物のグリッドライブラリが必要です。AG Grid、TanStack Table、DataTables、Bootstrap Tableはすべて、インタラクティビティを追加しながらアクセシブルな 棒グラフはテーブルではなく、可視化です。Chart.js、D3、Recharts、または任意のSVGベースのチャートライブラリを使用してください。アクセシビリティのためにチャートとバックアップデータテーブルの両方が必要な場合、チャートをレンダリングし、近くに同じデータを持つ ヘッダー行を持つテーブルの場合、はい。はヘッダー行をデータ行から分離し、長いテーブルでブラウザがヘッダーをフリーズすることを許可し、スクリーンリーダーがヘッダーを正しくアナウンスすることを許可します。ジェネレーターは、ヘッダー行オプションがチェックされている場合、theadを自動的に含みます。ヘッダーなしのテーブルの場合、両方を省略できますが、完全性のために scope="col"は列(ヘッダーの最上行)にラベルを付ける 既存の 最もシンプルで最もアクセシブルなのは、ラッピングdivのoverflow-x: autoで、テーブルのセマンティクスを保持しながら、ユーザーが水平にスクロールできるようにします。列の多いテーブルの場合、スタックされた行パターン(狭い幅でtdsにdisplay: block、data-label属性経由のデータラベル)は、モバイルで各行をラベル付きリストとして読みます。両方とも有効です; テーブルの読み取り対比較ユースケースに基づいて選択してください。 ほとんどのMarkdownプロセッサ(GitHub Flavored Markdown、Pandoc、MDX、MkDocs、Hugo)はMarkdown構文と並んで生のHTMLを受け入れるので、ジェネレーターの出力を直接貼り付けできます。Markdownのネイティブテーブル構文はよりシンプルですが、colspan、rowspan、スコープ、スタイリングが欠けているので、シンプルなグリッドを超えるものには、HTMLが優れています。注: 一部の厳格なMarkdownパーサー(拡張なしのCommonMark)はデフォルトでHTMLを無視します。 ジェネレーターのStriped Rowsオプションをチェックします。出力には1行おきにインラインスタイル属性が含まれているので、CSSが取り除かれるコンテキスト(一部のWebmailクライアント)でもストライピングが生き残ります。環境が外部CSSを許可する場合、スタイルシートでtr:nth-child(even)を優先してください。これはインラインスタイルよりもクリーンで、更新が簡単です。 |
|---|