• 締切済み

TABLEタグの幅指定

テーブルの幅を厳密に指定したいのですが、 例えば以下のような1行2列のテーブルがあるとき、 <TABLE CELLSPACING=1 CELLPADDING=4 BORDER=0> <TR> <TD WIDTH=100>***</TD> <TD WIDTH=100>***</TD> </TR> </TABLE> このような場合にテーブルタグにWIDTH属性を加えるとすると、 100*2+4*4+1*3=219で、WIDTH=219が正確な値なのでしょうか? よろしくお願いします。

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

みんなの回答

  • Kizz
  • ベストアンサー率47% (30/63)
回答No.4

はじめまして。 ◇border/cellspacing/cellpaddingの考え  100*2+4*4+1*3  →これは、あっています。   cellpaddingはセル内上下左右の空きであり、cellspacing罫線内スペース   で、まー罫線幅と思っていいもので、2列なら3本あることになります。  ●ただし、219ピクセル絶対かというとちょっと分かりません^^;   また、1ピクセルの見た目の大きさが、IEとNetscape、またプラット   (Windows/Mac)によって異なります。 ◇<td>でのwidthの指定  <td>のwidthは指定がない場合は、<td>内パーツの幅から算出されて自動的に  その大きさになります。  つまり、<td>内で<img>のwidth="100"のみを置いているのであれば、<td>にて  width="100"を指定しても、しなくても同じ表示状態になります。 備考)  Netscapeの<table>では基本的に全<td>にてwidthを指定するようにした方が  よいです(書き癖とする)。  IEの場合、<table>でwidth指定をし、例えば2列のテーブルを書いた場合、  <td>1つに値を設定した場合は、<table>のwidthからのその<td>widthを引いた  値が、もうひとつの<td>のwidthに自動的に設定(表示)されます。  しかし、Netscapeの場合はそのような融通は利かずNetscapeの解釈の元に各  <td>の幅設定がされてしまいます。  なお、<table>や<td>のwidthを設定した上で、その中のパーツがそのwidthを  超した場合は、ブラウザの解釈により妥当なwidthが設定(表示)されます。    これはサンプルを作ってみて試して見るとおもしろいと思いますよ。 頑張ってくださいね。

harisun
質問者

補足

書き込みありがとうございます。 教えていただいたこと、よくわかりました。 それからいろいろ試してみたのですが、 tdに100x100の画像を入れてみたところ、 IEの場合、tdのheight属性はtd内のパーツプラスcellpaddingの幅みたいです。 つまり、cellpaddingが4とすると、height=108となるようです。 widthとheightの値が違っているのがどうも腑に落ちないのですが・・・。 Netscapeの場合はwidth,heightとも100のようです。 詳細をご存知でしたら、また書き込んでいただければ幸いです。

  • denca
  • ベストアンサー率32% (17/52)
回答No.3

ディスプレーの幅、IEであればエクスプローラーバーの表示、非表示によって有効画面幅がユーザーの環境によって逐一変わるほか、ブラウザの解釈にも差がありますので、TABLE幅を完全に固定することはなかなか難しいようです。条件次第ではWIDTHを指定してもそれ以下の幅で表示されることがあります。また、<NOBR>も効かずに改行されてしまうことがあります。 邪道かもしれませんが、各列に背景と近い色のダミーの画像をサイズを絶対値(ピクセル)で指定して貼ればその列は画像幅以下にはなりません。それでもたとえばテキストの大きさを「最大」にされてしまえば幅が画像よりも広がってしまう可能性がありますので、スタイルシートで文字のサイズを固定すればよいかと思います。 ちょっと自信がありませんが、ご参考になればと思います。

harisun
質問者

お礼

ご回答ありがとうございます。 テーブル幅を完全に制御するのは難しいことなのですね。 画像のスペーサを入れるのはそのためなんですね。

  • sesame
  • ベストアンサー率49% (1127/2292)
回答No.2

>>実際やってみるともっと幅が伸びる気がするのです。 テーブルの内容(テキスト、画像)が、セル幅に収まりきらない量なので伸びてしまっているのでは? テーブル幅は セル内容→セル幅指定→テーブル幅指定 の順で優先されます。

