ＨＴＭＬとＣＳＳのリファレンス２

ＴＡＢＬＥくっつけなど

バラバラ要素の集合体

このサイトで使っている用語の意味をまとめています。
個人的な解釈もあります。
１００％鵜呑みにしないようご注意下さい　（＾＾）

ここでは、TABLE関係の説明をしています

1. 縦をくっつける
2. 横をくっつける

■　縦をくっつける

TABLEのセルを、縦方向にまとめるやり方です。
rowspanを使います。

<td rowspan="連結するセルの数"></td>

（th にも使えます）

単体では機能しません。
対応する数だけ、縦部のセルを設定してください。

３つを連結させるなら、縦に３つ。
５つを連結させるつもりなら、５つです。

例を書きます。
「あれっ？」て思った方がいるはず。下で答えあわせをします。

少しだけ、悩んでみてくださいね。

<table>
<tr>
<td rowspan="3">笑い方</td>
<td>1 はーはははっつ</td>
</tr>

<tr>
<td>2 ひーひひひひ</td>
</tr>

<tr>
<td>3 ふふふのふ</td>
</tr>
</table>

悩みましたか？　（＾＾）
上の例は、私の書き間違いではありません。

よくはわかりませんが、rowspanでつなげる場合、上のようにしなければならないのです。どういうわけでしょうか？

tr や　th は横方向のセルの並びを区切るタグです。
３つのタグがあれば、３つのセルが作られます。

つまり、

１番上のtrでは
　　rowspanで一番左端のセルを定義（ここでは笑い方）。
　　ｔｒの中で、残った全てのセルを定義（ここでは１）
２番目のｔｒは、１番左を差し引いた数だけ定義（ここでは２）
３番目のｔｒは、１番左を差し引いた数だけ定義（ここでは３）。

最上のｔｒの中では、いっぺんに２つのことをやっています。
ものすごーく、まぎらわしいので、慣れが必要ですね。

■　横をくっつける

TABLEのセルを横方向につなげる方法を説明します。
セル（TD）を連かつするにはcolspanを使います。

<td colspan ="連結するTDの数"></td>

（th　にも使えます）

単体では、機能しません。（というか、意味がありません）
連結した列の上（または下）の列群には、指定した数字に合う数だけのtdを設定してください。

例を書きます。

<table>
<tr>
<td colspan="5">泣き方</td>
</tr>

<tr>
<td>1 うぇーん</td>
<td>2 しくしく</td>
<td>3 ほぇーん</td>
<td>4 わんわん</td>
<td>5 ポン！</td>

</tr>
</table>