- 締切済み
widthを指定しない<td>が幅をシェアする基準?
<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%ずつに指定してしまおうかとも思っていますが、ブラウザは何を基準に 列幅を割り付けているのでしょう? 要領を得ない状況説明で恐縮ですが、追加説明は補足要求でご指示ください。
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- kamoto
- ベストアンサー率41% (26/62)
loveoboさん、こんにちは。#1のkamotoです。 その後いかがですか? table widthは、A4でしたら590ぐらいでも大丈夫だと思いますよ。 でも読みやすいのはだいたい550ぐらいでしょうか…。 ところで、1件ずつ<tr>で区切っているのですよね? <tr>の中でも<br>によっていくつもの項目が区切られているんでしょうか。 あまりうまく想像できていないのですが、 あとは<tr valign="top">で高さをそろえて、 改行されても見にくくならないようにしておいて、 widthはブラウザにおまかせしておけば、 だいたいコンテンツの長さに合わせてくれるのでは ないかと思います。 うーん、いまいちな回答でごめんなさい。
- kamoto
- ベストアンサー率41% (26/62)
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%" ずつの明示でやってみます。
お礼
> その後いかがですか// 気にかけていただき、ありがとうございます。このサイトの醍醐味です。 > 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とも 無駄なく印刷できるようです。中途半端な指定が裏目に出てました。