<table>タグの表示不安定につき、ご教示ください。
aaaa.txtに蓄積したデータをCGIで切り分けて、下記の<table>タグ内に割り付けて
表示させています。

<table width=510>
<tr><th>左列の表題</th>
<th>右列の表題</th></tr>
<tr><td>改行タグを含む文字列A1</td>
<td>改行タグを含む文字列B1</td></tr>
<tr><td>同様のA2</td><td>同様のB2</td></tr>
<tr><td>同様のA3</td><td>同様のB3</td></tr> <!--このtrを繰返し-->
</table>

表幅を絶対指定したのは、印刷時に 510 px / 72 dpi * 2.54 cm = 18 cmで、
A4の幅に納まりやすいだろうという意図です。文字列AとBは、それぞれ
<br>で区切ってありますが、区切りは概ね1行分(はみだせば折り返し)です。
<td>の幅を指定しなかったのは、<br>までの長さに応じて表示幅をシェアさせ、
折り返し頻度を減らすこと(印刷時の縦長の節約)が目的です。

IE5/Win&Mac及びNN4.7/Win&Macで、td内の1行長を無視した割付けが
しばしば生じ、その割付け方の法則がわかりません。小細工を諦めて、列幅を
50%ずつに指定してしまおうかとも思っていますが、ブラウザは何を基準に
列幅を割り付けているのでしょう?

要領を得ない状況説明で恐縮ですが、追加説明は補足要求でご指示ください。

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

A 回答 (2件)

loveoboさん、こんにちは。

#1のkamotoです。
その後いかがですか?
table widthは、A4でしたら590ぐらいでも大丈夫だと思いますよ。
でも読みやすいのはだいたい550ぐらいでしょうか…。

ところで、1件ずつ<tr>で区切っているのですよね?
<tr>の中でも<br>によっていくつもの項目が区切られているんでしょうか。

あまりうまく想像できていないのですが、
あとは<tr valign="top">で高さをそろえて、
改行されても見にくくならないようにしておいて、
widthはブラウザにおまかせしておけば、
だいたいコンテンツの長さに合わせてくれるのでは
ないかと思います。

うーん、いまいちな回答でごめんなさい。
    • good
    • 0
この回答へのお礼

> その後いかがですか//
気にかけていただき、ありがとうございます。このサイトの醍醐味です。

> table widthは、A4でしたら(中略)550ぐらいでしょうか…。//
550で印刷 (NN&IE/Mac) してみたら切れてしまったので 510 に
したのですが、後にWinは 96 dpi (680px でA4幅) と知りました。

> うまく想像できていないのですが、あとは<tr valign="top">で//
イントラ向けなので具体的に書くのに躊躇し、単純化したサンプルで
質問しました。わかりにくくてゴメンナサイ。実物は3列、各 <td> で
valign指定なし(="middle")と valign="top" を使い分けてます。

> おまかせしておけば、だいたいコンテンツの長さに合わせてくれる//
これを期待したのですが、いろんな長さのコンテンツが入ってくると、
ブラウザが意に反した調整をしてくれて・・・ で、落ち着いた先は、
<td>のシェアは width="xx%" を明示。<table>は、width属性なしが閲覧に
向き (windowが広くても間延びしない)、width="100%" がMac/Winとも
無駄なく印刷できるようです。中途半端な指定が裏目に出てました。

お礼日時:2002/04/09 00:58

loveoboさんの求めている回答ではありませんが…



テーブル幅を指定しない場合、OSやブラウザの違いによって、
どこで折り返されるかは全く異なりますよね。

そのようなwebの特性にフレキシブルに対応するためにも、
どこで折り返されても差し支えないコンテンツにするほうが
良いのではないでしょうか?

せっかくA4に納まるようにという親切な配慮をされているのですから、
<br>で1行ずつ改行せずに、段落ごとに空行をいれるなどして、
段落を際立たせ、どこで改行されても読みやすくしたほうが、
どのような環境で印刷しても気分良く読めますよ(^-^)

的外れでごめんなさい。
    • good
    • 0
この回答へのお礼

アドバイスありがとうございます。お返事が遅くなって申し訳ありません。

> どこで折り返されても差し支えないコンテンツにするほうが良いのでは//
仰るとおりで、私もそれを基本に考えています。投稿formから受取った
十数文字ほどの文字列を、1件ずつ区切るために<br>を入れており、その1件が
明らかに2行にわたるなら、おまかせの改行(セル内折り返し)にこだわり
ません。ただ、左の列がガラガラなのに、右の列が1文字オーバーで折り返し
というような割り付けを避けたくて、<td width=... >を工夫できないかと
思ったのです。

> せっかくA4に納まるようにという親切な配慮をされているのですから//
私の <table width=510> の根拠は、そう悪くもないと思って良いのでしょうか?
table widthを指定しなくても、ブラウザのウインドウを適宜調節すれば済む
んですが、イントラネット向けコンテンツで、WordやExcelは使うけど
インターネット(ブラウザ)は使ったことがない方も巻き込みたかったので。

とりあえず、windowの一部をメニューが占領している方や表示文字を大きく
している方と、幅1024で標準文字サイズの方の中間をとって、閲覧用に
table width="85%"、印刷用にtable width=510の二本立て、列のシェアは
td width="50%" ずつの明示でやってみます。

