一番右のC列は左頭揃えでテキストを流し込み自動改行で文字数によって高さが伸びて
いきます。IEや、ネスケでちゃんと表示されるのですが、ビルダーで開いたら、B列とC列の
間に空間が出来て、C列が細長い列になってしまいます。以下のソースでテーブルが崩れる
問題点などありましたら、ご指摘ください。
<table border=1 cellspacing=0 cellpadding=0 width=500>
<tr><td colspan=”3”>幅500見出し</td></tr>
<tr><td width=”30”>A幅30</td>
<td align=left width=”170”>B=幅170</td>
<td align=left width=”300”>C=幅300のテキストスペースになります。幅300のテキストスペースになります。</td></tr>
</table>
http://www.hatena.ne.jp/1080559305#
HTMLテーブルについて質問です。幅500で、1行目の見出しの下は3列に分かれ、 一番右のC列は左頭揃えでテキストを流し込み自動改行で文字数によって高さが伸びて いき.. - 人力検索はてな
>B列とC列の間に空間が出来て、C列が細長い列になってしまいます。
上記の状態がいまいち分かりませんが、
これでどうでしょうか?
<table border=1 cellspacing=0 cellpadding=0 width=500>
<tr><td colspan=”3”>幅500見出し</td></tr>
<tr><td width=”30”>A幅30</td>
<td align=left width=”170”>B=幅170</td>
<td align=left width=”300”>C=幅300のテキストスペースになります。幅300のテキストスペースになります。</td></tr>
</table>
”⇒”に変更しました。
Yahoo! JAPAN
URLはダミーです。
ビルダーを持たないので具体的ではありませんが、
IE、NN、Opera(いずれもWin版)、どれでみても正常に見え、言われるような表示はされません。
ですので、特に思い当たることはないのですが、私なら「colspan=3」の後に「width=500」を念のために入れておきます。(これが解決策とは限りませんが…。)
ありがとうございまず。
念のため、「width=500」を入れてみる事にします。実は私自身もビルダーを持っていず、別の方の指摘(ただその方自体がHPに詳しくないので原因判らず)だったので、これで解決できるかは不明なので、質問を続行させていただきます。
上記の説明わかりずらくてすみません。
もし、実際ビルダーを使っていらっしゃる方で問題点など思い当たる事がありましたら、ご指摘ください。
MSN Japan
Aで30と指定し
Bで170と指定し
Cで300と指定して
テーブルの幅は特に指定しなければよいと思います。
<table border=1 cellspacing=0 cellpadding=0>
<tr>
<td colspan=3>見出し 幅 500</td>
</tr>
<tr>
<td width=30>A 幅 30</td>
<td width=170>B 幅 170</td>
<td width=300>C 幅 300 テキストスペース</td>
</tr>
</table>
なる程。ソースとしては、どちらも間違っていないように思えるのですが(今まで、なるべく細かくサイズ設定した方がテーブルは崩れにくいと思っていたのですが。。^^;)
ドリームウエーバーやゴーライブでも表示確認OKだったので、崩れてしまう要因などもう少し詳しく教えていただけるとありがたいです。
特に大きな問題はありませんが
align=leftはalign=”left”にするべきでしょう
逆にwidth=”300”はwidth=300でかまいません
現状ではIEとネスケで確認すれば十分だと思います
すみません。上記でも書いたのですが、はてなで”が化けてしまうため、一部省略して書いてしまいましたが、実際は全部入れています。
中途半端でごめんなさい。
「現状ではIEとネスケで確認すれば十分だと思います 」そうですね。ブラウザで見れればよしとするべきか・・。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
Another HTML-lint gateway
>>HTML文書の文法をチェックし、採点します。
Mac OS XおよびSafari、IE、Firefox、Mozilla、Opera、iCabで検証しましたがOKでした。
ありがとうございます。
どなたか、ビルダーユーザーで詳しい方はいらっしゃいますでしょうか?
http://www.kanzaki.com/docs/html/htminfo16.html
テーブル -- ごく簡単なHTMLの説明
<table border=”1” cellspacing=”0” cellpadding=”0” width=”500”>
<tr>
<td colspan=”3”>幅500見出し</td>
</tr>
<tr>
<td width=”30”>A幅30</td>
<td align=left width=”170”>B=幅170</td>
<td align=left width=”300”>C=幅300のテキストスペースになります。幅300のテキストスペースになります。</td>
</tr>
</table>
・・どの部分が問題で、上記サイトのどの部分に解説があるのでしょうか?
MSN Japan
> 崩れてしまう要因などもう少し詳しく教えていただけるとありがたいです。
自分もビルダーは持っていないのでなんとも言えないのですが、
スクリプトを単純化して原因を探るというのはどうでしょうか?
<table border>
<tr>
<td colspan=3>abc</td>
</tr>
<tr>
<td width=30>aaa</td>
<td width=170>bbb</td>
<td width=300>ccc</td>
</tr>
</table>
これでも崩れるならビルダーの方に原因があるとも考えられます。
これで崩れなければ、
cellspacing=0 cellpadding=0 width=500
を1つずつ入れて確認すれば原因を絞り出す事が出来ると思います。
ありがとうございます。
問題の消去法としてはありですね。
<table border=1 cellspacing=0 cellpadding=0 width=500>
のところを
<table border=”1” cellspacing=”0” cellpadding=”0” width=”500”>
になおしてみました。
基本に戻れと言うことで。(^^)
”に関しては、上記にコメントした通り、
実際作成したソースにすべて入れています。
・・・基本的なテーブルタグの問題だとしたら、
今まであげて頂いた感じで全てでしょうか。。
以下はスミマセンが同じ様なコメントはご遠慮ください。
ビルダー、もしくは、ブラウザに特化する問題点などありましたら、具体的にお願いします。
http://www-6.ibm.com/jp/software/internet/hpb/
IBM 「PCサイトも携帯サイト作成もおまかせ!」ホームページ・ビルダー - Japan
ビルダーVer6.5ライトを使用しています。
conyさんのソースをそのままコピーして試してみましたが、おっしゃるようなテーブルの崩れは見当たらず、正確に表示されました。
以下余談ですが……一つ気になったのは、
下列の3マスは「セル幅」を固定しているにもかかわらず、
見出しの部分だけセル幅の固定をせずに「テーブル全体幅の固定」をしているところです。
実際私もビルダーで試してみましたが、
ソース1行目のテーブルタグで幅を500に固定した場合と、2行目の見出しのセルタグで幅を500に固定した場合では、
プレビューの際のテーブル幅が違っていました。
私の憶測ではありますが、セル幅の数値(この場合は30、170、300の、「テーブルラインの幅を含んでいない“セル幅のみ”」の数値)と
テーブル幅の数値(この場合はテーブルタグで表記されている500の、「テーブルラインの幅を含んだ“テーブル全体”」の数値)双方の数値が合致していないために生じた崩れではないでしょうか。
上記でvicdenさんがおっしゃっておられるように、
ソース1行目のテーブルタグにある「width=”500”」をソース2行目の見出しの部分に付け替えてみてください。
もしかしたら解消されるかもしれません。
ビルダー使用者として、私のバージョンのビルダーでは不具合は見当たらなかったということだけお伝えいたします。
余談が長すぎたことをお詫びいたします。ポイントは結構です。
>余談が長すぎたことをお詫びいたします。ポイントは結構です。
とんでもありません。擬態的に指摘して頂き、ビルダーでの状況も教えていただけ、大変参考になりました。やはり、セル幅指定が鍵かもしれませんね。
ビルダーで自分で試して今すぐ結果を報告できないのが申し訳ありません。明日、早速不具合を指摘してくれた方にビルダーで皆さんの指摘してくださった問題点を検証してみます。ありがとうございました。
”⇒”
すみません。この記号の事でしたら、はてなに記載される時、自動変換されてしまう様です。