HTML表ジェネレータ

良い HTML 表とは何か

HTML 表は、本当に表形式のデータ、つまり値の位置が意味を持つ行と列を提示するために存在します。価格の一覧表、スケジュール、比較表などです。正しい表は単なるセルのグリッド以上のもので、役割を記述する小さな要素のファミリーから組み立てられます。table がすべてを包み、thead と tbody がヘッダーと本体を分け、th が見出しセルを示し、td がデータセルを保持します。この生成ツールはその完全な構造を出力するので、結果はきれいで標準に準拠したものになります。

構造を正しくすることが重要なのは、ブラウザ、検索エンジン、支援技術のすべてがそれに頼るからです。div で偽装したグリッドは表のように見えるかもしれませんが、関係を何も伝えません。一方、適切な表のマークアップは、ページを読むすべての利用者に、データがどう構成されているかを正確に伝えます。

データを入れる2つの方法

グリッドエディタで対話的に表を組み立て、行や列を追加・削除し、各セルに直接入力できます。これは小さな表や手早い編集に最適です。すでにスプレッドシートにあるものなら、CSV インポートタブのほうが速いです。データを貼り付ければ、1ステップでグリッドに解析されます。

インポート機能は区切り文字に柔軟です。カンマ、タブ、セミコロン、パイプで区切られたテキストを受け付けるので、Excel や Google スプレッドシート（タブを使う）からのそのままのコピーも、ダウンロードした CSV（カンマを使う）も両方とも機能します。先頭行に列のタイトルが含まれているときは「先頭行をヘッダーにする」を有効にすると、それらの値が、ふつうのデータではなく thead 内の th セルになります。

実際の例

CSV インポートに3行を貼り付け、先頭をヘッダーとして指定します。1行目に Name、Email、Phone、続いて連絡先の2行です。ツールは、thead が3つの th セルからなる1行を保持し、tbody が td セルの2つの tr 行を保持する表を生成します。「枠線あり」と「縞模様の行」を有効にすると、マークアップはセルの枠線を描き、行を交互に陰影付けするクラスとスタイルを得るので、コードをコピーする前に、ページに表示されるとおりにプレビューが一致します。

見た目のスタイルオプション

基本オプションは、最もよく使うスタイル付けを網羅します。「枠線あり」はセルの周りに線を描き、「縞模様の行」は行を交互に陰影付けして長い表をざっと見やすくし、「ホバー効果」はカーソルの下の行を強調して、読み手が幅広の行を横にたどるのを助けます。各オプションはプレビューにリアルタイムで反映されます。

より細かく制御するには、詳細オプションがセルのパディングとスペーシング、枠線の幅と色、そして border-collapse モードを公開します。これは、隣り合うセルの枠線が1本の線に統合される（collapse）か、別々の二重線のまま残る（separate）かを決めます。カスタムの ID とクラスを付けることもできるので、インラインスタイルだけに頼るのではなく、表を既存のスタイルシートに接続できます。

アクセシビリティのためのキャプションとヘッダースコープ

キャプションは、表に目に見えてプログラム的に関連づけられたタイトルを与え、上または下に配置できます。これは表に名前を付けるアクセシブルな方法で、近くの段落よりもはるかに優れています。スクリーンリーダーがそれを表のラベルとして読み上げるからです。

「ヘッダースコープ」オプションは、ここで最も重要なアクセシビリティ設定です。ヘッダーセルにスコープを col に設定すると、各 th がその下の列のラベルであることを支援技術に伝えます。row に設定すると横の行のラベルになり、両方を組み合わせたオプションは、ヘッダー行とヘッダー列の両方を持つ表を扱います。スコープが正しく設定されていれば、スクリーンリーダーはユーザーがセルからセルへ移動するときに関連するヘッダーを読み上げられるので、値が、文脈のない裸の数字ではなく「Phone: 555-1234」として読まれます。

レスポンシブに関する注意点

表は本質的に幅が広く、列の多い表はスマホの画面からあふれます。「レスポンシブ表」オプションはこれに対処し、ページのレイアウトを崩す代わりに表をコンテナ内で水平にスクロールさせるよう包むので、すべての列が無傷で到達可能なまま保たれます。これは小さな画面のデータ表にとって安全な既定です。

トレードオフを理解しておく価値があります。水平スクロールはデータを忠実に保ちますが、読み手にスクロールを求めます。本物のデータ表を、行と列の関係を失わずに1本の細い列に流し込み直す方法はないので、本当に表形式のコンテンツには、スクロールが応急処置ではなく誠実な解決策なのです。

避けるべきよくある間違い

最も頻繁な誤用は、データを提示するためではなくページのレイアウトを制御するために表に手を伸ばすことです。flexbox や grid のような最近の CSS がレイアウトに正しい道具であり、表は表形式のコンテンツのために取っておくべきです。もう1つのよくあるしくじりは、ヘッダーセルを完全に省くことで、これはスクリーンリーダーのユーザーを列の文脈なしに取り残すので、先頭行にタイトルが含まれているときは必ずそれをヘッダーに格上げしましょう。最後に、クラスのほうがきれいで保守しやすいときに、長いインライン style 属性にスタイルを埋め込まないこと。ID とクラスの欄を使って表をスタイルシートに接続してください。