ホームページの基礎（1. XHTML 編）

1.24 複雑なテーブル

単純なテーブルについては，前回学習しましたが，ここでは，もう少し複雑なテーブルについて学習しましょう。

1.24.1 列をまたぐテーブル

これまでのテーブルは，m行×n列となるテーブル形式でした。しかし，この形式では表現できないテーブルもあります。例えば，次のような形式のテーブルは，これまでのマークアップでは表現できません。

これまで学習したマークアップの方法では，すべての行の列数は同じでなければなりませんでした。しかし，例示の表の場合，２行目と３行目に複数列にまたがるセルが存在し，各行の列数が同一になりません。

では，このような表の場合，どのように考えればよいのでしょうか？それには列をまたぐセルにそのまたぐ列数を指定することで解決します。この指定にはth要素およびtd要素のcolspan属性を使用します。

<th colspan="列数">
<td colspan="列数">

例の場合では，２行１列目のセルが２列にまたがり，３行２列目のセルが２列にまたがっていると考えます。では，実際に先のテーブルのマークアップをしてみましょう。

<table border="1">
    <tr>
        <td>セル１-１</td><td>セル１-２</td><td>セル１-３</td></tr>
    <tr>
        <td colspan="2">セル２-１</td><td>セル２-３</td></tr>
    <tr>
        <td>セル３-１</td><td colspan="2">セル３-２</td>
    </tr>
    <tr>
        <td>セル４-１</td><td>セル４-２</td><td>セル４-３</td>
    </tr>
</table>

1.24.2 行をまたぐテーブル

列をまたぐテーブルの他に行をまたぐ形式のテーブルもあります。例えば，次のような形式のテーブルも，これまでのマークアップでは表現できません。

では，このような形式の表の場合，どのように考えるのでしょうか？これも列の場合と同様に行をまたぐセルにそのまたぐ行数を指定することで解決します。この指定にはth要素およびtd要素のrowspan属性を使用します。

<th rowspan="行数">
<td rowspan="行数">

例の場合では，２行１列目のセルが２行にまたがり，３行３列目のセルが２行にまたがっていると考えます。は，実際に先のテーブルのマークアップをしてみましょう。

<table border="1">
    <tr>
        <td>セル１-１</td><td>セル１-２</td><td>セル１-３</td>
    </tr>
    <tr>
        <td rowspan="2">セル２-１</td><td>セル２-２</td><td>セル２-３</td>
    </tr>
    <tr>
        <td>セル３-２</td><td rowspan="2">セル３-３</td>
    </tr>
    <tr>
        <td>セル４-１</td><td>セル４-２</td>
    </tr>
</table>

1.24.3 行と列をまたぐテーブル

これまでの例では，列と行をまたぐテーブルの書き方についてみてきました。これを応用すれば，行と列双方をまたぐテーブルも記述することができます。例えば，次のような形式のテーブルについて考えてみましょう。

この表の場合，どのように考えるのでしょうか？これも列，行の場合と同様に列，行をまたぐセルにそのまたぐ列数，行数を指定することで表を作成します。この指定にはth要素およびtd要素のcolspan属性とrowspan属性を併用します。

<th colspan="列数" rowspan="行数">
<td colspan="列数" rowspan="行数">

例の場合では，２行１列目のセルが３行２列にまたがっていると考えます。では，実際に先のテーブルのマークアップをしてみましょう。

<table border="1">
    <tr>
        <td>セル１-１</td><td>セル１-２</td><td>セル１-３</td>
    </tr>
    <tr>
        <td>セル２-１</td><td colspan="2" rowspan="3">セル２-２</td>
    </tr>
    <tr>
        <td>セル３-１</td>
    </tr>
    <tr>
        <td>セル４-１</td>
    </tr>
</table>