- ベストアンサー
tableタグでwidthとheightを100%にした時に起こる
tableの中にtableを入れて以下のように表示をさせようと思っています。 (色わけの為四角で表現していますが、実際は同じ色の四角はつながっています) ■□□□■ ■□□□■ ■□□□■ そこで、 <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- td { font-size: 12px} body { font-size: 12px} --> </style> </head> <body bgcolor="#000000" link="#FF0000" vlink="#FF0000" alink="#FF0000" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="100%" height="100%" border="0" bordercolor="#AAAAAA" bgcolor="#FFCCCC" cellspacing="0" cellpadding="0"> <tr> <td> <table align="center" width="700" height="100%" border="0" bordercolor="#AAAAAA" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table> </td> </tr> </table> </body> </html> というように作成しましたが、直接このページを見るなら問題はないのですが、違うリンクからこのページを見ると ■□□□■× ■□□□■× ×××××× というようになってしまいます。 ですが、更新ボタンを押すときちんと ■□□□■ ■□□□■ ■□□□■ と表示されます。更新ボタンを押さなくても正常に表示させる方法はありますでしょうか？ また、一番目のtableタグはwidthとheightとも100%なのでそれをなくした場合も試しましたが、 ■□□□■ ■□□□■ ■■■■■ と表示されます。 htmlはいろんなサイトを見ながら自己流でやってきたので、間違っている所もあるし、説明がわかりづらいかと思いますが、わかる方がいらっしゃれば教えて下さい。宜しくお願いします。 また、htmlの書き方等、良いわかりやすいサイトや本があればお教え下さい。(自分でもhtmlサイトはお気に入りに入れてますが、他にも良い所があるかもしれないので。)
- babyrose_x
- お礼率60% (24/40)
- HTML
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
同じソースで確認してみましたが、リンク先にしてみても画像の１のような現象は起こりませんでした。ブラウザ依存の問題なのでしょうか？ （ちなみに環境はMacOSX ブラウザはMozillaベースのFlockです） あと横レス失礼しますが <table> ：これは本来「表」として使うものであり、デザインに使うのは好まれないようです。しかし<div>だとCSSによる細かい設定が必要なので、初心者には簡単な<table>がよく使われるみたいです。 「表示はできる」けど「目的外の使用」なので、CSSなども使っていくのであれば、<div>を使った方が融通も利いていいと思います。 <!DOCTYPE～ ：これはHTMLがどのバージョンで書かれているか、を宣言するものです。なので<html>外の冒頭に書かれています。使用を推奨されているタグ、非推奨のタグなどに違いがあるのですが、主流のソースをコピペする程度の知識で大丈夫です。 ちなみに、自分も回答者No.2さんとほぼ同じソースになりました。 <html> <head> <style type="text/css"> <!-- body{font-size:12px;background-color:#FFCCCC;margin:0px;color:black;} div#test{font-size:12px;background-color:white;height:100%;width:700px;margin:0 auto;} --> </style> </head> 以下略 *参考になるサイト とほほの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ソースの文法チェック。 細かいところまで突っ込まれますが、 大まかなチェックは参考になると思います。
その他の回答 (4)
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
うわ恥ずかしい！ なんか間抜けな間違いを書いちゃいました。お恥ずかしい限りです。 誤：システム拡張子 正：システム識別子 です。謹んで訂正させていただきます。 PS ついでなので書き忘れたことをひとつ。 Web サイトの作成をするならば、できれば複数のブラウザで表示テストを行ってみた方が良いですよ？ 現在主流の４大レンダリングエンジン（Trident、Gecko、WebKit、Presto）、最低でもこの４つのレンダリングエンジンを搭載したブラウザでチェックしておけばほぼ安心です。 ・Trident → IE ・Gecko → Forefox ・WebKit → Safari や Google Chrome ・Presto → Opera
お礼
再びご回答ありがとうございました。 CSSは必要なのですね。 いろいろ難しくてあまり理解できていませんが、勉強していきます。 ありがとうございました！
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
＞私の表示させたい方法は皆さん普通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）
- ベストアンサー率54% (39/71)
何で table ？ div じゃ駄目なの？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- html { height:100% } body { height:100%;color:#000;margin:0;font-size:12px;background:#fcc } #parent { height:100%;width:700px;background:#fff;margin:0 auto } --> </style> </head> <body> <div id="parent"> ここにテキスト </div> </body> </html>
補足
ご回答ありがとうございます。 ＞何で table ？ 友達に教えてもらったり、独学でやってきたのでなぜかと聞かれましてもそのように表示できるからとしか答える事はできません。 ＞div じゃ駄目なの？ そのように表示できるのであれば駄目というわけではございません。 私の表示させたい方法は皆さん普通tableじゃなくdivを使っているのでしょうか？ まだまだ勉強不足でいまいちよくわかっていません。 あと、記載して頂いた <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> もわかりませんし、bodyの書き方も違うようですが、htmlの書き方は変わったのでしょうか？ 質問ばかりですみません。
- pasocom
- ベストアンサー率41% (3584/8637)
<body> <table> <tr> <td> <table> ・ここに</td></tr>は入らないのですか？ <tr> <td> </td>←ここの<td></td>はなんですか？。何も入っていないセルを作っている？。 </tr> </table> </td> </tr> </table>
お礼
ご回答ありがとうございます。
補足
＞・ここに</td></tr>は入らないのですか？ tableの中にtableをはさむので閉じるタグは下にあるのですが、本来はそこに入れるものなのですか？ 昔知り合いに教えてもらったやり方は書いた通りです。 ＞</td>←ここの<td></td>はなんですか？。何も入っていないセルを作っている？。 本来はそこにテキスト等が入りますがここに載せるので消しています。
お礼
詳しいご返答ありがとうございます。 私の環境はWindowsでIEです。Macでは正常に表示されるのですね。 <style type="text/css">とCSSを使ってたようですが、これもコピペしたもので、自分でCSSを使っている意識がありませんでした。 CSSはhtmlと一緒に使うものなのでしょうか？ CSSはまったくわからないのでCSSも勉強した方が良いのかもしれませんね。