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

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

このQ&Aに関連する最新のQ&A

A 回答 (6件)

テーブル定義の%はテーブル全体に対しての割合です。


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

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

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

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

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

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

お礼日時:2001/04/23 22:46

こんばんは、私は独学でHTMLを学んだ者です。


batu1さんのお力になれるかどうか解りませんが
参考になればと思い・・・(; ̄ー ̄A アセアセ・・・


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

★・……表の横幅(ピクセル数または%)
☆・……表の縦幅(ピクセル数または%)


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

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

私の場合は、ノートPCのブラウザ(800×600ピクセル)
でも横スクロールしないですむように、横幅は800以内
で納めるようにしています。ご参考になれば^^;
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/04/24 20:26

何回もすみません。


あと、スペーサーについて書いておきます。

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

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

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

お礼日時:2001/04/24 20:19

混乱させてごめんなさい。


TABLEタグに対する%は画面と言うか、ブラウザの表示幅に対する割合です。
一方、TDタグ等のセルに対する%はテーブル幅に対しての割合です。

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

  えっと、


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

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

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

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

参考URL:http://wakusei.cplaza.ne.jp/twn/html/index.htm
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/04/23 22:23

画面幅に対する%ですね。


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

参考URL:http://wakusei.cplaza.ne.jp/twn/www.htm
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/04/23 22:10

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

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

Q文字サイズ変更でテーブル要素(幅の値を指定済み)の幅が変化しないようにするには?

宜しくお願いします。

[症状]
TABLE・TDタグにて、幅をしているすると、
文字サイズ:小 で見るときは、設定した値の
適正地が反映されるが、文字サイズ:中 以上に
設定すると、TABLEで設定最多幅は有効なままで
あるが、TDで設定した値は完全に無視される形で、
テーブルの中のバランスが乱れてしまう。

[ソース]

<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="white" style="border-collapse:collapse ">
<tr>
<td style="width:250px; ">あ</td>
<td style="width:300px; ">い</td>
<td style="width:200px;">う</td>
</tr>
<tr>
<td>え</td>
<td>お</td>
<td>か</td>
</tr>
</table>

[コメント]
特に変哲のないソースだと思います。
あ~か の文字のところには、それぞれもう少し長い
文章が入る形となります。

[質問]
文字サイズをブラウザ上で変更しても、
TDの幅が変わらないようにしたい。
その際に、文字のサイズを固定はしたくないです。

[その他]
styleではなく、width指定しても
効果がありませんでした。

宜しくお願いします。

宜しくお願いします。

[症状]
TABLE・TDタグにて、幅をしているすると、
文字サイズ:小 で見るときは、設定した値の
適正地が反映されるが、文字サイズ:中 以上に
設定すると、TABLEで設定最多幅は有効なままで
あるが、TDで設定した値は完全に無視される形で、
テーブルの中のバランスが乱れてしまう。

[ソース]

<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="white" style="border-collapse:collapse ">
<tr>
<td style="width:250px; "...続きを読む

Aベストアンサー

スペーサーを使います。
文字サイズのために,幅が大きくなることが原因ではなくて,空白部分のあるセルが横のセルによって縮まることが原因だからです。

イメージ的には「つっかえ棒」を入れるのです。
スペーサーは普通,透明なGIFですが,そうではなくて,各列のタイトル部分だけを画像にして,スペーサー兼見栄えの良い列タイトルとすることもあります(私はこちらの方法をよく使います)。

参考URLなどを参考にしてみてください。

参考URL:http://www5c.biglobe.ne.jp/~horoau/html/spacer_gif.html

Qテーブルを指定列幅で表示したい(画面に収まらなくていいので)

1280x1024のモニタを使ってますが
下記で、右端を突き破ってwidth="300"を効かせる方法を教えてください。

<html>
<body>
<table border="1">
<col span="10" width="300">
<tr>
<td>NO</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>名前</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</body>
</html>

Aベストアンサー

<table>タグだとスクリーンを超える場合、width指定が100%(スクリーンサイズ)にデフォルト設定されてるので

<table border="1" width="3300">

と変更するだけでいいです

ちなみに僕も<col>タグと<colgroup>タグははじめて見ました
よくサンプルプログラムを参考にさせてもらってるサイトで見たら確かにHTMLタグのところにありました
htmlファイルをあまり使うことが無いのでちょっと新鮮(^^)

ついでにだけど
<col span="10" width="300">だと
10列を300pxにしてるので最初の『No』~10列なので『9』までしか300pxになりませんよ(><)
<col span="11" width="300">に直してください m(--)m
それにあわせて冒頭『3300』にしてます
↑別にこれは3000でもいいです。
<td width="***">と違って<col width="***">はテーブルサイズに合わせて列幅は微調整されるみたいですので・・・

<table>タグだとスクリーンを超える場合、width指定が100%(スクリーンサイズ)にデフォルト設定されてるので

<table border="1" width="3300">

と変更するだけでいいです

ちなみに僕も<col>タグと<colgroup>タグははじめて見ました
よくサンプルプログラムを参考にさせてもらってるサイトで見たら確かにHTMLタグのところにありました
htmlファイルをあまり使うことが無いのでちょっと新鮮(^^)

ついでにだけど
<col span="10" width="300">だと
10列を300pxにしてるので最初の『No』~10列なの...続きを読む

Qテーブルで列の幅を指定する

HTMLタグでWEBサイトを作成していますが、テーブルの幅を指定しても実際ページを開けると、同じ数値入れても同じ幅にならなかったり、全ての幅指定してもその通りになりません。またウィンドウを大きくしたり小さくしたりすると、特定の列のみ幅が狭くなったり広くなったりします。どうすれば幅を指定した数値どおりに固定できますでしょうか。

Aベストアンサー

 style="table-layout: fixed;" で、指定すると良いようです。↓

<html><head>
</head>
<body>
<table border=1 style="table-layout: fixed;">
<tr height="50">
<td width="160" colspan="2">あああああああああああああああああああああああああ</td>
<td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td>
<td width="160">ううううううううううううううううううううううううう</td>
</tr>
<tr height="50">
<td width="80">かかかかかかかかかかかかかかかかかかかかかかかかか</td>
<td width="80">ききききききききききききききききききききききききき</td>
<td>くくくくくくくくくくくくくくくくくくくくくくくくくくくくくく</td>
<td>けけけけけけけけけけ</td>
</tr>
</table>
</body>
</html>

 style="table-layout: fixed;" で、指定すると良いようです。↓

<html><head>
</head>
<body>
<table border=1 style="table-layout: fixed;">
<tr height="50">
<td width="160" colspan="2">あああああああああああああああああああああああああ</td>
<td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td>
<td width="160">ううううううううううううううううううううううううう</td>
</tr>
<tr height="50">
<td width="80">かかかかかかかかかかかかかかかかかかかかかかか...続きを読む

Q固定幅div内のテーブルセルの幅指定方法

幅を指定して横スクロールバーを有効にしたdivがあります。
その中に、divよりも幅の広いtableを置き、thやtdの幅を指定したいのですが、有効になりません。
tableへの幅指定は有効になるのですが、内容が動的に変化するので、セル単位で幅を指定したいと思っています。
解決方法がありましたらお願いいたします。

HTML:標準モード
UA:Windows xp IE6
サンプルコード:
<style>
div{
height:200px;
width:200px;
overflow-x:scroll;
border:#f99 solid 1px;
}
table{
background:#ddd;
border:#666 solid 1px;
}
td{
width:100px;
border:#666 solid 1px;
}
</style>


<div>
<table>
<tr>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
</tr>
</table>
</div>

幅を指定して横スクロールバーを有効にしたdivがあります。
その中に、divよりも幅の広いtableを置き、thやtdの幅を指定したいのですが、有効になりません。
tableへの幅指定は有効になるのですが、内容が動的に変化するので、セル単位で幅を指定したいと思っています。
解決方法がありましたらお願いいたします。

HTML:標準モード
UA:Windows xp IE6
サンプルコード:
<style>
div{
height:200px;
width:200px;
overflow-x:scroll;
border:#f99 solid 1px;
}
table{
background:#ddd;
border...続きを読む

Aベストアンサー

 このようにしたいのでしょうか。↓
<html>
<head>
<style type="text/css">
<!--
div{
height:200px;
width:200px;
overflow-x:scroll;
border:#f99 solid 1px;
}
table{
table-layout: fixed;600px;
background:#ddd;
border:#666 solid 1px;
}
td{
width:100px;
border:#666 solid 1px;
}
-->
</style>
</head>
<body>
<div>
<table>
<tr>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
</tr>
</table>
</div>
</body>
</html>

参考URL:http://www.tohoho-web.com/css/reference.htm#table-layout

 このようにしたいのでしょうか。↓
<html>
<head>
<style type="text/css">
<!--
div{
height:200px;
width:200px;
overflow-x:scroll;
border:#f99 solid 1px;
}
table{
table-layout: fixed;600px;
background:#ddd;
border:#666 solid 1px;
}
td{
width:100px;
border:#666 solid 1px;
}
-->
</style>
</head>
<body>
<div>
<table>
<tr>
...続きを読む

Q4カラムのテーブルに絶対幅と相対幅の混在指定の可否

以下のHTMLで、1列目は20ピクセル(?)、2列目は100ピクセルに幅が固定されているとして、
3~4列目、黄色と青のカラムの幅を均等に揃える方法はありませんか。

3~4列目の幅を<col=50%>ととると、1~2列目の幅が侵食されて崩れます。
ごらんのとおり、テーブル自体の幅は100%なので、モニタやブラウザの表示幅によってテーブル自体の幅も異なってくるため、
4カラムのテーブルのうち、1~2列目は絶対幅、3~4列目と相対幅と混在指定できればよいのですけど。


<html>
<body>
<table border=1 cellpadding=3 cellspacing=0 width=100%>
<col width=20>
<col width=100>
<col>
<col>
<tr>
<th rowspan=2 style="writing-mode: tb-rl;">基本情報</th>
<th>プロジェクト</th>
<td colspan=2>あいうえおあいうえおあいうえおあいうえお
</tr>
<tr>
<th>概要</th>
<td colspan=2>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td>
</tr>
<tr>
<th colspan=2>コメント</th>
<th bgcolor=yellow>当方から</th>
<th bgcolor=blue>先方から</th>
</tr>
<tr>
<th colspan=2>第1回会合</th>
<td>◆ いいいいいいいいいいい<br>◆ うううううう</td>
<td>◆ ええええええええええええええ<br>◆ おおおおおおおおおおおおおおおおおおおおおおおおおおおおお</td>
</tr>
</table>

</body>
</html>

以下のHTMLで、1列目は20ピクセル(?)、2列目は100ピクセルに幅が固定されているとして、
3~4列目、黄色と青のカラムの幅を均等に揃える方法はありませんか。

3~4列目の幅を<col=50%>ととると、1~2列目の幅が侵食されて崩れます。
ごらんのとおり、テーブル自体の幅は100%なので、モニタやブラウザの表示幅によってテーブル自体の幅も異なってくるため、
4カラムのテーブルのうち、1~2列目は絶対幅、3~4列目と相対幅と混在指定できればよいのですけど。


<html>
<body>
<table border=1 cell...続きを読む

Aベストアンサー

相対幅と混在指定というより、プロジェクトを分割したくないという意味ですよね?

3~4列目の幅を<col=50%>とし、<th nowrap=nowrap>プロジェクト</th>としてください。
nowrapは分割禁止の意味です。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報