行数と列数を指定して、HTMLのtableタグを生成します。表の枠組みを手打ちする手間を省けます。
生成される構造
thead / tbody で見出しと本体を分けておくと、スタイルの指定がしやすくなり、支援技術にも構造が伝わります。
<table>
<thead>
<tr><th>見出し1</th><th>見出し2</th></tr>
</thead>
<tbody>
<tr><td>データ</td><td>データ</td></tr>
</tbody>
</table>アクセシビリティの配慮
- 見出しセルは th を使い、scope 属性（col / row）で対応方向を示す
- 表のタイトルは caption 要素で記述する
- レイアウト目的で table を使わない（CSSのGridやFlexboxを使う）
- 複雑な表は分割を検討する。読み上げでは追いにくくなります
スマホでの表示
列が多い表は、スマートフォンでは画面をはみ出します。親要素に overflow-x: auto を指定して横スクロールできるようにするか、カード型のレイアウトに切り替える対応が一般的です。
表にすべきか、しないべきか
項目が2つ程度の情報は、表よりも箇条書きのほうが読みやすいことがあります。表が向いているのは、複数の対象を同じ観点で比べたいときです。
行数が多い表は、重要な列を左に置き、並べ替えの基準がひと目で分かるようにすると読みやすくなります。
よくある質問
Q セルの結合はできますか？
生成後のHTMLに colspan / rowspan を追加してください。
Q スタイルは付きますか？
構造のみを生成します。見た目はCSSで指定してください。
Q レイアウトにtableを使ってもいいですか？
推奨されません。レイアウトにはCSSのGridやFlexboxを使ってください。
Q スマホで表がはみ出します
親要素に overflow-x: auto を指定すると、表だけを横スクロールできます。