- ベストアンサー
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>はなんですか？。何も入っていないセルを作っている？。 本来はそこにテキスト等が入りますがここに載せるので消しています。
関連するQ&A
- 入れ子にしたテーブルをheight100%にする
お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブル内のテーブルの高さを揃えたい。
CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?
- ベストアンサー
- HTML
- tableをcssで表記したい
下記のhtmlのスタイル部分をcssで表記したいのですが、 どのようにすればよいのでしょうか？ tableの種類が一つの場合はできるのですが・・・ ＜table width="100" border="1" cellpadding="1" cellspacing="1" bgcolor="#AAAAAA"＞ ＜tr＞ ＜td width="30" bgcolor="#FFFFFF"＞a＜/td＞ ＜td "＞b＜/td＞ ＜/tr＞ ＜/table＞ ＜br＞ ＜table width="50" border="2" cellpadding="2" cellspacing="2" bgcolor="#BBBBBB"＞ ＜tr＞ ＜td width="25" bgcolor="#CCCCCC"＞c＜/td＞ ＜td＞d＜/td＞ ＜/tr＞ ＜/table＞
- 締切済み
- HTML
- HTMLタグでテーブル枠を曲線で記述したい
添付画像は「オークションプレートメーカー２」のテンプレートで、少しアレンジしようと思っています。 最上部の角が丸くなっていますが、下記のどの部分にあたるのでしょうか? すみませんが教えてください。 <br><center> <table cellspacing=0 border=0 cellpadding=0 width=550> <tr> <td width=1></td> <td width=1></td> <td width=1></td> <td width=2></td> <td width=2></td> <td width=536></td> <td width=2></td> <td width=2></td> <td width=1></td> <td width=1></td> <td width=1></td> </tr> <tr> <td height=1 colspan=4></td> <td height=1 bgcolor=#FF6666></td> <td rowspan=5 bgcolor=#FF6666 align=center> <font color=#FFFFFF size=5><b> </b></font> </td> <td height=1 bgcolor=#FF6666></td> <td height=1 colspan=4></td> </tr> <tr> <td height=1 colspan=3></td> <td height=1 colspan=2 bgcolor=#FF6666></td> <td height=1 colspan=2 bgcolor=#FF6666></td> <td height=1 colspan=3></td> </tr> <tr> <td height=1 colspan=2></td> <td height=1 colspan=3 bgcolor=#FF6666></td> <td height=1 colspan=3 bgcolor=#FF6666></td> <td height=1 colspan=2></td> </tr> <tr> <td height=2></td> <td height=1 colspan=4 bgcolor=#FF6666></td> <td height=1 colspan=4 bgcolor=#FF6666></td> <td height=2></td> </tr> <tr> <td colspan=5 bgcolor=#FF6666><br><br></td> <td colspan=5 bgcolor=#FF6666><br><br></td> </tr> <tr> <td colspan=5 bgcolor=#FF6666></td> <td> <table width=100% cellspacing=5 border=0 cellpadding=10 bgcolor=#FFCC66> <tr> <td align=left bgcolor=#FFF0F0> <font color=#993333 size=3> </font> </td> </tr> </table> </td> <td colspan=5 bgcolor=#FF6666></td> </tr> <tr> <td height=7 colspan=11 bgcolor=#FF6666></td> </tr> <tr> <td height=2 colspan=11></td> </tr> <tr> <td height=2 colspan=11 bgcolor=#FF6666></td> </tr> </table> <br> <font color="#999999" size=1>+ + + この商品説明は</font> <a href="http://www.auclinks.com/" target="_blank"><font color="#666666" size=1>オークションプレートメーカー２</font></a> <font color="#999999" size=1>で作成しました + + +</font><font color="#FFFFFF" size=1><br>No.113.002.002</font><br> </center>
- ベストアンサー
- HTML
- テーブルについて
二つスライドが重なったようなテーブルを作りたいんですけど、一応、下記はそのように表示されたのですが、見え方で言うと、スライドの一枚目に文字を入れると、二枚目のスライドの形がずれてしまうのですがどうすればいいでしょう？ <TABLE width="636" cellspacing="0"> <TBODY> <TR> <TD bgcolor="#0080ff" colspan="3" rowspan="2"></TD> <TD width="20" height="20"></TD> </TR> <TR> <TD bgcolor="#97cbff" width="20"></TD> </TR> <TR> <TD height="20" width="20"></TD> <TD bgcolor="#97cbff" colspan="2" width="596"></TD> <TD bgcolor="#97cbff" width="20" height="20"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width=\"800\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" height=\"500\"> <tr bgcolor=\"#FFFF00\"> <td valigin=\"top\" valign=\"top\" colspan=\"4\" height=\"64\"> </tr> <tr> <td colspan=\"3\" height=\"2\"> </td> </tr> <tr> 【<td width=\"170\"> <table width=\"170\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"> <tr> <td> </td> </tr> </table>】 </td> <td width=\"238\" height=\"352\"> </td> <td width=\"197\"> </td> </tr> <tr> <td colspan=\"3\"> </td> </tr> </table>
- 締切済み
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width="800" border="1" cellspacing="0" cellpadding="0" height="500"> <tr bgcolor="#FFFF00"> <td valigin="top" valign="top" colspan="4" height="64"> </tr> <tr> <td colspan="3" height="2"> </td> </tr> <tr> 【<td width="170"> <table width="170" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table>】 </td> <td width="238" height="352"> </td> <td width="197"> </td> </tr> <tr> <td colspan="3"> </td> </tr> </table>
- ベストアンサー
- HTML
- テーブルの作り方をご教示ください
図のようなテーブルを作りたいのですがどうすればいいのかわかりません。 図はエクセルで書きました。 ----------------------------------------------- <table border=0 cellspacing=0 cellpadding=0> <tr> <td> <table border=0 bgcolor="#000000" cellspacing=1 cellpadding=1 width="230"> <tr bgcolor="#FFFFFF"> <td> １ </td> </tr> <tr bgcolor="#FFFFFF"> <td> ２ </td> <tr bgcolor="#FFFFFF"> <td> ３ </td> </table> </td> </tr> </table> ----------------------------------------------- まではわかったのですが、 3と4を区切る方法がわかりません。 ご回答よろしくお願いします。
- ベストアンサー
- HTML
- HTMLでテーブルを縦に並べたい！
基本的な質問でお恥ずかしいのですが、困っています。 テーブルを二つ、縦に並べたいのですが、何故か横に並んでしまいます。 どこが悪いのでしょうか？初心者ですみません…お知恵をお貸しください(T_T)。 <caption><font color="#ff0000">●</font>A <font color="#0000ff">●</font>B</font></caption> <table bgcolor="#80ffff" border="1"cellspacing="0" bordercolor="#0000ff" align="left"> <tr><th width="30"><font size="+5"><font color="#ff0000">●</font></th> <th width="150"> <font size="+4"><strong><big>C</big></strong></font></th> <td><font size="+2">D<br>E</font></td></tr> <tr><td></td><td><div align="center"> <font size="4" color="#8080ff"> 準備中</font></div></td><td></td></tr></table> </p></div> <p></p> <table align="center" bgcolor="#80ffff" height="20" width="250" border="1" cellspacing="2" cellpadding="0"> <tr><td><blink>HOME</blink></td></tr> </table> </body>
- ベストアンサー
- HTML
- テーブル内にスペースができてしまうのはなぜ？
テーブル内にさらにテーブルを入れた際、一部のセルだけ上部にスペースが空いてしまい 困っています。 下記のhtmlですが、左はテーブル内にテーブルを入れてもスペースができませんが 真ん中だけどうしても上にスペースが空いてしまいます。 全角スペースが隠れていないか確認しましたが無理でした。 ネットでもいろいろ調べましたが分かりませんでした・・・。 これは何が原因なのでしょうか？ よろしくお願いします。 --------------------------------------------------------- <html> <head> </head> <body> <table border="1" width="750"> <tr><td width="150" valign="top"> <table border="1" cellspacing="0" cellpadding="0" width="140"> <tr align="center"><td bgcolor="#green">menu</td></tr> </table> </td> <td valign="top" width="480"> <table border="1" cellspacing="5" cellpadding="0" width="480"> <tr><td bgcolor="#d8de97" height="15" align="left" colspan="2">見出し</td></tr> <tr><td bgcolor="#FFFFCC" width="240">項目名</td> <td bgcolor="#FFFFCC" width="240">項目名</td></tr> <tr><td bgcolor="#FFFFCC" width="240">項目名</td> <td bgcolor="#FFFFCC" width="240">項目名</td></tr> </table> </td> <td width="120" valign="top">広告部分</td></tr> </table> </body> </html>
- ベストアンサー
- HTML
お礼
詳しいご返答ありがとうございます。 私の環境はWindowsでIEです。Macでは正常に表示されるのですね。 <style type="text/css">とCSSを使ってたようですが、これもコピペしたもので、自分でCSSを使っている意識がありませんでした。 CSSはhtmlと一緒に使うものなのでしょうか？ CSSはまったくわからないのでCSSも勉強した方が良いのかもしれませんね。