テーブルタグを理解してみる

CSS中級編

　テーブルタグ、この辺になると怪しいのですが（いや、他も独学なんで怪しいんですが…汗）、今回は、まずタグから研究していきます。
　タグを使ったことが有り、テーブルタグも知っている人は、テーブルタグのめんどくささはご存知だと思いますが…

　やっぱり、テンプレートをレイアウトする時には強力な武器になります。

テーブルの組み立て方

　テーブルタグの基本形は…

　こんな形になります。

　テーブルタグには、このように基本の「table」「tr」「td」３つの要素を組み上げて作ります。
「table」は、表全体のボックスを生成するタグ。
「tr」は、表全体「table」の中の、横一列いっぱいのボックス。
「td」は、「tr」の中に作る、テキストを入れるボックス。

　こんな感じです。

<table>

<tr>

</tr>

</table>

　いちばん外側が「<table>」、その中の横列全体が「<tr>」、文字など、内容物を入れるところで、かつ横にいくつでも分けることが出来るボックスが「<td>」というわけです。

　次に、２列の表を作る場合は、こんな風に作ります。

　こんな感じ。

<table>

<tr>

</tr>

<tr>

</tr>

</table>

テーブルのボックスを横に繋げる（連結する）

　次が、テーブルを使いこなす一番重要な、連結、ボックスを横に繋げる方法です。
　例えば、「内容２」と「内容３」を一つにして、「内容Ａ」を作ってみますと…

<table>
　<tr>
　　<td>表の内容１</td>
　　<td colspan="2">表の内容Ａ</td>
　　~~<td>表の内容３</td>~~
　</tr>
　<tr>
　　<td>表の内容４</td>
　　<td>表の内容５</td>
　　<td>表の内容６</td>
　</tr>
</table>

　こういうふうに記述します。「colspan="数値"」と言うのが、「横に○個連結する」と言う命令文。数値を変えれば、連結する数が増やせます。
　こんな感じになります。

<table>

<tr>

</tr>

<tr>

</tr>

</table>

テーブルのボックスを縦に繋げる（連結する）

　次は、テーブルのボックスを縦に繋げる方法。
　「内容１」と「内容４」を連結して「内容Ｂ」にしてみますと…

<table>
　<tr>
　　<td rowspan="2">表の内容Ｂ</td>
　　<td>表の内容２</td>
　　<td>表の内容３</td>
　</tr>
　<tr>
　　~~<td>表の内容４</td>~~
　　<td>表の内容５</td>
　　<td>表の内容６</td>
　</tr>
</table>

　こんな感じになります。
　お気づきと思いますが、「<tr>」と言うのは、divボックスとはちょっと性質が違い、縦に中の箱がはみ出し、下の箱と連結…つまり、中の箱が「<tr>」の箱をはみ出すことを許可している特殊なボックスと言えます。
　図で示すと、こんな感じに。