ホームページビルダー2001を使用して作成しています。動作確認などは殆どwinでIEでしか確認していなかったので気づかなかったのですが、NNだと表の幅が崩れてしまいます。
一応、タグを見たのですが、(spanというのですか?)いくつもある表の幅の指定は同じように指定してあるのです。
それでも、表によって列幅が変わって表示されてしまうのはなぜでしょう?
どなたかお教えください。

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

A 回答 (3件)

<COL span="1" width="25">


<COL span="1" width="260">
<COL span="1" width="155">
<TBODY>
 :
</TBODY>

ではなく、

<TABLE border="1" width="800">
<TR>
<TD bgcolor="#99cc99" WIDTH="25"> </TD>
<TD align="center" bgcolor="#99cc99" WIDTH="260"><FONT size="-1">あ</FONT></TD>
<TD align="center" bgcolor="#99cc99" WIDTH="260"><FONT size="-1">い</FONT></TD>
<TD align="center" bgcolor="#99cc99" WIDTH="260"><FONT size="-1">う</FONT></TD>
</TR>
</TABLE>

と、すべきです。
    • good
    • 0
この回答へのお礼

Naodon1020さん、ありがとうございます。

ホームページビルダでは、表の列全ての幅を一度に指定できるのですが、それを使わずに、セルの列ごとに幅を指定してやれば、<COL span=***>をつけることなく、幅の設定が出来るようです。
便利な機能だと思って使っていたのに・・・がっかりです。

IEで見れば、<TD>の中で設定するのも<COL span>で設定するのも同じに見えるので気づかないところでした。なるほど、「ホームページ作成ソフトに頼ってばかりいると、タグの基本を覚えないし、無駄なタグばかり多くなると」言われたことがありますが、本当にそうですね。
もっとタグを勉強します。

colorが違って見えるのは、多少は仕方ないとも思いますが、NNとIEとの違いで他に気をつけなければならない点は、どういったことでしょうか?
もしお時間あれば、お教えください。

お礼日時:2001/11/22 17:28

NN、IEで共通の、セル幅指定方法は、widthです。


例えば、

<TABLE BORDER WIDTH=85%>
<TR>
<TD WIDTH=100>あ</TD>
<TD WIDTH=250>いう</TD>
<TD>えお</TD>
</TR>
<TABLE>

と指定すると、表全体はブラウザウインドウの幅の85%に指定され、
「あ」のセルが100ピクセル、「いう」のセル幅が250ピクセル、
残りが「えお」のセルになります。

WIDTH=**では、%もしくはピクセル数を指示します。

ユーザーがブラウザで指定したフォントの大きさにより、WIDTHで指定した幅よりも文字が大きくなってしまう時に、文字が折り返さないようにしたい場合は、

<TD WIDTH=100 NOWPAP>あいうえお</TD>

というように、NOWRAPを挿入します。


基本的には、スタイルシートを使わなくても指定できる内容は、なるべくスタイルシートを使わないようにすべきです。
またTABLEタグについてはIEとNNでの解釈の違いも目立ちます。特にBORDERCOLOR等の属性は、まったく見え方が異なりますので注意が必要です。上手くタグを書いてあげれば、見え方をほぼ同じにする事が出来ますが、これは経験を積み重ねるしかないでしょう。
    • good
    • 0

表を定義するタグは<TABLE>~</TABLE>です。


その間に<TR>~</TR>が表の1行になります。
さらにその中の<TD>~</TD>が1つのセルの内容になります。
その<TD>が例えば、<TD style="width:100px">のようにスタイルシートでセル幅を指定していると、NNでは無視されます。(ちなみに、これはこのセルの横幅を100ピクセルにしなさい、ということです。)セルの幅はその列の1番長い文字列の幅に自動的に調節されます。

この回答への補足

