モックン☆彡の部屋

テーブルタグの注意点

テーブルタグの注意点

皆さんの質問で多いのが表が下へ下がって表示されると言う点です。

ここでは、その原因と解決法を書きます。

まず原因ですが、これは楽天でページを作るときの

自動改行（初心者向け） に原因があります。

例えば、横４列縦２列の表を作る場合は下のように書きます。

《例題》

実際に書くもの

｜

結果

< TABLE border="1" >
< TR >
< TD > Ａ </ TD >< TD > Ｂ </ TD >
< TD > Ｃ </ TD > < TD > Ｄ </ TD >
</ TR >
< TR >
< TD > Ｅ </ TD >< TD > Ｆ </ TD >
< TD > Ｊ </ TD > < TD > Ｈ </ TD >
</ TR >
</ TABLE >

→

Ａ	Ｂ	Ｃ	Ｄ
Ｅ	Ｆ	Ｊ	Ｈ

ここの講座では、タグの開始と終わりをわかり安くするために、

故意にスペースを空けて、タグを書いています。

よって、例題のタグをコピーして書く時に、

ページの設定で 自動改行なし（<BR>タグで指定） を選択している場合は、

下のように書きます。

《書き方１》

もう１つの方法としては、例題に書いてあるタグをコピーした後に、

全角のスペースを半角に置き換えれば正しく表示されます。

そして、 自動改行（初心者向け） の場合は、

《書き方２》

< TABLE border="1" > < TR > < TD > Ａ </ TD >< TD > Ｂ </ TD > < TD > Ｃ </ TD > < TD > Ｄ </ TD > </ TR > < TR > < TD > Ｅ </ TD >< TD > Ｆ </ TD > < TD > Ｊ </ TD > < TD > Ｈ </ TD > </ TR > </ TABLE >

このように全てのタグを つなげて 書きます。

では、何故ページが 自動改行（初心者向け） の設定で、 《書き方１》 を書くと

表が下に下がってしまうかというと、 自動改行（初心者向け） では

< TABLE border="1" > <BR>
< TR > <BR>
< TD > Ａ </ TD >< TD > Ｂ </ TD > <BR>
< TD > Ｃ </ TD > < TD > Ｄ </ TD > <BR>
</ TR > <BR>
< TR > <BR>
< TD > Ｅ </ TD >< TD > Ｆ </ TD > <BR>
< TD > Ｊ </ TD > < TD > Ｈ </ TD > <BR>
</ TR > <BR>
</ TABLE >