• ベストアンサー

テーブル枠と文字

DreamWeaverでHP作成中です。 たびたび質問させていただいていますが、テーブルの大きさがどうしても合いません。 【A】<table width="100%" height="100%">という大きなテーブルの中に 3つ入れ子しています。   <tr><td>   【1】<table width="710" height="55">   【2】<table width="710" height="15">   【3】<table width="710" height="400"> </td></tr></table> これをベースに、【1】【2】のテーブルにはボタンを入れ、各ページにリンクさせています。 【3】のテーブルにインラインフレームを入れて、各ページ枠組と背景は同じのものを作っています。 【3】のインラインフレームを外しFlashファイルをはめこんだりすると、他のページと枠の大きさが変わってくるのですが、理由がわかりません。 もしかして、テーブルの枠自体に高さや幅があるのでしょうか。 例えば<table border="0">としていても、少し高さがあったりするために、全体の大きさが微妙に変わってしまう等。 もしくは、<td height="5">と設定しているのに、文字の大きさがそれ以上の高さを持っているため等。 文字の大きさはブラウザの設定等にも依存するのでしょうが、大体高さはどのくらいに設定すればよいのでしょうか。 それから、例えば【3】<table height="400">の中が<table height="380">と<table height="15">の2つだとするとまた大きさが変わってしまうのでしょうか。 とんちんかんなことを言っていますが、教えてくださいー。

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • mat-21
  • ベストアンサー率56% (91/162)
回答No.2

まず、考えることは、 <table border=0>としても、テーブル自体に枠があるため、見えないですけど、borderに隙間が生じます。正確なサイズにしたい場合は、 <table border=0 cellspacing=0 cellpadding=0 width=100%> と入れると正確です。ですが、例えば、入れ子になっているテーブル指定で、 <table border=0 cellspacing=0 cellpadding=0 width=600> <tr> <td> <table border=0 cellspacing=0 cellpadding=0 width=700> <tr> <td>~</td> </tr> </table> </td> </tr> </table> とすると、一番外にあるテーブルの指定を600pxとしているけれど、700pxまで伸びてしまいます。 ちなみに、<table height=xxx ~>は、ブラウザバージョンによって認識されない場合があります。特にWindowsでは.....。 どうしても、正確にテーブル等のサイズを固定したい場合は、スタイルシートを使用しましょう。 <head> ~ <style type="text/css"> <!-- .size01{width:710px;height:55;} .size02{width:710px;height:15;} .size03{width:710px;height:400;} //--> </style> </head> <body marginwidth=0 marginheight=0> <table border=0 cellspacing=0 cellpadding=0 width=100%> <tr valign=top> <td> <table border=0 cellspacing=0 cellpadding=0 class="size01"> <tr><td>~</td></tr> </table> <table border=0 cellspacing=0 cellpadding=0 class="size02"> <tr><td>~</td></tr> </table> <table border=0 cellspacing=0 cellpadding=0 class="size03"> <tr><td>~</td></tr> </table> </td> </tr> </table> </body> ~ となります。 ちなみにスタイルシートを使えばテーブルを入れ子にしなくていいですけどね。(^^;)

tapchibo
質問者

お礼

ありがとうございます! 会社で作成中なので土日見られずお礼が遅くなりました。 とても分かりやすい説明で感謝しています。 ただ、試行錯誤の末たどりついたインラインフレームやら何やらが、 結局まったく違うスタイルシートで解決されるとは。 自分の無知さと、岐路に立った時に間違った方角を選んでしまった運の悪さにがっかりです・・・。 でもこれに懲りずに頑張るぞー!と思っています。 本当にありがとうございました!!!

その他の回答 (1)

noname#9692
noname#9692
回答No.1

