1. テーブルを構成する4つの基本タグ

HTMLで表（テーブル）を作成するには、複数のタグを入れ子にして組み合わせる必要があります。最も基本的な構成要素は以下の4つです。

• <table>: 表全体のコンテナ。
• <tr> (Table Row): 表の「行」を定義します。
• <th> (Table Header): 表の「見出しセル」。太字かつ中央揃えで表示されるのが一般的です。
• <td> (Table Data): 表の「データ（値）セル」。通常テキストで表示されます。

<table>
    <tr>
        <th>商品名</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>リンゴ</td>
        <td>150円</td>
    </tr>
</table>

2. thead・tbodyによるテーブル構造のグループ化

表が長くなる場合や、より論理的なマークアップを行うために、表のヘッダー部分・ボディ部分・フッター部分を明確にグループ化するタグを使用します。

• <thead>: 見出し行（見出しとなるtr）をまとめます。
• <tbody>: データのメインコンテンツ（データとなるtr）をまとめます。
• <tfoot>: 合計値など、表の最下部の行（tr）をまとめます。

これらを使用することで、CSSでのスタイリングが容易になるだけでなく、スクリーンリーダーなどのクローラーに対しても表の構造を正しく伝えることができます。

3. セルを結合する：colspanとrowspan

エクセルと同じように、HTMLの表でも縦や横の複数のセルを1つに繋ぎ合わせる（結合する）ことができます。

図：colspan（横結合）と rowspan（縦結合）の仕組み

<td colspan="2">2つの列を横に結合したセル</td>

<td rowspan="3">3つの行を縦に結合したセル</td>

4. 結合を駆使した料金表の実装コード

縦結合（rowspan）と横結合（colspan）を組み合わせた、実践的なプラン比較表のコードです。

<table>
    <thead>
        <tr>
            <th>プラン名</th>
            <th>月額料金</th>
            <th>おすすめ対象</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ライト</td>
            <td>1,000円</td>
            <!-- 次の行のセルと縦に結合（2行分） -->
            <td rowspan="2">個人利用</td>
        </tr>
        <tr>
            <td>スタンダード</td>
            <td>3,000円</td>
            <!-- この行の3列目（個人利用）は上のセルに吸収されたため記述しない -->
        </tr>
        <tr>
            <td>ビジネス</td>
            <!-- 右隣のセルと横に結合（2列分） -->
            <td colspan="2">要お問い合わせ（企業向け）</td>
            <!-- この行の3列目は横に結合したため記述しない -->
        </tr>
    </tbody>
</table>

5. まとめと次回予告

セルの縦横結合（colspan/rowspan）はパズルに近く、最初のうちはコード上のセルの個数を数えるミスが発生しやすいですが、慣れれば極めて直感的かつ綺麗な表が書けるようになります。

次回（第7回）は、「ユーザーからテキスト入力を受け取る お問い合わせフォームの基本」をテーマに、formタグ、inputタグ、各種送信パーツの組み方を学習します！