作成ネット収入HP「あくせすポイント」
トップ > ホームページ作成 > 共通設定のリファレンス2

HTMLとCSSのリファレンス2

TABLEくっつけなど

バラバラ要素の集合体

このサイトで使っている用語の意味をまとめています。
個人的な解釈もあります。
100%鵜呑みにしないようご注意下さい (^^)

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

  1. 縦をくっつける
  2. 横をくっつける
<>
■ 縦をくっつける

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

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

(th にも使えます)

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

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

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

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

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

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

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

悩みましたか? (^^)
上の例は、私の書き間違いではありません。

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

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

つまり、

1番上のtrでは
  rowspanで一番左端のセルを定義(ここでは笑い方)。
  trの中で、残った全てのセルを定義(ここでは1)
2番目のtrは、1番左を差し引いた数だけ定義(ここでは2)
3番目のtrは、1番左を差し引いた数だけ定義(ここでは3)。

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

■ 横をくっつける

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>


Copyright(C)AccessPoint by Tukioyaji ページトップ
メールする