テーブルの項目幅を固定するには？

質問

ものすごく簡単な質問だと思うんですけど、なんせ初心者なのでどうかわかりやすく教えてください。

テーブル定義で％で列幅を指定しているのに、その中に文字をいれたとき、
その文字幅にあわせて幅がかわるんです。
そもそも％で指定するときの％って何に対しての％なんですか？画面幅？？
それともテーブル全体の幅ですか？
横にスクロールしてもいいので列幅を固定する方法を教えてください。
過去の質問をチェックしてみたのですが、よくわかりませんでした。

回答No.3

blank_out · ベストアンサー

テーブル定義の％はテーブル全体に対しての割合です。
しかし、それぞれのセルの内容物のサイズによってはブラウザが勝手に
割合を変える場合があります。
ピクセル固定でもネットスケープナビゲータ等は内容によって無視しま
す。

従って、幅を固定したいならピクセル指定で固定した上で、テーブルの
各列に固定用のスペーサーを入れる事になります。また、ネットスケー
プだけが対応している<SPACER>タグを使用することにより、ネットスケー
プのテーブル表示上の不具合を解決すると言うやり方もあります。
ただし、これらは見えないテーブルをレイアウト用に使用したときに、
使用するテクニックであって、初心者が普通の表をこれらのイレギュラー
なテクニックを使用して固定するのもどうかと思います。

※ちなみに、テーブルのセル単位でのスクロールはありません。
　スクロールが発生するのは、画面全体かフレームに対してです。

お礼

odricさんは「画面幅に対する%ですね。」
とおっしゃっているのでまたまた？？になってしまいました。
raiyaさんの話とあわせて考えると、<th>または<td>の場合、
テーブルに対する％で
<table>で指定する％は画面に対する％　
って解釈したんですが、違うでしょうか？

ブラウザはＩＥです。
固定用のスペーサーって何ですか？

本当に初心者で申し訳ないです・・・
これを読んで「アチャー、答えるんじゃなかった」
とかって思わないでくださいね・・・（^^；

回答No.6

zetora

こんばんは、私は独学でＨＴＭＬを学んだ者です。
batu1さんのお力になれるかどうか解りませんが
参考になればと思い・・・(;￣ー￣A アセアセ・・・

<table width="★" height="☆">

★・……表の横幅（ピクセル数または％）
☆・……表の縦幅（ピクセル数または％）

WIDTH、HEIGHT属性で表の大きさを指定する場合、
パーセンテージで指定すると、ブラウザのウインドウ
サイズに対する割合となり、ウインドウの大きさを変
えると表の大きさも変わりますので、横にスクロール
してもよいのであれば、パーセンテージで指定するよ
り、ピクセル指定の方が良いのではないでしょうか？

ピクセル指定であれば、絶対的な指定になるので、ブ
ラウザのウインドウの大きさに関係なく、同じ表示が
保てます。但しあまりにもピクセル数が大きくな
ると、ＨＰ見る人もスクロールして見るのが大変なの
で注意した方が良いと思います。

私の場合は、ノートＰＣのブラウザ(800×600ピクセル)
でも横スクロールしないですむように、横幅は800以内
で納めるようにしています。ご参考になれば＾＾；

お礼

とてもわかりやすい説明でした。ありがとうございます。
ところで<table width="800"> と書いたらスクロールしない範囲で画面いっぱいになるのですか？？
今日会社でいろいろ指定を変えて書いてみたんですが、
<table>で何を指定しても何も反映されないんですよ～
何か基本的に間違えてるんでしょうか・・・(;_;)

回答No.5

blank_out

何回もすみません。
あと、スペーサーについて書いておきます。

>固定用のスペーサーって何ですか？

一般に、1×1ピクセルの透明なGIFイメージの高さと幅をしていして、
特定のスペースを確保するために使われるGIFイメージをスペーサーと
言います。
これはテーブルやテーブル以外のレイアウティングに使われる補助的な
テクニックです。テーブルをレイアウト用に使うと、ドット単位の狂い
も認められない場合があるので、自然にこのテクニックが定着したもの
と思われます。
ただし、最近はnowrap属性などでコントロールする事を解説している本
なども多いですね。
因みに、幅をピクセルで指定してnowrapを指定すると幅は指定したピク
セルの幅になります。
ブラウザはIEと言う事ですが、IEは幅を数字で指定すればこれらのテク
ニックを使用しなくても比較的思い通りに表示してくれるはずです。

お礼

丁寧に何度もありがとうございます。
とりあえず、ピクセルで指定して試してみましたが、やっぱり列によって幅が変わってしまったので、いろいろ試した結果を報告させていただきます。
超簡単に説明させてもらうと
まず、<table widht=100%> を指定して <td widht="50">　を指定しました。
でもだめでした。なので<table>タグには何も指定せず<td>でピクセル数を書いたのですが、これもだめでした。
この時点でもう半泣きに・・・(T_T)
結局、<table style="table-layout:fixed">　と <colgroup>を併用してやっとこさ、うまくできました。
本当にどうもありがとうございました。
また新たな疑問があるので最新の質問も読んであげてくださいませ。

回答No.4

blank_out

混乱させてごめんなさい。
TABLEタグに対する％は画面と言うか、ブラウザの表示幅に対する割合です。
一方、TDタグ等のセルに対する％はテーブル幅に対しての割合です。

列幅を指定していると書いてあったもので、個々のセルに対しての指定かと
思っていました。

回答No.2

raiya

えっと、
　テーブルの幅を決める方法ですが、まず一つの列の幅を決める場合、
　<colgroup span="★" width="☆☆">や<col span="★" width="☆☆">
　として、
　☆☆に数字を入れた場合には単純にその数字のピクセル分の幅になり、
　テキストによって幅が変わることはないと思います。
　これは、<th width="☆☆">や<td width="☆☆">を利用した場合も
　同じだと思います。

　またここで、☆☆に７５％なんていれると、
　表の大きさに対しての７５％になります。
　このとき、<table width="☆☆">なんてやって、テーブル自体の幅を
　予め決めておかないと、
　もしかしたらテーブル自体の幅が変わってしまうこともあるかもしれません。
　また、<table>で７５％なんて数字を入れた場合はブラウザのウインドー幅に
　対する大きさになります。

　　えっと、もうひとつ、
　<th nowrap><td nowrap>なんて感じに、nowrapの文字をつけておくと、
　特別幅が指定されていない場合、文字列の幅にあわせるようになります。
　このとき、一行の文字がどんなに長くても勝手に改行しませんので
　文字が長ければ横にスクロールするようになります。
　　もちろん、上記のようにwidth=""でピクセル単位で幅を決めるのが
　普通ですので、邪道なやり方にはなりますけど、、。

　　わかりづらい上に長文ですみません、、、。

参考URL：

http://wakusei.cplaza.ne.jp/twn/html/index.htm

お礼

いえいえ、わかりやすい説明でした。
ありがとうございます。
また質問ですが幅を指定したうえで、<nowrap>を指定したら
どっちが優先されるのですか？
これは暇があれば教えてください。
ちょっと疑問に思っただけなので。

回答No.1

odric

画面幅に対する%ですね。
はみ出ても良いのなら、直接数値を指定すればよいのではないでしょうか？
なお、参考URLにHTMLリファレンスがあります。

参考URL：

http://wakusei.cplaza.ne.jp/twn/www.htm

お礼

回答ありがとうございます。
早速明日会社に行って直接指定を試してみます。
多分次から次にわからないことが出てくると思うので
またよろしくお願いします。