<TD>の中では特にセル幅の指定はしていません。スタイルシートも使ってないのですけれど。
ちなみに
<TABLE border="1" width="800">
<COL span="1" width="25">
<COL span="1" width="260">
<COL span="1" width="155">
<TBODY>
<TR>
<TD bgcolor="#99cc99"> </TD>
<TD align="center" bgcolor="#99cc99"><FONT size="-1">あ</FONT></TD>
<TD align="center" bgcolor="#99cc99"><FONT size="-1">い</FONT></TD>
<TD align="center" bgcolor="#99cc99"><FONT size="-1">う</FONT></TD>
</TR>
</TBODY>
</TABLE>
といったテーブルをいくつかコピーして使ってるのですけれど、どうなのでしょう?

補足日時:2001/11/22 16:28
    • good
    • 0

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

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

QHTMLの表で幅を指定しても折り返すことは無理なのでしょうか?

以下のHTMLの表は横幅を指定していますが、
すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか?

<html>
<head>
<title>table</title>
</head>
<body>
<table width="570" border="1">
<tr><td width="130"> test1</td>
<td bgcolor="#CCCCCC" width="440">
oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</td></tr></table>
</body>
</html>

Aベストアンサー

私も悩みました。(という意味で経験者)
お書きのソースでは、<td>内に英数字がスペースなしで並んでいますね。
これを「途中で改行できない単語」と認識するのだと想像してます。
質問欄も、gooから拝見しますと、<table width="100%"><tr><td width="80%">
のソースにも関わらず、表示はウインドウの外にはみだしています。

ところどころに<wbr>を挿入したら改行してくれないでしょうか?
cgiとかで受取るなら、連続する1バイト文字を数えて<wbr>を挿入
してから、<td>内に書き出すとか。
URLのように、途中を区切れないなら、
<a href="ooooooooooooooooooooooooooooooooooooooooooo">ooooooo...</a>
のように表示分を短縮するとか。(このサイトの「参考URL」のように)

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>
...続きを読む

Qtableの幅が指定幅になりません

外部CSSを使用して、下のようにtableの幅指定をしているのですが、幅が指定どおりのサイズになりません。windowsXPのIE7で確認しています。

●HTMLソース----------------------------
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>***</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body class="otoiawase">

<div id="main">
<div class="recipie_space_large">
<table>
<tr>
<td rowspan="2" class="flow_ph"><img src="image/1.jpg" width="140" height="94" /><br /><img src="image2" alt="next" width="140" height="50" /></td>
<th><img src="image3.gif" alt="" width="27" height="27" /><b>text</b></th>
<td class="freespace" rowspan="2"></td></tr>
<tr>
<td>comment</td>
</tr>
</table>
</div>
</div>
</body>
</html>
●CSSソース(外部)----------------------------
*{
margin: 0;
padding: 0;
}
#main .recipie_space_large{
width:730px;
}
#main .recipie_space_large table{
width:730px;
}
#main .recipie_space_large table{
border:1px solid #000000;
}

#main .recipie_space_large table th{
height: 27px;
border:1px solid #000000;
}
#main .recipie_space_large td{
border:1px solid #000000;
}
#main .freespace{
width:80px;
}
#main .flow_ph{
width: 150px;
}
---------------------------------------------
http://www5a.biglobe.ne.jp/~satomi-h/test.html
表示結果↑
画像が切れていますが、同じ現象です。

textと書いてある部分のセルの幅の高さを27pxにしているのですが、とても大きくなります。class指定にするなどしてみましたが、どれもこのサイズになってしまいます・・・

また、tdにボーダーの指定をしていますが、一番右側のclass="freespace"のセルにボーダーが表示されません。CSSの表記の仕方が悪いのでしょうか?わかる方がいらっしゃいましたらよろしくお願いします。

外部CSSを使用して、下のようにtableの幅指定をしているのですが、幅が指定どおりのサイズになりません。windowsXPのIE7で確認しています。

●HTMLソース----------------------------
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; cha...続きを読む

Aベストアンサー

commentが書かれているセルにCSSでheightを高めに指定すれば、textの部分が小さくなりました。ご確認下さい。

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

宜しくお願いします。

[症状]
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&Aランキング

おすすめ情報