テーブルがうまくいかない

[上に] [前に] [次に]
Pucho [HomePage] 2000/03/24(金) 21:00:38
新しいインデックスを作ろうと思って、
とほほさんのリファレンスを見ながら作ってみましたが、
IEでは意図通りに表示されるのに、
NNだとレイアウトが崩れてしまいます。
たぶんテーブルタグの設定が変なのだと思いますが、
ちょっとよくわかりません。
どなたかどこがダメだか教えてください。
http://www2u.biglobe.ne.jp/~pucho/index_kari.htm
Ｋ１７ 2000/03/24(金) 21:20:47
index.html(19): <CENTER> の前に </P> が省略されているとみなします。
index.html(19): <P> と </P> の間が空です。
index.html(19): </TR> は 44行目の <TD> と重なり合っているようです。
index.html(19): </TR> は 44行目の <TD> と重なり合っているようです。
index.html(89): </TR> の前に </TABLE> が省略されているとみなします。
index.html(121): </TR> は 101行目の <TD> と重なり合っているようです。
index.html(121): </TR> の前に </TBODY> が省略されているとみなします。
index.html(121): </TR> は 101行目の <TD> と重なり合っているようです。
index.html(121): </TR> の前に </TABLE> が省略されているとみなします。
index.html(123): <TR> を 31行目の <DIV>〜</DIV> 内に書くことはできません。
index.html(132): </TD> は 31行目の <DIV> と重なり合っているようです。
index.html(132): </TD> の前に </DIV> が省略されているとみなします。
index.html(166): </TD> は 142行目の <CENTER> と重なり合っているようです。
index.html(166): </TD> の前に </CENTER> が省略されているとみなします。
index.html(168): </TR> に対応する開始タグ <TR> が見つかりません。
index.html(168): </TABLE> に対応する開始タグ <TABLE> が見つかりません。
index.html(171): </DIV> に対応する開始タグ <DIV> が見つかりません。
index.html(173): </TD> に対応する開始タグ <TD> が見つかりません。
index.html(174): </TABLE> に対応する開始タグ <TABLE> が見つかりません。
X 2000/03/24(金) 21:42:01
おそらく上の方はHTMLチェッカーの出力をここにコピーしたのでしょう。

