テーブルの幅を厳密に指定したいのですが、
例えば以下のような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が正確な値なのでしょうか?
よろしくお願いします。

A 回答 (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が設定(表示)されます。
 
 これはサンプルを作ってみて試して見るとおもしろいと思いますよ。

頑張ってくださいね。

この回答への補足

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

補足日時:2001/09/04 12:24
    • good
    • 0

ディスプレーの幅、IEであればエクスプローラーバーの表示、非表示によって有効画面幅がユーザーの環境によって逐一変わるほか、ブラウザの解釈にも差がありますので、TABLE幅を完全に固定することはなかなか難しいようです。

条件次第ではWIDTHを指定してもそれ以下の幅で表示されることがあります。また、<NOBR>も効かずに改行されてしまうことがあります。
邪道かもしれませんが、各列に背景と近い色のダミーの画像をサイズを絶対値(ピクセル)で指定して貼ればその列は画像幅以下にはなりません。それでもたとえばテキストの大きさを「最大」にされてしまえば幅が画像よりも広がってしまう可能性がありますので、スタイルシートで文字のサイズを固定すればよいかと思います。
ちょっと自信がありませんが、ご参考になればと思います。
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/09/03 20:11

>>実際やってみるともっと幅が伸びる気がするのです。


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

この回答への補足

またの書き込みありがとうございます。
おっしゃる状態にはなっていないです。
質問の仕方を少し変えさせていただきますと、
<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属性を指定するときはいくつにすればいいのですか?

補足日時:2001/09/03 20:05
    • good
    • 0

CELLPADDINGはセル枠とセル内容との余白だから、セル幅に含まれるでしょう。


だから4は足されません。
100*2+1*3=203 になるはず。

この回答への補足

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

補足日時:2001/09/03 18:07
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q と、

<td></td> と、<td><BR></td>

ホームページビルダーで作ったホムペを、KompoZerというHTMLエディタで開くと、
テーブルのなにも入っていないセルに<BR>タグが勝手に挿入されてしまいます。
<td></td> と、<td><br></td> は、
ブラウザ上ではどちらでもちゃんと表示されるのですが、
HTML文法的にはどちらが正しいのでしょうか?
また、どちらも正しい場合、<br>がある・ないで、違いがあるのでしょうか?

※ホームページビルダー、KompoZerの善し悪しは無視してください。

Aベストアンサー

文法的にはどちらも正しいです。
ブラウザの種類やHTMLのモードによって、tdが空だと、見え方が違うケースがあります。
tableでborderを指定したときに、へこんで見えるかどうか。空でないとかならずへこんで見えます。

Q■ でテキストボックスとセルの間にわずかな隙間があいてしまう・・

<TABLE>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
</TALBLE>

こう書くときに、テキストボックスの下にわずかな隙間が
できるのを防ぎたいのですが、何か方法はありませんでしょうか?

Aベストアンサー

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>
</TABLE>
としていませんか?
HTMLとしては好ましくないと思いますが、<FORM>や</FORM>の前後にある<TR><TD>~</TD></TR>を取り除き、以下の様にします。
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<FORM ~>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD><INPUT TYPE="TEXT"></TD>
</TR>
<!-- ここまで -->
</FORM>
</TABLE>

尚、表の罫線を残すのであればBORDERを変更したりしてください。

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>...続きを読む

Q

タグ、
~~ を表示することはできますか?

テーブルタグ
<table>
<tr>
<td>

をそのまま文字として表示することはできますでしょうか?

<を全角の<にすればいいのでしょうが、なにぶん、テーブルタグの量が膨大なため、手でいちいち直してたら数ヶ月、数年かかってしまいます。

タグをそのまま画面に表示させる良い方法はないでしょうか?

詳しい方いらっしゃいましたら教えていただけないでしょうか?

よろしくお願いします!

Aベストアンサー

タグの無効化というタグです

<xmp>タグ</xmp> タグを無効化にして文字として表示されます
良かったら使ってみて下さい

Q

からに書き換えるか迷っています

普段はドリームウィーバー2004mxを使っております。
ブラウザはInternet Explorerの新しいほうだと思います。

私はWEB制作には素人で、ソフトに頼り四苦八苦していますので
HTMLもちょっとずつ覚えているという段階の、入り口の初心者であります。
そこで、教えてください。

先日驚いたのですが
行揃えの指定のタグがありますよね。
今までの制作部分では
<td align="XXXX">を使用してきましたが、
<td style="text-align: XXXX;">
のほうが、長い目でみて、良いということでした。
理由は<td align="XXXX">のままだと
  ・Operaブラウザで不具合
  ・またはXHTML1.1で廃止(?)
といったことがあるようです。
私は自分のInternet Explorerで観ていたので何も知りませんでした。
やはり将来的に、<td align="XXXX">は色んな不具合を起こしていく恐れがあるかも知れません。

以下は私が立てさせていただいた質問で、
経験者のおっしゃることですので信憑性はたいへん高いと思っています。
http://oshiete1.goo.ne.jp/qa5051214.html

で、本題はここからですが、長い目でみた場合に、
<td align="XXXX">を
<td style="text-align: XXXX;">の状態に書き換えるべきでしょうか。

すでに<td align="XXXX">で作ってある部分が結構あります。
ただWEBサイトは長く使いたいので、今のうちに手を打てるなら打っておこうと思います。
この書き換え案に迷っていますので、お詳しい方、アドバイスをください。
または今WEB制作中の専門家の方は、
<td align>と
<td style="text-align: XXXX;">
はどちらを使っていらっしゃることが多いのでしょうか。

もしかしたら<td valign="XXXX">も同様のことが言えるのかも知れません。
宜しくお願いいたします。

普段はドリームウィーバー2004mxを使っております。
ブラウザはInternet Explorerの新しいほうだと思います。

私はWEB制作には素人で、ソフトに頼り四苦八苦していますので
HTMLもちょっとずつ覚えているという段階の、入り口の初心者であります。
そこで、教えてください。

先日驚いたのですが
行揃えの指定のタグがありますよね。
今までの制作部分では
<td align="XXXX">を使用してきましたが、
<td style="text-align: XXXX;">
のほうが、長い目でみて、良いということでした。
理由は<td alig...続きを読む

Aベストアンサー

一応、XHTML1.1で廃止されていないという根拠です。

W3Cは、日本(日本語)の文科省みたいなところです。
http://www.w3.org/

XHTML1.1のtableのページ(英語ですがタグ名とタグ属性だけなのでわかると思います)
http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_simpletablemodule


> #このあたりは、制作者の考え方次第ですね。
同意します。

読みやすいかどうかは慣例を重視(基準に)しています。
たとえば予算や売り上げ表などの「(単位千円)」みたいな記述は右寄せしています。

align指定は、もし翻訳サイトを通じてアラビア語など右から左に書く言語で表示した場合、
左寄せ、右寄せが逆転し、非常の読みづらくなります。
(この現象はfloatも同様です)

W3C(など)はそういうのも考慮し、alignなしを推奨しているようですが、(W3Cはアメリカだったと思いますが、おそらく日本語の右寄せのような習慣がないと思いますので)
現実には、私はalignを使っての影響はほとんどないと思います。

Operaの古いバージョンで、この状態をシミュレーションできた気がしますが、
もし「不具合」がその事であれば、私は無視できる範囲だと思います。

一応、XHTML1.1で廃止されていないという根拠です。

W3Cは、日本(日本語)の文科省みたいなところです。
http://www.w3.org/

XHTML1.1のtableのページ(英語ですがタグ名とタグ属性だけなのでわかると思います)
http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_simpletablemodule


> #このあたりは、制作者の考え方次第ですね。
同意します。

読みやすいかどうかは慣例を重視(基準に)しています。
たとえば予算や売り上げ表などの「(単位千円)」みたいな記述は右寄せ...続きを読む

Q

タグ

テーブルでレイアウトを行い、htmlで背景色・cssで文字のスタイルを適用する場合、<tr>タグと<td>タグのどちらに記述するのがよいのでしょうか。IEだと大差は無いようなのですが、firefoxやNetscapeで違いが出てくるように感じます(特にfirefox)。

(1)cssで文字スタイルの場合、<table>タグに<table class="text">といった感じで問題ないでしょうか(table内の文字すべてclassがtextの場合)。それともやはり<td>タグひとつひとつにクラス指定した方が良いのでしょうか。

(2)テーブルに背景色を指定する場合、<tr>タグ・<td>タグのどちらに指定するのが良いのでしょうか。

Aベストアンサー

(1)TDタグひとつひとつにCLASS属性を設定してください。TABLEタグにCLASS属性を設定しても、子要素にあたるTDタグにまではCSSが適用されたりされなかったりする場合があります。また、TDタグひとつひとつを細かく修正することになった場合、TABLEタグに設定したCSSが意図しない影響を及ぼすかもしれません。

(2)TDタグに指定してください。

概して、TRタグにCLASS属性、あるいはその他の属性を設定することはありません。環境によってTRタグの解釈にバラつきがあるというだけではなく、単に標準的な記述ではないという理由によります。
すなわち、好まれません。


人気Q&Aランキング

おすすめ情報