御隠居のホームページ基礎
24. 複雑なテーブル
単純なテーブルは、すでに学習しましたが、ここでは、もう少し複雑なテーブルについて勉強しましょう。
列をまたぐテーブル
これまでのテーブルは、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>行をまたぐテーブル
列をまたぐテーブルの他に行をまたぐテーブルもあります。 例えば、次のような形式のテーブルも、これまでのマークアップでは表現できません。
では、このような表の場合、どのように考えるか？これも列の場合と同様に行をまたぐセルにそのまたぐ行数を指定します。 この指定には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>行と列をまたぐテーブル
これまでに列と行をまたぐテーブルの書き方についてみてきました。 これを応用すれば、行と列双方をまたぐテーブルも記述することができます。 例えば、次のような形式のテーブルについて考えてみましょう。
では、このような表の場合、どのように考えるか？これも列、行の場合と同様に列、行をまたぐセルにそのまたぐ列数、行数を指定します。 この指定には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>