
<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%ずつに指定してしまおうかとも思っていますが、ブラウザは何を基準に
列幅を割り付けているのでしょう?
要領を得ない状況説明で恐縮ですが、追加説明は補足要求でご指示ください。
No.2ベストアンサー
- 回答日時:
loveoboさん、こんにちは。
#1のkamotoです。その後いかがですか?
table widthは、A4でしたら590ぐらいでも大丈夫だと思いますよ。
でも読みやすいのはだいたい550ぐらいでしょうか…。
ところで、1件ずつ<tr>で区切っているのですよね?
<tr>の中でも<br>によっていくつもの項目が区切られているんでしょうか。
あまりうまく想像できていないのですが、
あとは<tr valign="top">で高さをそろえて、
改行されても見にくくならないようにしておいて、
widthはブラウザにおまかせしておけば、
だいたいコンテンツの長さに合わせてくれるのでは
ないかと思います。
うーん、いまいちな回答でごめんなさい。
> その後いかがですか//
気にかけていただき、ありがとうございます。このサイトの醍醐味です。
> 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とも
無駄なく印刷できるようです。中途半端な指定が裏目に出てました。
No.1
- 回答日時:
loveoboさんの求めている回答ではありませんが…
テーブル幅を指定しない場合、OSやブラウザの違いによって、
どこで折り返されるかは全く異なりますよね。
そのようなwebの特性にフレキシブルに対応するためにも、
どこで折り返されても差し支えないコンテンツにするほうが
良いのではないでしょうか?
せっかくA4に納まるようにという親切な配慮をされているのですから、
<br>で1行ずつ改行せずに、段落ごとに空行をいれるなどして、
段落を際立たせ、どこで改行されても読みやすくしたほうが、
どのような環境で印刷しても気分良く読めますよ(^-^)
的外れでごめんなさい。
アドバイスありがとうございます。お返事が遅くなって申し訳ありません。
> どこで折り返されても差し支えないコンテンツにするほうが良いのでは//
仰るとおりで、私もそれを基本に考えています。投稿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%" ずつの明示でやってみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- Perl PERL 1 2022/04/26 14:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLでデーブルを作成
-
NetScape 全角数字の折り返し
-
テーブルの自動改行について
-
ECサイトなどにある並び替えに...
-
【CSS】:hasで可能? imgを含む...
-
どうか力を貸してください
-
選択行だけ色を変更する場合のC...
-
myspaceの友達リスト
-
HP作成時において
-
tableの中にtableを作りスクロ...
-
HP作成時の画像の処理について
-
html CSS 特定テーブルのセルに...
-
テーブルの位置について
-
tableタグ内で、空白セルでも罫...
-
HTMLで文とテーブルの間が空く。
-
テーブルのセルに画像をピッタ...
-
<TABLE>タグ挿入時の無駄な改行??
-
Dreamweaver8で表を作成しまし...
-
点線の枠を横に二つ並べたいん...
-
CSSで表のデザインをするには
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
TRタグの余白をcssで設定するには
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
テーブルのセルに画像をピッタ...
-
cssで、表示されるテキストによ...
-
中に<table></table>が使えるア...
-
ホームページ 表の上の余白を...
-
tableの要素(tr、td)に一...
-
tableでcolspanを使うと次行以...
-
テーブルの表示がずれます
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルのヘッダとボディの幅...
-
CSSだけで<table>の<td>や<tr>...
-
EXCELからhtmlへの変換で罫線が...
-
tdなどの閉じタグは省略しても...
-
テーブルタグのセルの幅の一部...
-
HTMLのテーブルで桁をそろ...
-
不要な余白を削除する方法を教...
おすすめ情報