Softonic

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

貼り付けたデータ、セルの内容、生成した HTML はこのブラウザ内に留まります。手順間のデータはこのタブのセッションストレージに保存され、当社のサーバーへの送信や URL への追加は行われません。

ステップ 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>Q1 sales figures</caption>
  <thead>
    <tr>
      <th scope="col">Region</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拡張機能を使用して確認してください。

関連ツール

BinaryからHexへのコンバーター

バイナリ入力を大文字の16進数値に変換します。0と1以外は無視され、先頭の0は保持されません。

バイナリからASCIIへの変換ツール

バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを取得できます。7ビットと8ビットのエンコードに対応。

FPS カウンター

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

Base64 → Hex 変換ツール

Base64文字列を、その背後にあるバイトの16進表現へ変換します。トークン、鍵、証明書、JWTの確認に便利です。

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

2進数から10進数へ変換

2進数を瞬時に10進数へ変換します。各ビットがどのように寄与するかが分かる位取り展開を表示します。