テーブルタグの注意点

テーブルタグの注意点

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

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

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

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

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

《例題》

実際に書くもの

｜

結果

<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"><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>

このように改行をするタグの<BR>が自動的に挿入されてしまうからです。

ちなみに、日記を書く場合も自動改行の設定なので、同じ現象が起こります。

以上、簡単な説明ですがお分かり頂けたでしょうか？

この説明が少しでもお役に立てれば嬉しいです。