• 締切済み

テーブルの大きさが変わらない方法を教えて下さい

noname#25358の回答

noname#25358
noname#25358
回答No.1

 基本的には、お書きになっている方法でやるしかないです。  なぜなら、幅を広げる、広げない、といったことはブラウザ側の問題であり、製作者側がコントロールできることではないからです。  ただしこの場合だと、heightオプションを削除すると、文字が増えたときにブラウザは優先的に縦の大きさを改変して対応しますので、横への広がりを抑えることができます。  あと、HTMLを組む場合、もともとHTMLという言語自体が「レイアウトを整えるためのものではない」ことを意識する必要があります。  HTMLは本来は、「文字に色などを修飾して見やすくする」ためのものですので、「文字が正しく表示される」ことをブラウザはもっとも優先します。  これはつまり、文字が見にくくなれば、ブラウザは容赦なく製作者の作ったデザインを勝手に崩してしまうということです。  デザインにこだわって作る場合は、そこまで考えないと、おかしくなってしまいます。

yuuhi
質問者

お礼

幅を広げる、広げないなどのレイアウトはブラウザ側の問題なのですかー。 まったく知りませんでした。 色々と勉強になりました。 回答ありがとうございました。

関連するQ&A

  • テーブルの大きさを揃えたい

    各ページの大きさ=高さが揃わないのですが原因がわかりません。 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>

  • テーブルの位置

    最初からテーブルを一番上に持ってくるにはどうしたら良いですか?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
  • テーブル枠と文字

    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
  • テーブルレイアウト

    テーブルレイアウトで困っています。 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100%</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> これだと問題なく表示されるのですが、 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100% 少し長い文章を入れる</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> このように1列目のセルに長い文章を入れると、2列目の左のセルの幅が勝手に広がってしまいます。 何が原因で、対処法はないでしょうか? Netscape7.1ではこうならないんですが、IE6では勝手に崩れてしまいます。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 入れ子にしたテーブルを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
  • テーブルの隙間をなくす

    テーブルの中に作ったテーブルを一番上に配置したいのですが、どうすれば良いでしょうか?テーブルの下で改行すると上に行くのですが、それだとしたがあまります。 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
  • htmlを使って表を作っています

    自分でつくった表だとどうしてかうまくいきません。何がいけないのでしょうか?わからないところをまた自分で見つけて修正するのでポイントとソースを書いていただけませんか? 練習問題と自分が作ったソース載せます。 <html> <h4><b>1問<b></h4> <table border="1"width="400"height="400"> <tr><td background="1_4.jpg"width="200">1_4.jpg</td><td></td></tr> </table> <table border="1"width="400"height="400"> <tr><td>aaaa</td><td>aaaa</td></tr> </table> <h4><b>2問<b></h4> <table border="1"width="50"height="50"> <tr bgcolor="#ff0000"><td></tr></td> </table> <h4><b>3問<b></h4> <table border="1"width="150"height="100"> <tr bgcolor="#0000ff"><td></td><td></td><td></td></tr></table> <table border="1"width="150"height="100"> <tr colspan="3"><td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td> </tr> </table> <h4><b>4問<b></h4> <table border="1"width="100"height="100"> <tr><td bgcolor="#00ff00"></td><td></td></tr></table> <table border="1"width="100"height="100"> <tr><td></td><td></td></tr></table> </html> 課題1_7-2 覚えるタグ ・<td background="★">~</td> ★には画像ファイル名(URL)を入れます。 <td>タグのbackground属性でセルの背景に画像を 貼り込むことができます。 画像の大きさがセルよりも小さい場合は繰り返して タイル状に並べられます。 それでは早速つくってみましょう。 <第一問:幅400、高さ400、上のセルの数が2つ、下のセルの数が2つの テーブルを作り、左上のセルに1_4.jpgを背景に貼り込んでみましょう。> どうですか?うまく表示されましたか? レイアウトをしていく上で大切なタグになっていくので頑張って作ってみましょう。 背景に指定できるのは画像だけではありません。 文字のように、色を指定することもできます。 覚えるタグ ・<table bgcolor="★">~</table> ・<tr bgcolor="★">~</tr> ・<td bgcolor="★">~</td> ★には色指定値(例:#ff0000)が入ります。 bgcolor属性でテーブルの背景色を設定します。 <table>タグに指定した場合はそのテーブル全体に、 <tr>タグに指定した場合はその横一列(一行)に色がつきます。 <td>タグに指定した場合はそのセルにのみ色がつきます。 それでは実際に作ってみましょう。 <第二問:幅50、高さ50、1つのセルのテーブル全体の背景を赤くしてみましょう。      赤→#ff0000> <第三問:幅150、高さ100、上のセルを3つ、下のセルを3つのテーブルを作り、      上3つのセルの背景を青くしてみましょう。      青→#0000ff> <第四問:幅100、高さ100、上のセルを2つ、下のセルを2つのテーブルを作り、      左上のセルの背景を緑にしてみましょう。      緑→自分で見つけて下さい>

  • テーブル高さ指定タグについて

    テーブル高さ指定タグについて サイズがバラバラの4枚の画像をテーブルを使って同じ幅・高さ縦横各2枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか?

    • ベストアンサー
    • HTML
  • IEでのテーブル幅

    質問させて下さい。 テーブルのソースが以下のようになっています。 <table width="450" height="300" border="1" cellpadding="10" cellspacing="0" bordercolor="#333333"> <tr> <td width="225" height="150" align="left" valign="top">あああああああああああああああああああああああ</td> <td width="225" height="300" rowspan="2" background="haikei.jpg">&nbsp;</td> </tr> <tr> <td width="225" height="150" align="left" valign="top">いいいいいいいいいいいいいいいいいいいいいい</td> </tr> </table> このときに、ファイアーフォックス3での表示と、IE8での表示に 違いが大きいんです。(IEの表示の方が縦が長くなります) このままだと右側の背景画像の高さと左のテキストの高さが あいません・・・それぞれのテーブル幅などの指定はきちんと しているつもりなのですが、どうすれば良いのでしょう。 CSSの利用はなしとして、どなたか教えて頂けないでしょうか。

    • ベストアンサー
    • HTML