お礼日時:2002/04/04 21:49

お探しの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>
<tr>
<td>

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

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

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

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

よろしくお願いします!

Aベストアンサー

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

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

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

タグの幅指定について

<FORM>を2つに切って、その表示がずれてしまうという記事が少し前にありましたが、多少内容がかぶるかもしれません。

列項目が全く同じ2つの表を上下に並べて表示しようと思っています。
<TABLE>タグはWIDTHの指定ができるので表全体のサイズは上下でそろっているのですが、その中の項目の縦の線がずれてしまいます。

原因はその項目に表示される内容が上の表と下の表とで異なっていることによるズレのようです。
(<TD>のタグにはwidthの指定が無く、<TABLE>全体として、バランスが取れるように自動的に中の項目幅を調整してしまうためらしいです(--; )

何か画期的な裏技がありましたら、教えてください。
お願いします。

Aベストアンサー

<td>の属性で、width="500" のような指定も出来ますが、そうやってきっちりと幅指定をしても、ブラウザが勝手にレイアウトを変更してしまうこともよくあります。これを防ぐには、透明な1pixelのgifを利用する方法が有効です。
(HTML4.01では、本来推奨されていないアプローチのようですが。)

たとえば、
<table width="100">
<tr><td width="50">abc</td><td width="50">ABC</td></tr>
<tr><td width="50">abcdefg</td><td width="50">AB</td></tr>
</table>

としたが、意図した表示と異なる場合には、

<table width="100">
<tr height="1"><td width="50"><img src="clear.gif" width="50" height="1"></td><td width="50"><img src="clear.gif" width="50" height="1"></td></tr>
<tr><td width="50">abc</td><td width="50">ABC</td></tr>
<tr><td width="50">abcde</td><td width="50">AB</td></tr>
</table>

のようにすることで、理不尽なレイアウトになることを防ぐことができます。

<td>の属性で、width="500" のような指定も出来ますが、そうやってきっちりと幅指定をしても、ブラウザが勝手にレイアウトを変更してしまうこともよくあります。これを防ぐには、透明な1pixelのgifを利用する方法が有効です。
(HTML4.01では、本来推奨されていないアプローチのようですが。)

たとえば、
<table width="100">
<tr><td width="50">abc</td><td width="50">ABC</td></tr>
<tr><td width="50">abcdefg</td><td width="50">AB</td></tr>
</table>

としたが、意図した表示と異なる場合には、...続きを読む

Q

の幅が:nth-childだけの場合とcolgroupを使った場合とで異なる

<table>の<th><td>の幅を固定するのにCSSの:nth-childを使っていたのですが、
<colgroup>の<col>でも縦の幅を固定できると知り試してみました。
しかし、:nth-childを使った場合と<colgroup>を足した場合とで、幅が異なるようです。
添付画像のように、<colgroup>を使うと幅が狭くなりました。
(:nth-child を使うと幅が広くなる?)
このように幅が異なるのはどのような理由からでしょうか?

試したtest.htmは次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>てすと</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>テスト(colgroupあり)</h1>
<table>
<colgroup>
<col span="1" style="width:300px;">
<col span="1" style="width:70px;">
<col span="1" style="width:250px;">
<col span="10" style="width:62px;">
</colgroup>
<thead>
<tr>
<th>thead</th><th></th><th></th><th></th>
<th></th><th></th><th></th><th></th>
<th></th><th></th><th></th><th></th>
<th></th>
</tr>
</thead>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td>
</tr>
</table>

</body>
</html>

test.cssは次の通りです。
@charset "UTF-8";

h1{height:50px;}
table{table-layout:fixed;}
table,tr{width:1240px;}
th,td{border:solid 5px black;text-align:center;height:100px;}
th{background-color:red;}
tr:nth-child(2n+1){background-color:blue;}
tr:nth-child(2n+0){background-color:white;}
th:nth-child(1),td:nth-child(1){width:300px;}
th:nth-child(2),td:nth-child(2){width:70px;}
th:nth-child(3),td:nth-child(3){width:250px;}
th:nth-child(n+4),td:nth-child(n+4){width:62px;}

よろしくお願いします。

<table>の<th><td>の幅を固定するのにCSSの:nth-childを使っていたのですが、
<colgroup>の<col>でも縦の幅を固定できると知り試してみました。
しかし、:nth-childを使った場合と<colgroup>を足した場合とで、幅が異なるようです。
添付画像のように、<colgroup>を使うと幅が狭くなりました。
(:nth-child を使うと幅が広くなる?)
このように幅が異なるのはどのような理由からでしょうか?

試したtest.htmは次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<tit...続きを読む

Aベストアンサー

CSSボックスモデルにおいて td の幅は padding と border 込みで計算されます
td { width:300px; border-width:5px; padding:1px; }
ならば
幅 = 300 + 5*2 + 1*2 = 312px

col や colgroup には padding と border が無いので
col { width:300px; }
ならば
幅 = 300px

注意
table { border-collapse:collapse; } だとさらに計算がややこしくなります


人気Q&Aランキング

おすすめ情報