>3】のインラインフレームを外しFlashファイルをはめこんだりすると、他のページと枠の大きさが変わってくるのですが、理由がわかりません。 他のページというのはどのページですか?同じレイアウトのページが数ページあるのでしょうか? FLASHのファイルサイズ(widthとheight)はその枠の大きさと合っていますか?(またはそれ以下に設定していますか? >例えば【3】<table height="400">の中が<table height="380">と<table height="15">の2つだとするとまた大きさが変わってしまうのでしょうか。 380+15で、395なのでheight="400"とは大きさが変わると思いますよ。380+20で、cellspacingとcellpaddingとborderがすべて"0"なら同じになると思います。 私もとんちんかんなことを答えてるかもしれませんが、また補足などありましたら宜しくお願いします。

tapchibo
質問者

お礼

素早いご回答をありがとうございました! 土日見られず、お返事が遅くなり申し訳ございません。 >他のページというのはどのページですか?同じレイアウトのページが数ページあるのでしょうか? そうなんです。 >FLASHのファイルサイズ(widthとheight)はその枠の大きさと合っていますか?(またはそれ以下に設定していますか? それ以下に設定しているつもりです。 やはりテーブルの中身は外の設定と揃えなければならないのですね。 こんな基本も分からず恥ずかしいですが、教えてくださってありがとうございます。

関連するQ&A

  • テーブルの枠の設定について

    DreamweaverでHP作成中です。 テーブルの高さや幅がバラバラになってしまったので もし一括してそろえられるならその方法が知りたいです。 かなりとんちんかんなことを言っていると思う のですが、どなたか教えていただけませんでしょうか? 1.例えば 3列2行のテーブルの中で、<td width="180" height="10"> のように設定していても、そこに<img src="img/logo.gif" width="185" height="30">をはめると幅や高さはgifの方に合わせられるのでしょうか。 2.<table width="710" border="1" height="400">の枠の中に、 <td valign="top" width="700" height="400" class="background"> のスタイルシートを背景に設定し、 <table width="685" border="0" height="10">の文字を打ち込むためのテーブルをはめ、その下に <tr valign="bottom"> <td colspan="2" valign="top" height="2" width="710" class="background"> <div align="right"><font size="-1">Copyright ○○. All rightsreserved.</font></div> </td> </tr> などを加えると、高さはどこを見れば分かるのでしょうか。 3.一つベースのページを作ってそれをテンプレートにし、文字や画像をはめ込んでいく予定です。 トップページのみFlashを使っていて、Enterで統一させたベースのページへリンクさせたいですのですが、 すでにトップとベースの枠のの大きさがずれています。 ベースにボタンなどを加えたり、トップには別の行があったりするせいで、高さと幅が狂っているのです(泣) 4.画面いっぱいを使わず、真中にwidth="710"height="500"くらいの枠を作って、画面表示が拡大縮小されても真中に表示させたいです。 どうぞ宜しくお願いします。

  • テーブルの位置

    最初からテーブルを一番上に持ってくるにはどうしたら良いですか?CSSで設定するのでしょうか? 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <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>

  • テーブルの位置

    最初からテーブルを一番上に持ってくるにはどうしたら良いですか?CSSで設定するのでしょうか? 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <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
  • テーブルの大きさを揃えたい

    各ページの大きさ=高さが揃わないのですが原因がわかりません。 1.文字の高さが指定した高さより大きい?(普通の文字の高さは決まっているのでしょうか。) 2.入れ子にしているテーブルで2行の所が指定した高さより大きい? 3.CSSスタイルの背景の高さが関係している? 4.全体の大きさがずれている? 参考にHTML(高さのみ)抜き出しますので教えていただけませんか。 【ページ1】 <table width="700" height="55" border="0"> <tr> <td><img.gif height="40"> welcome homepage(見た目は2行)</td> <td> </td> <td align="right" valign="bottom"> <img.gif" height="20" ></td></tr></table> <table height="15"></table> <table height="430"> <tr><td height="375"><flash.swf height="360"></td></tr> <tr><td height="25"></td></tr> <tr><td height="15"></td></tr></table> 【ページ2】 <table width="700" height="55" border="0"> <tr> <td height="40"> <img.gif height="40"></td> <td height="40"> </td> <td height="40"></td></tr> <tr><meta http-equiv="Content-Style-Type" content="text/css"> <td height="15"> welcome homepage </td> <td height="15"></td> <td align="right" height="15">|HOME|MAP|MAIL|</td></tr></table> <table height="15"></table> <table height="430"> <tr><td> <table height="10"> <tr><td height="15"></td></tr> <tr><td><IFRAME height="380"></IFRAME></td></tr> </table></td></tr> <tr><td height="15"></td></tr></table>

  • TABLE内のTABLEのHEIGHT属性が利かない

    TABLEの中にTABLEを入れ子にしてHTMLを作ったのですが、 外のTABLEのHEIGHTを変動にして、内のTABLEのHEIGHTを100%にしてもHEIGHTがくっつきません。 検証したところ、IE5.0(Mac)は利くようですが、IE5.5(Win)は100%が利きません。 そういう仕様なのでしょうか?しょうがないのでしょうか? それともCSSで解決できるものでしょうか? ご存じの方いらっしゃいましたらご教授ください。 参考に、ソースをご覧ください。 <HTML> <HEAD> <TITLE>SAMPLE</TITLE> </HEAD> <BODY> <TABLE WIDTH="600" HEIGHT="600"> <TR> <TD> <TABLE WIDTH="500" HEIGHT="100%"> <TR> <TD>SAMPLE</TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • テーブルの大きさが変わらない方法を教えて下さい

    <TABLE BORDER="1" width="700"> <TR> <td width="380" height="30">ここの文字数</td> <td width="40" height="30"></td> <td width="40" height="30"></td> <td width="40" height="30"></td> <td width="200" height="30"></td> </TR> </TABLE> 上記のようにテーブルの大きさと列幅を指定しても、 文字数が大きくなると表全体の大きさと列幅が変わってしまいます。 表の中に入るテキスト(文字数)の大きさで列幅、テーブルの大きさが 変わらないようにする方法を教えて下さい。

  • テーブルの隙間をなくす

    テーブルの中に作ったテーブルを一番上に配置したいのですが、どうすれば良いでしょうか?テーブルの下で改行すると上に行くのですが、それだとしたがあまります。 HTMLはこれです。よろしくお願いします。 <table width="800" border="0" cellspacing="0" cellpadding="0" height="600"> <tr> <td> <TABLE width="100%"> <TBODY> <TR> <TD width="241" height="2">  </TD> <TD width="511" align="right" valign="bottom" style="font-size : 8pt;" height="2"> </TD> </TR> </TBODY> </TABLE> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • tableの中にtableを作ると、width指定が機能しない

    tableの中にtableを作り、中側にあるテーブルの列ごとにwidthを指定したいのですが、うまくいきません。ソースを書いてみます。 例: <table width=300> <tr><td> <table width=100> <tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><tr> </table> </td><td> <table width=100> <tr><td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td><tr> </table> </td><td> <table width=100> <tr><td>ccccccccccccccccccccccccccccccccccc</td><tr> </table> </td></tr> </table> width=300のテーブルの中にwidth=100のテーブルが3つできたのはいいのですが、width=100のテーブルの中に100pxを超える文字列を入れると100pxという値を無視してテーブルが横長くなってしまいます。 これを100pxという値に従わせるにはどうしたらいいでしょうか?

    • ベストアンサー
    • HTML
  • cssで、テーブルのtdの中の文字を左右に分けたい

    テーブルの入れ子をせずに<span>などをつかって、 文字を左右に配置する事はできるのでしょうか? <table width="200"> <tr><td> 左右 </td><tr> </table>  ↓↓↓こんな感じに ---------------- |左     右| ---------------- よろしくお願いします

    • ベストアンサー
    • HTML
  • テーブルの枠の中にテーブルを設置

    TOPページに下記のような大きな4等分の枠なしテーブルを作り、中にテーブルを埋め込みたいと思っています。 <TABLE border="0" width="700" height="500"> <TR> <TD>●1</TD> <td>●2</td></TR> <TR> <TD align="left" valign="bottom">◎1</TD> <td align="center" valign="middle"> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="8" cellspacing="0" bgcolor="greenyellow"><tr><td align="center"> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="4" cellspacing="0" bgcolor="#ccff99"><tr><td align="center"><font color="mediumseagreen">★ ★ ★</font> おしらせ <font color="mediumseagreen">★ ★ ★</font></td></tr> <tr><td bgcolor="white"> <textarea cols="28" rows="5"> ここに文字 </textarea> </td></tr></table> <br> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="3" cellspacing="0" bgcolor="white"><tr><td bgcolor="white"> 最終更新 ≫ </td></tr></table> </td></tr></table> </TR> </TABLE> (HEADの間にスタイルシートを挿入します。) このように書くとテーブルを入れた場所の親テーブルが大きく広がってしまいます。 広がらずにテーブルを形成する方法をご教授下さい。 初心者で申し訳ございません。

    • ベストアンサー
    • HTML