harisun
質問者

補足

またの書き込みありがとうございます。 おっしゃる状態にはなっていないです。 質問の仕方を少し変えさせていただきますと、 <table cellspacing=1 cellpadding=4 border=0> <tr> <td bgcolor=#cccccc><img src="img.gif" width=100 height=100></td> <td bgcolor=#cccccc><img src="img.gif" width=100 height=100></td> </tr> </table> セルに100x100の画像を入れるとします。 このとき、tdタグにあえてwidth属性を指定するときはいくつにすればいいのですか?

  • sesame
  • ベストアンサー率49% (1127/2292)
回答No.1

CELLPADDINGはセル枠とセル内容との余白だから、セル幅に含まれるでしょう。 だから4は足されません。 100*2+1*3=203 になるはず。

harisun
質問者

補足

ご回答ありがとうございます。 わたしも最初そう思っていたのですが、 実際やってみるともっと幅が伸びる気がするのです。

関連するQ&A

  • table の幅を固定したい

    初心者です。教えて頂けますか? テーブル内に、php pear mdb2 を利用して文字列を入れているのですが、 文字列が長いのですが、シングルバイト文字とマルチバイト文字で挙動が異なっています。 指定している幅で固定したいのですが どうすれば良いでしょうか? 申し訳ありません。よろしくおねがいします。 <table width="380" border="1" cellspacing="0" cellpadding="0"> <tr> <td> あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。... </td> </tr> </table> <table width="380" border="1" cellspacing="0" cellpadding="0"> <tr> <td> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy... </td> </tr> </table>

    • ベストアンサー
    • HTML
  • テーブルサイズ指定

    こんにちは。 困ったことがあるのですが、 <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170文字</TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TR></TBODY></TABLE> <BR> <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170>文字</FONT></TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TBODY></TABLE> (それぞれの文字の長さは違います。) という2つのテーブルで、 2つともテーブルの幅が異なるんです。 これを、両方とも同じ幅にすることはできないでしょうか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • テーブル高さ指定タグについて

    テーブル高さ指定タグについて サイズがバラバラの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
  • ホームページのテーブルをWordに貼り付けると左にづれる?

    以下のコードのHTMLで作られたテーブルをブラウザーに表示→コピー→Wordに貼り付けると、テーブルがWordの文字列開始位置よりも左側にづれてペーストされるのですが、どのようにして回避できるのでしょうか? コード: <table width="550" border="1" cellspacing="0" cellpadding="40"> <tr> <td width="466" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="118"> 表見出し行 </td> <td width="266"> データ </td> </tr> </table> どうやら、テーブルのcellpaddingが関係しているようで、cellpaddingの値を以下のコードのように小さくすると、テーブルをWordに貼り付けたときに文字列開始位置よりも左にずれる割合は小さくなります。 コード: <table width="550" border="1" cellspacing="0" cellpadding="5"> <tr> <td width="536" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="188"> 表見出し行 </td> <td width="336"> データ </td> </tr> </table> ただ、それでも少し左にずれることには変わりませんし、cellpaddingの値が大きなテーブルをWordに貼り付けるときの回避策とはなりません。 どのようにしたら、cellpaddingの値が0ではないホームページのテーブルをブラウザーからコピーしWordに貼り付けたとき、Wordの文字列開始位置より左にずれないようにできるのでしょうか? よろしくお願いします。

  • テーブル内文字列がテーブル幅を超えたとき

    超えた部分の文字を表示しないで テーブル幅の範囲で表示できる部分だけ表示することはできるのでしょうか? 例えば <table border='1' width='100%' CELLPADDING='0' CELLSPACING='0'><tr><td>abc...z</td></tr></table> の abc...z の部分がテーブル幅より長いときには超えた部分はなかったものとして表示するのです

    • ベストアンサー
    • HTML
  • テーブルで中央に指定したい

    1行1列の横100% 縦100%に指定したテーブルを1つ そのテーブルの中に1行1列の横100px 縦100pxが1つ このようにした場合、中に入れたテーブルはどの解像度でも画面の中心にくるはずです。 しかし、IE6で確認すると横の中央にはくるのですが縦の中央にはきません。 しかしネスケ4.7ではイメージ通りになっています。 なぜでしょうか? [ソース参考] <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table width="100" height="100" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0033CC"> <tr> <td width="100" height="100"><center> <font color="#FFFFFF"><strong>中央</strong></font> </center></td> </tr> </table> </td> </tr> </table>

  • テーブルがWindowの範囲を超えないように

    print "<table border='1' width='100%' CELLPADDING='0' CELLSPACING='0'><tr><td>$str</td></tr></table>"; としたのですが文字列$strが長いとテーブルの幅がWindowの幅を超えて水平スクロールバーが出てしまいます どうしたらテーブルの幅が変わらないでテーブル内の文字列が長いときには自動的に範囲内で文字列が折り返されるようにできるでしょうか?

    • ベストアンサー
    • Perl
  • 【IE6】テーブルにcolspanが入ると幅指定がずれる?

    閲覧いただきありがとうございます。 <Html>にて、<table>を入れているのですが <colspan>すると幅指定がずれてしまいます。 タグ記述のミスなのか、仕様なのかはっきりと分からない為 質問させていただきます。 下記のようなテーブルを作っています。 【テーブル】 テーブル幅 500px 2行 5列:(各列100pxの5等分) 【列内容】 1行目 ├5列全て colspan 2行目 ├1列目:100px ├2-3列目:100+100=200px (colspan=2) ├4-5列目:100+100=200px (colspan=2) ここで、2-3列目に幅200pxに指定した <select>タグを入れると、意図しない幅になってしまいます。 意図している動きは 2-3列目の幅ぴったりに<select>が入ってほしいのですが 4-5列目の4列部分がえぐれてしまい、4-5列目が200pxではなく 100pxぐらいの描画になってしまいます。 そして<select>タグは2-3列目にぴったりと入らず、 後ろに100pxの空きがでてしまいます。 http://kikky.net/pc/css_bug020.html このサイトではIE6ではcolspanがあると幅指定がずれると なっていますが、同一の現象なのでしょうか? 示唆いただければ幸いです。 宜しくお願いします。 --------------記述html--------------- <html> <head> <title> ColSpanテスト </title> </head> <body> <table width="500" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" style="border-collapse: collapse;" > <colgroup> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> </colgroup> <!-- 1行目 --> <tr> <td colspan="5"> span5 </td> </tr> <!-- 2行目 --> <tr> <!-- 1列目 --> <td> </td> <!-- 2-3列目 --> <td nowrap colspan="2" > <select style="width:200px;" size="1" name="sl" id="sl"> <option value="99999">2列にしたい</option> </select> </td> <!-- 4-5列目 --> <td colspan="2" > 200pxなのに・・・ </td> </tr> </table> </body> </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> 1 </td> </tr> <tr bgcolor="#FFFFFF"> <td> 2 </td> <tr bgcolor="#FFFFFF"> <td> 3 </td> </table> </td> </tr> </table> ----------------------------------------------- まではわかったのですが、 3と4を区切る方法がわかりません。 ご回答よろしくお願いします。

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

    tableのwidth指定についての質問です。 同じレイアウトで複数のhtmlファイルを作るのですが、その中のテーブル及びセルの幅をwidthで固定してあるのにも関わらず、セル内のテキストの長さによって各ファイルごとのテーブルのセルの幅が、IEでの表示で変わってしまいます。 <table width="450" cellspacing="0" cellpadding="2" border="1"> <tr> <th bgcolor="#ffcccc" width="150">aaaaaaaaa</th> <th bgcolor="#ffcccc" width="286">\100,000</th> </tr> <tr> <td colspan="2">ここには商品説明が入ります。ああああああああああああああああああああああああああああああああああああ</td> </tr> </table> 上記のaaaaaaaaaの部分がファイルによって長さが違うのですが、それによってセルの幅が変わってしまいます。 IE6でプレビューすると変わりますが、firefoxでは変わりません。 <th>を<td>に変更すると、幅は固定され変わりません。 IEの場合、thでwidth指定が出来ないのでしょうか。 なぜ変わってしまうのでしょうか?どこかに記述の問題があれば教えていただければありがたく思います。

専門家に質問してみよう