のためのツールを構築します Toolz.dev つまり、ドキュメントやユーザーへの電子メール、時折表示されるプレーンなランディング ページに、HTML テーブルをたくさん書きます。そして、テーブルとは、誰も手書きで書くことを楽しんでいない HTML の 1 ビットです。 10 行 5 列は 50 を超えるセル タグであり、そのすべてが正しい順序で開閉する必要があり、1 つは欠落しています </td> 静かにレイアウト全体を壊します スプレッドシートにデータの山があり マークアップが欲しかったので サイトにジェネレータを組み込みました これがガイドです。
tl;dr: ザ ツールツ HTML テーブルジェネレータ コンマまたはタブで区切られたデータを取得し、アクセス可能な完全なデータを書き込みます
<table>と<thead>、<tbody>、および適切なヘッダセル。 1行目になることができます<th scope="col">そして最初の列<th scope="row">、だからスクリーンリーダーは右ヘッダーを発表する キャプション、縞模様の行、および境界を追加し、クラスベースのCSS、電子メールのインラインスタイル、またはプレーンセマンティックHTMLを選択 すべてのセルはエスケープされます それは完全にクライアント側で実行されます: アップロードなし、サインアップなし、オフラインで動作します。
HTMLテーブルジェネレータとは何ですか?
HTMLテーブルジェネレーターは、データの行をHTMLマークアップに変換し、ブラウザでテーブルとしてレンダリングします。カンマ区切りまたはタブ区切りの値を貼り付け、テーブルの外観を選択し、ツールは完全なものを書き込みます <table> 要素付き <thead>、 <tbody>、そしてそれらの中の行とセル。 everyを手で打ち込むのではなく <tr>、 <th>、そして <td> セルを数えて列を並べたままにすると、データを 1 回貼り付け、生の HTML を許可するページ、電子メール テンプレート、または Markdown ファイルにドロップする準備ができているバックアップ マークアップをコピーします。
ジェネレーターがその地位を獲得する理由は、テーブル HTML が冗長で反復的であり、その反復が間違いが隠される場所であるということです。すべてのセルには開始タグと終了タグが必要であり、ヘッダー セルはデータ セルとは異なり、全体が長方形に留まるか、ブラウザーがぼろぼろの混乱を引き起こす必要があります。小さなテーブルを超えたものに対して手作業でそれを行うのは時間がかかり、エラーが発生しやすいです。ツールは決定論的にそれを行います。値を与えると、有効でエスケープされた、正しくネストされたマークアップが生成されます。
手書きのテーブルがしばしばスキップする生のマークアップの上にアクセシビリティレイヤーがあり、それは私が最も気にかけている部分です 適切に構築されたテーブルが使用します <th> a を持つヘッダーセルの場合 scope 属性なので、支援テクノロジーは、特定のデータ セルがどのヘッダーに属しているかを発表し、それを運ぶことができます <caption> テーブルに含まれるものを説明します。 WHATWG HTML Living Standard' 表形式データに関するセクションには、これらの要素が詳しく記載されており、ジェネレーターは、これらの要素をそのままにしておくのではなく、適用します <div> テーブルのように見えますが、スクリーンリーダーにはノイズとして読み取られるグリッド。
テーブルを手書きで書けばいいじゃないですか?
2 つずつ表の場合、手書きではツールを開くよりも高速です。ジェネレーターは、実際のデータ、多くの行、ヘッダーを含む、実際に苦痛な表で維持されます。それらでは、手書きには 3 つの繰り返しの障害モードがあります。
1 つ目は壊れた構造です。 fifty と browser's エラー回復の間で 1 つの終了タグをミスすると、予測不可能なことが行われ、それを開始したセルを探して数分を失うことになります。 2 つ目は一貫性のない列です。 1 つの行に 4 つのセルがあり、残りが 5 つある場合、テーブルは曲がってしまい、タグの壁に短い行を見つけるのは本当に困難です。 3 つ目はエスケープです。 a を含むデータを貼り付けます <、 アン &、または迷走 " すぐにセルに入ると、マークアップが壊れるか、小さな注入穴が開きます。
ジェネレータは3 つすべてを取り除きます 短い行をパッドで埋め込むので すべての行が同じ数のセルを持ち テーブルは長方形のままになります 開いたものを常に閉じます そしてすべてのセル値をHTMLエスケープします だからa < なる < そしてタグとして読まれるのではなくテキストとして表示します 貼り付けるものは得られるもので 安全にレンダリングされます。
これが 1 つの表の決定です。
| 状況 | 使い | なんでや |
|---|---|---|
| 小さな 2 つずつテーブル | 手書きでね | 何でも開くより速い |
| 多くの行とヘッダーを持つ実際のデータ | HTML テーブルジェネレータ | 脱出、入れ子、位置合わせは、ハンドテーブルが壊れる場所です |
| 代わりに Markdown テーブルが必要です | Markdownテーブルジェネレータ | 同じアイデア、GitHub フレーバーのマークダウン出力 |
| CSV を表示または確認したいだけです | CSV ビューア | マークアップを生成せずにデータを読み取る |
テーブルにアクセスできるようにするにはどうすればよいですか?
これは、単に正しく見えるテーブルと、すべての人に役立つテーブルを分離する質問です。そのため、独自のセクションが得られます。ヘッダーセルとキャプションの 2 つが重要です。
最初にセルにヘッダーを付けます 実際のテーブルでは 行や列にラベルを付けるセルは <th>、ない <td>、 および それぞれ <th> を運ぶ必要があります scope 列を先頭に立てるかどうかを言う属性 ()scope="col")または行()scope="row")。 スクリーンリーダー 使用 scope 各データセルの前に関連するヘッダーを発表するため、リスナーは "Role: Engineer" を聞く 裸の " Engineer" ではなく、コンテキストなしで。 generator' s の最初の行ヘッダーオプションが発します <th scope="col"> 一番上の行の場合、最初の列ヘッダー オプションが発します <th scope="row"> 各ボディ行の先頭のセルの場合。 w3c& #39; s テーブルに関する WAI チュートリアルでは、単純なデータ テーブルに対してまさにこのパターンを推奨しています。
キャプションは2 枚目です。 A <caption> テーブルの中に直接置かれている element は、補助技術が読み出し、晴眼者のユーザーがグリッドの上に見るタイトルをテーブルに与えます。これは、とにかくテーブルの上に書く文とアクセスしやすい同等のものです。ジェネレーターは、キャプション フィールドに入力すると 1 つを追加し、他のテキストと同様にそれをエスケープします。キャプションとスコープ付きヘッダーの間では、出力は、スクリーン リーダーがつまずく形状ではなく、スクリーン リーダーがナビゲートできるテーブルです。
スタイリングモードの違いは何ですか?
このツールは、テーブルの移動先で動作が変更されるため、スタイリングを提供する 3 つの方法を提供します。
クラスモードは、テーブルにクラス名を追加し、スタイルシートにドロップできるCSSの一致するブロックを出力します これは、Webサイトにとって正しい選択です: マークアップはクリーンに保たれ、スタイリングは1 か所に存在し、ゼブラストライピングの使用などの機能を使用します tbody tr:nth-child(even)、スタイルシートからのみ動作します。 inline モードは代わりに、スタイルを各要素に直接書き込みます style 属性。 それは醜いマークアップですが、それはあなたがほとんどのクライアントがストリップするHTML電子メールに必要なものです <style> ブロックと外部 CSS なので、スタイリングはすべての要素に沿って実行する必要があります。 none モードは、クラスもスタイルもまったくないプレーンなセマンティック HTML を出力します。これは、独自の設計システムがあり、それをハングアップするために正しくアクセス可能な構造が必要な場合に必要なものです。
私は、デフォルトでクラスモードのために達し、インラインモードは、私は電子メールに貼り付けているときだけ、私はすでにそのテーブルをグローバルにスタイルしているサイトにテーブルをドロップしているとき、何もモードツールは、データを再入力せずにそれらを切り替えることができますので、3 つすべてを試して、どちらが合うかを確認するのは、いくつかのクリックです。
発電機を使うには?
フローは4 ステップです。 comma区切りまたはタブ区切りされた行を入力ボックスに貼り付けます; 区切り文字は自動的に検出され、データがあいまいな場合は上書きできます。最初の行が列ヘッダーであるかどうか、各行の最初の列が行ヘッダーであるかどうかを判断します。キャプションを追加し、縞模様の行、境界線、またはコンパクトなレイアウトをオンにして、クラスベースの CSS、インライン スタイル、またはプレーン HTML を選択します。次に、「生成」をクリックして HTML をコピーし、クラス モードで一致する CSS を追加します。
解析はCSVの非公式な標準であるRFC 4180 に従うので、二重引用符で包まれたフィールドには区切り文字を含めることができ、引用符で囲まれたフィールド内の二重引用符は単一引用符のようなセルを意味します "Doe, Jane" コンマで分割するのではなく、1 つのセルのままです そして、すべてがブラウザで実行されるため、顧客名、内部数値、またはその他の不要なデータを含むデータをサーバーに貼り付けることができ、マシンから離れることはありません そのクライアント側モデルは、サイトの残りの後ろにあるものと同じです データプライバシー オンラインツール ガイド.
これは他のツールとどのように適合しますか?
HTML テーブル ジェネレーターは、構造化データを取得し、クリーン マークアップを手渡しする小さなツール グループ内にあります。その最も近い隣人は、 Markdownテーブルジェネレータ、同じ仕事をするが、readmeやissuesのgithub風味のmarkdownをwebページのhtmlではなく出力する。 table' sマークアップが片付けをしたいとき、または再インデントする手書きのテーブルHTMLの山があるとき、 HTMLフォーマッタ それを美化します。そして、HTML ドキュメントと Markdown ドキュメントの間を移動するとき、 HTMLからMarkdownへのコンバーター 往復に対応しており、テーブルも含まれています。
接続する考え方は、データはある形に生きていて、別の形に必要であり、決定論的なツールは、人がタグを手編集するよりも翻訳をうまく行うということです。 web 用に構築すると、 Web 開発者ツールキット ラウンドアップは、これらがどのように組み合わされるかを示します 開発者の生産性向上ツール このガイドでは、1 日に何度も数分を節約できる、より幅広い小規模ユーティリティについて説明します。
ドキュメントの作成から実際に実行された例
これを具体的にしましょう サイト周辺のドキュメントの多くは 機能比較と参照テーブルのセットです どのツールが何をするか どの制限がどこで適用されるか 与えられたオプションの意味するところです そのデータのほとんどは スプレッドシートで生命を開始します スプレッドシートは編集や並べ替えが 簡単な場所だからです ページへのデータの取り込みは 使われています Markdownへのエクスポート 私のページの中には レンダリングしないものもありますが HTMLテーブルを手入力する これは 20 行参照の場合 本当に惨めな10 分です。
今度は列をスプレッドシートからまっすぐにコピーしますクリップボードにタブ区切りの値を載せジェネレータに貼り付けタブ区切り文字を自動検出させます最初の行をヘッダーとして残しテーブルを説明するキャプションを追加しクラスモードで縞の行と枠線をオンにしてHTMLとCSSの両方をコピーしますマークアップはページに落ちますCSSはスタイルシートに一度入りその後すべてのテーブルで再利用され全体が1 分もかからずヘッダーセルが出てきます <th scope="col">、だからテーブルは私が考えずにアクセスでき、すべての値はエスケープされるので、a を含む行 < コード参照ではページは爆破されません。
私がこれらのテーブルを手書きするのではなくジェネレーターを使う理由は HTML がハードだからではなく HTML が退屈で退屈な部分がバグを紹介する場所だからです タグ入力やエスケープやアクセシビリティ属性をツールにオフロードすると最初のペーストでテーブルが正しいことを意味しテーブルの内容に注意を費やします配管の代わりにメールの場合同じデータをインラインモードで再生成しますニュースレターのツールがストリップするからです <style> ブロックし、インライン バージョンはトリップ後もそのまま残ります。
知っておく価値のある限界は何ですか?
いくつかの正直なエッジ 1 つ目は、このツールが構築されることです でー テーブル、ヘッダーと値の行を持つ種類 これはレイアウト ツールではなく、複雑なテーブルで時々表示されるマージされたセルのトリックである colspan や rowspan も実行しません。マージされたセルは、テーブルをスクリーン リーダーがとにかくナビゲートするのをはるかに困難にし、表形式データの大部分ではそれらを必要としません。複数の列にまたがるマージされたヘッダーが本当に必要な場合は、生成されたマークアップを手動で編集します HTMLフォーマッタ その後、整理整頓されます.
2 つ目は、ジェネレーターがデータをテキストとして読み込み、型について巧妙にしようとしないことです。数値の列が各セルでテキストとして発行され、これはまさに表示に最適です。数値を右揃えしたり、数千の区切り文字を追加したりすることはありません。なぜなら、それらはあなたに属するスタイリングと書式の決定であるためです。それは、あなたが貼り付けた値がセル内の値であることを保証します。エスケープされ、変更されません。
3 つ目は区切り文字の曖昧さです。自動検出は、行間で最も一貫した列数を与える区切り文字を見つけることで機能し、クリーンな CSV および TSV に対して信頼性が高くなります。データが本当に曖昧である場合、たとえば一部の行に引用符で囲まれていないカンマが含まれる値の場合、検出によって推測が間違う可能性があるため、区切り文字は固定された決定ではなく手動で明示的に設定され、解析は決定論的です。
最後に、クラスモードで生成されたCSSは、賢明な、中立的な出発点です: 軽いヘッダーの背景、薄い境界線、快適なパディング それは編集されることを意味します ブランドに合わせて色を変更し、パディングを調整し、ストライプをドロップします; それは明確なクラス名を持つ普通のCSSであり、ツール& #39; の仕事は、最初のドラフトを保存することであり、最終的な外観を指示することではありません。
よくある質問
HTMLテーブルジェネレータとは何ですか? HTMLテーブルジェネレーターは、データの行をテーブルとしてレンダリングするHTMLマークアップに変換します。 CSVまたはタブ区切りの値を貼り付けると、完全な値が書き込まれます 要素付き 、 、およびセルなので、すべてのタグを手で入力する必要はありません。
CSVをHTMLテーブルに変換するにはどうすればよいですか? CSV を入力ボックスに貼り付け、列名が含まれている場合は最初の行をヘッダーとして保持し、スタイルを選択してから「生成」をクリックします。ツールは区切り文字を検出し、テーブルを構築し、HTML をページに直接コピーできます。
テーブルにアクセスできるようにするにはどうすればよいですか? ヘッダーセルとキャプションを使用します。 1行目のヘッダーをオンにして列のタイトルになります 、行ラベルの最初の列ヘッダを有効にし、テーブルを説明するキャプションを追加します。 screen readers は、各セルの正しいヘッダを発表します。スタイリングモードの違いは何ですか? クラスモードではクラス名と個別のCSSブロックが追加され、これはウェブサイトに最適です。 inlineモードでは各要素にスタイルを直接書き込み、メールに貼り付けても生き残ります。 noneモードではプレーンなセマンティックhtmlが出力されるため、独自のスタイルシートを適用できます。
データ内の特殊文字はエスケープされていますか? はい。 cell の値は全て HTML エスケープされているため、 < 、 > 、 & 、 " のような文字はエンティティとして記述され、マークアップとして解釈されるのではなくテキストとして表示されるため、データに角括弧やアンパサンドが含まれている場合にテーブルが壊れないようにします。
セル内のカンマを扱うことができますか? はい。 parser は RFC 4180 に従うので、double quotes でラップされたフィールドには区切り文字を含めることができ、quoted フィールド内の double quote は single quote になります。 quoted コンマは、新しい列を開始するのではなく、セルの一部に留まります。
私のデータはどこかにアップロードされていますか? いいえ 変換はデバイス上の JavaScript を使用して完全にブラウザで行われます。データがアップロード、ログ記録、保存されることはなく、ページが読み込まれるとツールはネットワークとの動作を継続し、ネットワークが切断されます。
HTMLテーブルジェネレーターは無料ですか? はい. signupも透かしも使用上限もなく完全に無料です.個人プロジェクトや商業プロジェクトに必要な数のHTMLテーブルを生成します.
