Softonic

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

ステップ 1 / 4

引用符付き CSV フィールド、表計算ソフトのタブ区切り、セミコロン区切り、Markdown の区切り行に対応しています。上限は 50 行、20 列、1 セルあたり 1,000 文字です。

表データ
表データ

10行のデータセットに対して<table>、<thead>、<tbody>、<tr>を手作業で記入するのは非常に煩雑です。タブ区切りのCSVまたはMarkdown形式のテーブルデータを貼り付けるだけで、このジェネレータは意味的なタグ、任意の<caption>、適切なスコープ属性、およびゼブラストライピング、境界線、Tailwindクラスのいずれかを選択できるよう、構造が整ったHTMLを自動的に生成します。記事やダッシュボードへの直接使用に最適です。

HTMLテーブルの作成方法

  1. 1

    データを貼り付けてください

    TSV（スプレッドシートからのコピー）、CSV、またはMarkdownテーブルの構文はすべて正しく解析されます。

  2. 2

    テーブルのオプションを選択

    ヘッダー行、キャプション、ゼブラストライピング、コンパクトまたはゆったりとした行。

  3. 3

    スタイルモードを選択してください

    シンプルHTML、インラインスタイル、Bootstrapクラス、またはTailwindクラス。

  4. 4

    マークアップをコピーします

    出力内容は有効で、意味のあるHTMLです。テーブルを装った`<div>`グリッドではありません。

セマンティックテーブル構造

適切なタグを付けて作成されたテーブルは、アクセスしやすく、スクリーンリーダーに対応しており、スタイル設定も簡単です。ジェネレータは以下の構造を生成します：

<table>
  <caption>第1四半期の売上データ</caption>
  <thead>
    <tr>
      <th scope="col">地域</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">EU</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

要素とその役割

要素 用途
<caption> テーブルの要約。スクリーンリーダーで最初に読み上げられます
<thead> 列見出し。本文とは別にレンダリングされます
<tbody> データ行
<tfoot> 総計値および脚注は、コードの配置に関わらず下部に配置します
<th scope="col"> 列ヘッダー
<th scope="row"> 行ヘッダー（例：各行の最初のセル）
<td> データセル

レスポンシブ対応のパターン

  • 横スクロール：<div style="overflow-x:auto">でテーブルを囲むと、狭いビューポートでもレイアウトを崩さずに横スクロールできます。
  • モバイルで縦積み：ヘッダーをdata-label属性として各セルに持たせ、CSSで行を縦向きのカードに切り替えます。小規模なデータセットに適しています。
  • グリッドでリフロー：複雑なテーブルはCSS Gridで組み直せますが、ネイティブのキーボードナビゲーションが失われます。ダッシュボードなど限られた用途でのみ有効です。

アクセシビリティのチェックリスト

  • すべての<th>にscope属性を付与する。
  • 複雑なセル結合では、headers="..."でデータセルをヘッダーのIDに関連付ける。
  • キャプションでテーブルの目的を要約する。
  • 見た目のレイアウト目的でテーブルを使わない。CSS GridまたはFlexboxを使用する。

よくある質問

はい。スプレッドシートのクリップボードデータはTSV（タブ区切り）形式であり、ジェネレータはネイティブで解析します。行は<tr>に、タブ区切りセルは<td>に変換されます。

制御するすべての要素用にCSSクラスを定義します。外部スタイルシートがブロックされることが多いメールにはインラインスタイルを使用します。BootstrapおよびTailwindモードでは、これらのフレームワーク向けに即席で使用可能なクラスマークアップを生成します。

自動結合には対応していません。取り込んだ各値は 1 つのセルになります。HTML をコピーした後で colspan や rowspan を追加し、結合セルでは id と headers が必要になる場合があるため、見出しとの関連付けを確認してください。

はい、scope="col"およびscope="row"の属性が追加され、<caption>を指定すると生成されます。複雑なテーブルについては、スクリーンリーダーやaxe DevTools拡張機能を使用して確認してください。

関連ツール

Webpack設定ジェネレーター

素の JavaScript、React、Vue 向けに webpack 5 の webpack.config.js を生成します。TypeScript、Babel、CSS や Sass、画像、HtmlWebpackPlugin、開発サーバー、npm install のコマンドまでそろいます。

CSSローディングアニメーション生成ツール

純粋なCSSで円形スピナーを作成できます。直径、枠の太さ、アクセントカラー、回転速度を設定し、ライブプレビューを確認して、そのまま使えるCSSをコピー。SVGもJavaScriptも不要です。

OpenAPI 検証ツール

OpenAPI または Swagger のドキュメントを JSON か YAML で貼り付けて、コア構造をチェックします: バージョンフィールド、info オブジェクト、paths を、わかりやすいエラーと警告つきで。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

カラーティントジェネレーター

ベースカラーの明るい色合いを生成します。デザイン システム トークン、背景、ホバー状態を 3 ～ 20 段階でスケールします。

PHPフォーマッター

単純なPHPコードに改行と2または4スペースのインデントを追加します。結果は必ず確認してください。PHPパーサーでもPSR-12準拠ツールでもありません。

このツールは他の言語でも利用できます