私の意見を言わせてもらうと、テキストエディタをつかって
ホームページを作っているのなら、ソースをもっと見やすくするために
インデントを挿入したり、空行をとるなりすれば
ケアレスミスは防げます。
以上です。
wosamu 2000/03/24(金) 22:07:44
えーっと、<DIV></DIV>,<TABLE></TABLE>,<TR></TR>,<TD></TD>
の対応は正しくなっていますか？
ちょっとソースを拝見したのですけれど
私には理解しかねる範囲です(^^;
テーブルをレイアウトに使用するのはこのようにソースが複雑になって
ミスが起こりやすいのでもう少しシンプルな構成にするか
スタイルシートを利用してレイアウトを行ってみてはいかがでしょう？
私はスタイルシートは知りませんけど。
ごん 2000/03/25(土) 09:54:39
私はNNの方が見やすいと思いました。

テーブル表示をどういう風にしたいのかわかりませんが、
縦にずら〜っと項目を並べたいのなら<TABLE>内の<TABLE></TABLE>後に<BR>（改行）を、
横に並べて<TABLE>を表示したいのなら
<TABLE><TR><TD>
  <TABLE><TR><TD>内容1</TD></TR></TABLE>
</TD>
<TD>
  <TABLE><TR><TD>内容2</TD></TR></TABLE>
</TD></TR></TABLE>
にするといいと思います。
ごん 2000/03/25(土) 10:00:01
それか、最初のテーブルタグの所、
WIDTH="100%"という%表示じゃなく、数値だけにしてしまうとか。
ごん 2000/03/25(土) 11:13:55
何度もすみません。m(_ _)m
2つ↑の</TD><TD>の事は、よくソースを見てみたら ちゃんとなってましたね。
うちのIEでは縦に長々と表示されてたので、もしや？と思っただけで書いてしまいました。

で、ソースを見た所、テーブルの中に沢山テーブルを使っておられるのですね。
私も依然テーブル使いまくりでしたが、テーブル内にテーブルを使うと、
どうしてもIEとNNでの表示の違いが出てしまいました。
今はなるべくテーブルの重ねをなくしてCOLSPANやROWSPANをうまく使うようにしています。
それに、あまりテーブルを重ねすぎると表示が遅くなりますし。

私には、これくらいしか解りません。(^-^;　お役にたてなくてスミマセン。
Pucho 2000/03/25(土) 11:19:22
＞Ｋ１７さん
え〜っと、これはどう見ればいいでしょうか？？
こういうの見るのがはじめてなので、見方をお願いします。
index.html…
紛らわしかったかもしれませんが、
デバッグをお願いしたのはindex_kari.htmの方ですが。
([HomePage]の方だと思われたならすみません)
その後の(171)etc とは… L番とか？

＞Xさん
> インデントを挿入したり、空行をとるなりすれば
> ケアレスミスは防げます。
そうしてはいたつもりなんですが…
もしかしてアップしたら一行続きのになってしまったとか？

＞wosamuさん
> <DIV></DIV>,<TABLE></TABLE>,<TR></TR>,<TD></TD>
> の対応は正しくなっていますか？
<DIV></DIV>はいいと思うんですけど。。。
残りのタグはどこのですか？(^o^;)
すみません、たくさんあってどこのかわからず…
> スタイルシートを利用してレイアウトを行ってみてはいかがでしょう？
あ、なるほど、そういう手もありますね。
ただ、今はテーブルについての議論なので、
もし解決しなければそちらでやってみる、ということで。

＞ごんさん
> 私はNNの方が見やすいと思いました。
NNなんですけど、メニュー表示の部分が変ですよね？
左側の一番下のテーブルがはみ出している、
"■ 音楽関連"などが右側いっぱいまで延びていない、など。
それがIE(僕のは5)だと思ったように表示される… なぢぇ？
ごん 2000/03/25(土) 11:39:27
＞Puchoさん
私のIE(4.5)では、
BORDER=3のテーブル内で、『今月の健康』『♪』の下に『最終更新日』…と続いて縦長に表示されます。
NN(というかNetscapeCommunicator4.7)では、
Puchoさんの書いたものと同じようになっています。

TABLEの％表示を数値のみにするとかはどうなんだろう…？
それでもIEとNNでの微妙な表示違いは避けられないと思いますけど(^-^;
ごん 2000/03/25(土) 11:44:38
あ、今見つけましたが、
『音楽関連』の</TABLE>の後に</TD>がありませんよ〜
というか、<TD>の後の</TD>がありません。　全部（かも）。
安芸川晴海 2000/03/25(土) 12:48:00
SP 1.3にチェックさせた結果を参考にしつつ書きます。TABLE関係のエラーと、その他気になる部分のみを抜き出しました。なお、行番号は改行文字による明示的改行のみをカウントしています。同じエラーは最初の出現位置のみを書いています。

16行目:BODY要素開始タグ　#を含む属性値はダブルクォーテイションで括らねばならないのに括っていません。これ以後の、TABLE要素開始タグの属性値にも同じエラーが出ています。
20行目:P要素内にCENTER要素は書けません。CENTER要素の直前でP要素終了タグが省略されていると仮定すると、P要素の内容が空ですのでやはり違反です。
33行目:TABLE要素にheight属性は定義されていません。
37行目:TABLE要素にbordercolor属性は定義されていません
38行目:TABLE要素にcols属性は定義されていません。
47行目:valign属性は"center"を値に取れません。"middle"と言いたいのでしょう。
74行目:必須属性altが指定されていません。
259行目:TD要素終了タグがひとつ余計です。これが、以下で数多くのタグ不整合を引き起こしています。
294行目:form要素action属性 /を含む属性値にはダブルクウォーテイションが必要です
294行目:input要素value属性 日本語文字を含む属性値にはダブルクウォーテイションが必要です。

なお、nsgmlによるチェックで文法違反が検出されなくなるまで修正してNN 4.6による表示を試みましたが、改善されませんでした。
問題は別のところにあるのかもしれません。
まあ、結局のところ、TABLEで表示位置を調整するという邪道な行為の限界なのでは？　こういう表記に対してはブラウザの動作が保証されなくとも文句は言えない立場ですし。
とはいえ、比較的配慮された表記順だったため、Lynxではきちんと内容が伝わる、というある意味では皮肉な結果になっていますが。
さだひろ 2000/03/25(土) 16:34:05
</TABLE></TR></TR></TABLE>というところがあったし（見間違いでなければ），とにかくTABLEの入れ子が５重というのは深すぎでは？
とても読めませんので，原因は分かりかねます．
ごんさんのおっしゃるとおり，COLSPANとROWSPANを使って書きなおすのが賢明だと思います．
#たぶんHRの下に一番外のテーブルを置き，
それを左右に分けて，左に文字，右にBORDER=3のテーブル，
BORDER=3のテーブルを左右に分ける．
その中はTR TD colspan rowspanだけでがんばるという感じでは？
これで入れ子は３重に抑えられます．
（３重なら済むという問題ではないですが）
#レイアウトが崩れるという内容が，はみ出しとすきま開きですから，セルのサイズ指定が矛盾しているか，セルの数がずれているとかの何らかの問題があるような気はします．
Pucho 2000/03/25(土) 21:45:23
結局ごんさんやさだひろさんのおっしゃる通り、
COLSPANとROWSPANを使って書きなおしたところ、
http://www2u.biglobe.ne.jp/~pucho/indecks.htm
のようになりました。
どうも”TABLEで表示位置を調整するという邪道な行為の限界”だったようですし。(^^+)
ま、いいとして、あまり入れ子を多用するのは避け、COLSPANやROWSPANをつかう、
という結果と相成ったわけで、これで解決とします。が、

</TD>はとほほさんのリファレンスでは省略可になってますよね。
安芸川晴海さん曰くTABLE要素にheight属性、bordercolor属性、cols属性はダメ、と。
これもとほほさんによるとOKですよね？
＞比較的配慮された表記順だったため、Lynxではきちんと内容が伝わる、というある意味では皮肉な結果になっていますが。
それはどういう意味？
細部の解決が至っていないので、まだ解決ボタンは押さないでおきます。
やなぎ 2000/03/26(日) 00:50:50
</TD>（</TR>も）って省略可能だったのですね。
個人的には閉じるに越したことはないかな、とも思いますが…。
特にテーブルが入れ子になってる場合、範囲が明確なほうが良いような気がします。
省略したり、しなかったりが、混ざるというのも、どうなのでしょう。あ、でも今回の問題に関係なかったらすみません。憶測です。

それと、テーブルには関係ないですが、色の16進数表記の#って
つけなくても問題ないんでしょうか。
X 2000/03/26(日) 00:58:03
</td>や</tr>、#にしてもつけなくても
よいのでしょうが、精神衛生上よくなくありませんか？
私は潔癖症ですからこういうのは気持ち悪く感じて
しまうんですねぇ。
ごん 2000/03/26(日) 01:11:45
</TD>等、省略可能だったのですね。
何でも開けたものは閉じたくなる性分なもので。（<P>は閉じないけれど）

ところで、細部とはどこでしょうか？
sadahiro 2000/03/26(日) 01:42:53
>細部
sadahiro 2000/03/26(日) 01:47:25
上↑済みません．
安芸川さんのお考えと異なるかもしれませんが，
・TABLEは「表」として使うべきであり，レイアウト目的に転用すべきではない，それで「表示が崩れる」のはある意味では報いである．
・なのにテクストブラウザで表が使えないはずの
>Lynxではきちんと内容が伝わる
「皮肉」とはこういう矛盾のことだと思いますよ
てきとー 2000/03/26(日) 05:33:21
> 安芸川晴海さん曰くTABLE要素にheight属性、bordercolor属性、cols属性はダメ、と。
> これもとほほさんによるとOKですよね？
仕様と実装でしょう。安芸川晴海さんは仕様的にNG、とほほさんは実装的にOKというだけです、きっと。

>ごんさん
>（<P>は閉じないけれど）
どーでもいいことですが、</P>って確か省略できないケースもありますよ。そういう意味では省略せずに閉じた方が無難です。
Ichi [HomePage] 2000/03/26(日) 06:11:17
>>安芸川晴海さん曰くTABLE要素にheight属性、bordercolor属性、cols属性はダメ、と。
>>これもとほほさんによるとOKですよね？
>仕様と実装でしょう。安芸川晴海さんは仕様的にNG、とほほさんは実装的にOKというだけです、きっと。
そう言うことでしょう。cols, height bordercolorはNN, IE専用の属性ということですね。
とほほさんのにもそれとなく書かれています。(H4などがついてない)

仕様にのっとるならば(むしろIE, NN専用にしたくなければ)、
列数はcol, colgroup要素で指定します。
( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html40j/translation/struct/tables.html#h-11.2.4 )

HTML仕様書: http://www.w3.org/TR/REC-html40
その邦訳: http://www.asahi-net.or.jp/~sd5a-ucd/rec-html40j/translation/cover.html

この辺も余裕があれば読んでみてください。
wosamu 2000/03/26(日) 08:22:43
>残りのタグはどこのですか？(^o^;)
>すみません、たくさんあってどこのかわからず…
私もたくさんあってわからないです。
多分わからないくらい複雑なのがデバッグを難しくしているのだと思います。
けど、どうやらその辺が問題では無いみたいですね。
>私は潔癖症ですからこういうのは気持ち悪く感じてしまうんですねぇ
私もそのクチなんですが・・・。
といいますか、あそこまで複雑なテーブルで省略したり
しなかったりしたら、なんか間違えてしまいそうで。
あ、省略しないでも出来ませんけど（笑）
Pucho 2000/03/26(日) 11:56:10
＞やなぎさん
> 個人的には閉じるに越したことはないかな、とも思いますが…。
> 特にテーブルが入れ子になってる場合、範囲が明確なほうが良いような気がします。
ブラウザに優しいソース作り、と。

> 省略したり、しなかったりが、混ざるというのも、どうなのでしょう。
ブラウザの解釈に影響あるのかな？
ただ、「省略可」となっている以上、ブラウザはこれを無視する、のでしょうか。
きっとHTML XだとNGなのでしょうけど。

＞Xさん
> </td>や</tr>、#にしてもつけなくても
> よいのでしょうが、精神衛生上よくなくありませんか？
単にバイト数が増えるのが嫌なだけなんですけど。(こんな理由ですみません)

＞sadahiroさん
> ・TABLEは「表」として使うべきであり，…(中略)…「皮肉」とはこういう矛盾のことだと思いますよ
なるほど。これって、<BLOCKQUOTE>をインデント目的に使用するな、というのと同じと考えていいのかな。
(無知で恐縮です)

＞Ichiさん
> (H4などがついてない)
ほんとだ。IEやNNを使用している人が多いとはいえ、
やっぱり仕様書に準拠していないソースはまずいでしょうか。
Pucho 2000/03/26(日) 18:05:21
[[解決]]
テーブルもうまくいったし、
だいたいソースについても自己解決したので
(すみません、上の書き込みが解決しました)
なんとかこれで解決、です。
みなさん、いろいろありがとうございました。
[上に] [前に] [次に]