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拡張機能を使用して確認してください。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

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