• 締切済み

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

<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> 上記のようにテーブルの大きさと列幅を指定しても、 文字数が大きくなると表全体の大きさと列幅が変わってしまいます。 表の中に入るテキスト(文字数)の大きさで列幅、テーブルの大きさが 変わらないようにする方法を教えて下さい。

みんなの回答

  • chanpu
  • ベストアンサー率42% (61/144)
回答No.3

こんにちは。 私はもうしかたがないので、<td>ごとに<font size="~>で小さめの文字を指定して、セル内に収まるようにしています。 いやめんどいです、ほんとに(涙)。 で、それでもどうしても無理な場合は、deagleさんのおっしゃるとおりheight指定を捨ててます(笑)。 ARCさんもおっしゃっているスタイルシートが、全ブラウザでいければ、テーブルに限らずホント楽なんですけどねーー…(汗/笑)。 今のところ無効なブラウザのほうが多いので、私は多用してません…(涙)。

yuuhi
質問者

お礼

そうなのですよー(涙)。 フォントのサイズがかなり小さくなってしまうのです・・・。 みなさんの回答を参考に頑張ってみたいと思います。 ありがとうございました。 また何かありましたら宜しくお願いします。

すると、全ての回答が全文表示されます。
  • ARC
  • ベストアンサー率46% (643/1383)
回答No.2

かなりブラウザを選びますが、スタイルシートを使えば可能です。 <table>タグに、style="table-layout:fixed" を指定します。 今のところ、Windows版のIE5 ,IE5.5 及び、Netscape6でのみ使用可能です。 同じIE5でも、Mac版は非対応らしいです。 こんな感じです。 <table border="1" width="400px" style="table-layout:fixed"> <caption align="left">固定幅の表</caption> <tr> <td width="50px">長い文章12345678901234567890</td> <td width="350px">文章</td> </tr> </table>

yuuhi
質問者

お礼

スタイルシートはあまり使ったことないのですが 色々ためしてみたいと思います。 ARCさん回答ありがとうございました。

すると、全ての回答が全文表示されます。
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
このQ&Aのポイント
  • Thunderbolt 4 ドックのDPポートにDP→HDMIの変換ケーブルを接続してHDMIモニタを使いたい。問題なく認識して画面は表示されるでしょうか。
  • ThinkPad T14s Gen 4のThunderbolt 4 ドックでDP→HDMIの変換ケーブルを使ってHDMIモニタを接続したいが、正常に認識されるか不安。
  • Thunderbolt 4 ドックのDPポートにDP→HDMIの変換ケーブルを繋げてHDMIモニタを使用したいが、表示に問題はないか心配。
回答を見る

専門家に質問してみよう