HTMLで複雑な表を作る方法
このページでは、HTMLで複雑な表を作成する方法について、例を交えながら詳しく解説します。以下のセクションから各トピックにジャンプできます。
セルの結合（colspanとrowspan）
HTMLでは、colspanとrowspan属性を使用して、横方向や縦方向にセルを結合することができます。
項目
2023年
2024年
収益
100万円
コスト
50万円
60万円
利益
30万円
40万円
計 70万円
上記の例では、colspanを使って「収益」のセルを2列に結合し、rowspanを使って「利益」のセルを2行に結合しています。
入れ子構造の表（Nested Tables）
複雑なデータ構造を表現するために、表の中に別の表を挿入することができます。
製品カテゴリ
詳細
家電
製品名
価格
冷蔵庫
10万円
洗濯機
8万円
家具
製品名
価格
ソファ
5万円
テーブル
3万円
上記の例では、外側の表の中に別の表を挿入しています。これにより、カテゴリごとの詳細を簡潔に表現できます。
見出しを利用した表の整理
HTML5では、<thead>、<tbody>、<tfoot>タグを使用して表を整理できます。
項目
値
収益
100万円
コスト
50万円
利益
50万円
この例では、<thead>タグで見出し行を、<tbody>タグでデータ行を、<tfoot>タグで集計行を定義しています。
大規模なデータ表を効率的に作る方法
大規模なデータ表を扱う際には、スクロール可能な表を作ることが有効です。これには、HTMLだけでなくCSSも活用しますが、ここではHTML部分のみを示します。
ID
名前
年齢
職業
1
田中太郎
30
エンジニア
2
山田花子
25
デザイナー
この方法を用いると、表全体をスクロール可能にすることで、縦横にデータが多い場合でも見やすくなります。