tableタグでwidthとheightを100%にした時に起こる

Question

tableの中にtableを入れて以下のように表示をさせようと思っています。 (色わけの為四角で表現していますが、実際は同じ色の四角はつながっています) ■□□□■ ■□□□■ ■□□□■ そこで、 test

というように作成しましたが、直接このページを見るなら問題はないのですが、違うリンクからこのページを見ると ■□□□■× ■□□□■× ×××××× というようになってしまいます。ですが、更新ボタンを押すときちんと ■□□□■ ■□□□■ ■□□□■ と表示されます。更新ボタンを押さなくても正常に表示させる方法はありますでしょうか？また、一番目のtableタグはwidthとheightとも100%なのでそれをなくした場合も試しましたが、 ■□□□■ ■□□□■ ■■■■■ と表示されます。 htmlはいろんなサイトを見ながら自己流でやってきたので、間違っている所もあるし、説明がわかりづらいかと思いますが、わかる方がいらっしゃれば教えて下さい。宜しくお願いします。また、htmlの書き方等、良いわかりやすいサイトや本があればお教え下さい。(自分でもhtmlサイトはお気に入りに入れてますが、他にも良い所があるかもしれないので。)

syagain · Accepted Answer

同じソースで確認してみましたが、リンク先にしてみても画像の１のような現象は起こりませんでした。ブラウザ依存の問題なのでしょうか？（ちなみに環境はMacOSX　ブラウザはMozillaベースのFlockです）あと横レス失礼しますが　：これは本来「表」として使うものであり、デザインに使うのは好まれないようです。しかし

だとCSSによる細かい設定が必要なので、初心者には簡単な

がよく使われるみたいです。「表示はできる」けど「目的外の使用」なので、CSSなども使っていくのであれば、

を使った方が融通も利いていいと思います。外の冒頭に書かれています。使用を推奨されているタグ、非推奨のタグなどに違いがあるのですが、主流のソースをコピペする程度の知識で大丈夫です。ちなみに、自分も回答者No.2さんとほぼ同じソースになりました。以下略 *参考になるサイト　とほほのWWW入門　http://www.tohoho-web.com/www.htm 　　……辞書として使ってます。色んなタグの確認に。　HTMLタグリファレンス　http://www.htmq.com/index.htm 　　……こちらも同上。目的別リファレンスが便利。　Another HTML-lint gateway 　http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 　　……HTMLソースの文法チェック。　　　　細かいところまで突っ込まれますが、　　　　大まかなチェックは参考になると思います。

hujitomo · Answer

うわ恥ずかしい！
なんか間抜けな間違いを書いちゃいました。お恥ずかしい限りです。
　誤：システム拡張子
　正：システム識別子
です。謹んで訂正させていただきます。

PS
ついでなので書き忘れたことをひとつ。
Web サイトの作成をするならば、できれば複数のブラウザで表示テストを行ってみた方が良いですよ？
現在主流の４大レンダリングエンジン（Trident、Gecko、WebKit、Presto）、最低でもこの４つのレンダリングエンジンを搭載したブラウザでチェックしておけばほぼ安心です。

・Trident → IE
・Gecko → Forefox
・WebKit → Safari や Google Chrome
・Presto → Opera

hujitomo · Answer

＞私の表示させたい方法は皆さん普通tableじゃなくdivを使っているのでしょうか？

table は『表』です。以上。

＞bodyの書き方も違うようですが、htmlの書き方は変わったのでしょうか？

html の書き方は変わってません。
コレが本来の正確な書き方なんです。
html（というより ml ） っていうのは文章の論理構造を表現する為の言語です。ですから背景色や文字色、サイズなどを html で指定するのは本来の html の使用目的から外れた使用方法ということになります。そのような「見栄え」に関する指定はスタイルシート（← CSS の事ですよ？念の為）で行うのが正しいやり方です。

＞CSSはhtmlと一緒に使うものなのでしょうか？

ですからこの質問は「YES」というのが解答になります。
そしてスタイルシートを使用するならば、キチンと html の仕様に則った記述をしないとブラウザが『互換モード』という自分勝手な判断に基ずくテキトーな表示を行ってしまいます。各ブラウザで均一な表示（というより CSS の仕様通りの表示）を目指すならば、ドキュメントタイプ宣言とシステム拡張子（<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">の事です）の記述が必須となる為、サンプルでは付けておきました。
ちなみに回答者No.3さんのサンプルは互換モードで表示する事を前提としたソースですので、これにドキュメント宣言を付け足すと意図した表示になりませんので注意してください。
現在の WEB の世界では CSS の知識は必要不可欠なものですので、コレを機会に学んでおけば絶対に損をする事はないと思います。
回答者No.3さんも挙げておられますが、とほほさんのサイトは html や CSS の基礎を学ぶのに適していますので、一度目を通しておくと良いとおもいますよ。

hujitomo · Answer

何で table ？ div じゃ駄目なの？ test

ここにテキスト

pasocom · Answer

　　　・ここには入らないのですか？　　　　　　　　　←ここのはなんですか？。何も入っていないセルを作っている？。　　　　　　　

tableタグでwidthとheightを100%にした時に起こる

同じソースで確認してみましたが、リンク先にしてみても画像の１のような現象は起こりませんでした。

うわ恥ずかしい！

＞私の表示させたい方法は皆さん普通tableじゃなくdivを使っているのでしょうか？

何で table ？

この回答への補足

<body>

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング