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サイトはお気に入りに入れてますが、他にも良い所があるかもしれないので。)
No.1
- 回答日時:
<body>
<table>
<tr>
<td>
<table>
・ここに</td></tr>は入らないのですか?
<tr>
<td>
</td>←ここの<td></td>はなんですか?。何も入っていないセルを作っている?。
</tr>
</table>
</td>
</tr>
</table>
この回答への補足
>・ここに</td></tr>は入らないのですか?
tableの中にtableをはさむので閉じるタグは下にあるのですが、本来はそこに入れるものなのですか?
昔知り合いに教えてもらったやり方は書いた通りです。
></td>←ここの<td></td>はなんですか?。何も入っていないセルを作っている?。
本来はそこにテキスト等が入りますがここに載せるので消しています。
No.2
- 回答日時:
何で 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の書き方は変わったのでしょうか?
質問ばかりですみません。
No.3ベストアンサー
- 回答日時:
同じソースで確認してみましたが、リンク先にしてみても画像の1のような現象は起こりませんでした。
ブラウザ依存の問題なのでしょうか?(ちなみに環境は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ソースの文法チェック。
細かいところまで突っ込まれますが、
大まかなチェックは参考になると思います。
詳しいご返答ありがとうございます。
私の環境はWindowsでIEです。Macでは正常に表示されるのですね。
<style type="text/css">とCSSを使ってたようですが、これもコピペしたもので、自分でCSSを使っている意識がありませんでした。
CSSはhtmlと一緒に使うものなのでしょうか?
CSSはまったくわからないのでCSSも勉強した方が良いのかもしれませんね。
No.4
- 回答日時:
>私の表示させたい方法は皆さん普通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 の基礎を学ぶのに適していますので、一度目を通しておくと良いとおもいますよ。
No.5
- 回答日時:
うわ恥ずかしい!
なんか間抜けな間違いを書いちゃいました。お恥ずかしい限りです。
誤:システム拡張子
正:システム識別子
です。謹んで訂正させていただきます。
PS
ついでなので書き忘れたことをひとつ。
Web サイトの作成をするならば、できれば複数のブラウザで表示テストを行ってみた方が良いですよ?
現在主流の4大レンダリングエンジン(Trident、Gecko、WebKit、Presto)、最低でもこの4つのレンダリングエンジンを搭載したブラウザでチェックしておけばほぼ安心です。
・Trident → IE
・Gecko → Forefox
・WebKit → Safari や Google Chrome
・Presto → Opera
再びご回答ありがとうございました。
CSSは必要なのですね。
いろいろ難しくてあまり理解できていませんが、勉強していきます。
ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSで特定のテーブルだけに...
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
HTML フォントの指定
-
テーブル内のセル間にスペース...
-
同じ幅指定のつもりなのに、ブ...
-
ホームページのテキストを折り...
-
HTML tableのセルにtextareaを...
-
アンカータグ内の文字の色を変...
-
(HTML)Tableを任意の位置に置...
-
ホームページの表と画像の間の...
-
テーブルタグの中にdivを含めて...
-
html でのテキスト結合について
-
tableにul,または,olを入れられ...
-
tableタグとformタグの組み合わせ
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
テーブルタグの横に文章が入ら...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
table表を横に並べる際の間隔指定
-
同じ幅指定のつもりなのに、ブ...
-
tableのcellpadding="0" cellsp...
-
html5のテーブル内でdivのタブ...
-
<fieldset>タグについて
-
textareaの外側の文字が下付き...
-
テーブル内のセル間にスペース...
-
画面幅に合わせてテーブルのカ...
-
HTMLのテーブルをExcelにCopy&P...
-
テーブルデータを折り返して表...
-
ホームページのテキストを折り...
-
フォームタグのプルタウンの隙...
-
HTML tableのセルにtextareaを...
-
table 幅固定で、端までいった...
-
(HTML)Tableを任意の位置に置...
おすすめ情報