初心者★htmlでのテーブルの型くずれを防ぎたいんです。

質問

すみません、とっても初心者で申し訳ありませんが
大変困っています。

html初心者、htmlのみでwebを作成中ですが
テーブルの設定がうまくいきません。

表示画面の大きさをかえてもテーブルがくずれない方法をお教え下さいませ！！！！

回答No.7

taseki · ベストアンサー

> テーブル連結って縦＆横同時にできないものなのでしょうか．．

つまり、こんなようなことですよね？（個数は違いますが）
┏┳┳┓
┣╋┻┫
┣┫　 ┃
┗┻━┛

ソースはこうなります。

<table border="1">
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
</tr>
<tr>
<td>…</td>
<td colspan="2" rowspan="2">…</td>
</tr>
<tr>
<td>…</td>
</tr>
</table>

ちなみに、こういうことをやるときもやはり、先に border="1" を付けて表示させてみることをおすすめします。

お礼

お礼が遅くなりまして申し訳ありませんでした。
taseki様のご親切な説明で、かなりわかりました！！

ありがとうございました～～～！！！！！

回答No.6

taseki

なんどもすみません。
よく見たら、テーブルのスペルも違ってますね…。<table>です。
もしコピーペーストしたものであれば、これこそが原因なのでは？…

補足

とってもありがとうございます。
とってもためになり、、今作業中です。

どうにかなりそうです。。
ちなみにスペル、間違ってました。。

ちなみにもう1つ聞いてもよいでしょうか・・
ほんとに初心者で申し訳ありませんが、
テーブル連結って縦＆横同時にできないものなのでしょうか．．

例えば
600×800内に
1行目　横幅100pxを横に8個ならべ
1列目　縦幅100pxを縦に6個ならべ
2列目＆2行目に　400×700を1つ作りたいのですが・・・

初心すぎて、本当に申し訳ありませんが
アドバイス頂けますと大変助かります！

回答No.5

taseki

補足します。
通常、テーブルのセルが、画面の横幅が足りないからといって縦に並んでしまうことはありません（足りない分、はみ出すだけ）。
なので、セルの中に2つ以上の画像が入っているのではないでしょうか。
まずは下の、HTMLの間違いを直してから、
<table border="1" ...
として、罫線を表示させてみてください。
それで確認すれば、どこかのセルに画像が複数入っていればわかるはずです。

回答No.4

taseki

ウィンドウが狭くなると横に並ぶはずの画像が縦に並ぶ、ということですね。
それはテーブルの1つのセルに複数の画像を入れているのでは？
でもその前に、ソースを見るといくつか問題が…。

<tabel border width="800" height="600" alt="">

↑border には border="1" など「線の太さ」を指定しなければいけません。
↑alt="" はtableタグには意味がないです。

<td width="100"><img src=○.gif" width="143" ...

↑横幅100のセルに横幅143の画像を入れようとしています（画像に合わせられるので100が無意味になる）。

tableタグが閉じられていないのは、単に投稿のときのミスですか？
意外に、それがくずれる原因だったりして。

回答No.3

2NN

あ、ごめんなさい。#1のTDの合計を足すと600だ。
TABLEが700なので数字が間違っていました。
この場合、TDは300と400などで。

回答No.2

taseki

まずは質問の内容をもう少し具体的にしていただければ答えやすいです…。
「テーブルの設定がうまくいきません」や「テーブルがくずれない」というのが、どういう事なのかが良く解りません。
ウィンドウのサイズに応じてテーブルの横幅が変わるのを避けたい、ということなら、おそらくTABLEタグにWIDTH="80%"などと書いているのでは。もしそうなら、これはテーブルの横幅を可能描画域（たとえばウィンドウの横幅）に対して80%に、という意味なので、WIDTH="500"などとすれば500ピクセルに固定されます。

補足

ありがとうございます！
説明がうまくなくて申し訳ないです。

横並びにgif画像を並べてるのですが、表示画面が狭くなると
画像がたてにならんでしまうのです。

ちなみにタグをのせてみました．．

<tabel border width="800" height="600" alt="">
<tr>
<td width="100"><img src=○.gif" width="143" height="145" alt="LOGO"></td>
<td width="100"><img src="○.gif" width="143" height="143" alt="top"></td>
<td width="100"><img src="○.gif" width="143" height="143" alt="news"></td>
<td width="100"><img src="○.gif" width="143" height="143" alt="tour"></td>
<td width="100"><img src="+○.gif" width="143" height="143" alt="links"></td>
<td width="100"><img src="○.gif" width="143" height="143" alt="info"></td>
</tr>

回答No.1

2NN

<table>および<td>のサイズは設定していますか？

例：
<table width="700" height="500">
<tr>
<td width="300">
aaa
</td>
<td width="300">
bbb
</td>
</tr>
</table>

お礼

初心者ですのにご親切にありがとうございます！！
無事解決しました！！！

ホントに感謝感謝です・・
ありがとうございます・・・

補足

スミマセン・・
やっぱり解決してませんでした。。

詳しく書きますと
テーブルを組んで、そこにgif画像をはりたいのです。
ですが・・うまくいきません。

どうしたらよいのでしょう・・