ライブビュー時の<th>の幅

CS5のDWを使用しております。
Magical Form を拝借しまして、フォームメールを作成中です。
コーディングは初心者で、PHPの知識はありません。

<table border="0" cellspacing="0" cellpadding="0" width="800px" >
<tr>
<th valign="top" class="top">お客様名<span class="hissu">*</span></th>
<td class="top"><input type="text" name="name" size="45"><br><font color="#FF0000" size="-2">※法人の場合は正式な会社名</font></td>
</tr>
<tr>
<th valign="top">フリガナ<span class="hissu">*</span></th>
・
・
・（以下略）

と、テーブルで作っております。

「ライブビュー」でないときは、<th>の幅が自然です。（指定していませんが130pxほどです）

しかし「ライブビュー」、または「ブラウザーでプレビュー」すると、幅が約43pxになってしまいます。

何が原因なのでしょうか？

上に少しテーブルを載せましたが、載せていない他の部分が原因ということも考えられるのでしょうか？

ちなみに、元のindex.phpをform.phpに変えています。サイト内のindex.htmlと競合がかかりそうな気がしたので・・・

記述不足があればおっしゃってくださいませ＞＜

どうぞ宜しくお願い致します。

No.1 回答者： naokita 回答日時： 2012/03/07 19:20

<th valign="top" class="top" style="width: 130px;">お客様名<span class="hissu">*</span></th>

セルの幅指定がブラウザ任せだから。
style="width: 130px;"


<table id="form1">
<tr>
<th class="top">お客様名<span class="hissu">*</span></th>

#form1{ width: 800px;}
#form1 th{ width: 130px; vertical-align: top;}

この回答へのお礼

ご回答ありがとうございます！
指定しないとブラウザ任せになってしまうのですね・・・
今まで特に指定しなくてもうまくいっていたので、知らなかったです＞＜

ありがとうございました！

お礼日時：2012/03/08 16:39

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/03/07 23:58

tableの各セルの巾は、

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　著者が列幅情報を指定していない場合、ユーザエージェントは適切な幅を割り当てるために列のデータ全体が届くのを待たねばならないため、逐次的整形をすることはできない。
　ある特定のコマにおいて、内容に対して列幅が狭すぎると判明した場合、ユーザエージェントは表を再整形することを選択してよい。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［11.表　2.表を構成する諸要素 4.列幅の計算
( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　ブラウザは、可能な限りすべての行においてバランスよくなるように、すべてのデータを受け取ってから列幅を計算します。
　そこで、あらかじめ巾を決めておくと良いです。

<table border="0" summary="入力" width="800">
　　<tbody>
　　<tr>
　 　　　<th class="hissu" width="60">お客様名</th>
　　 　　<td><input type="text" name="name" size="45" value=""><span class"note">※法人の場合は正式な会社名</span></td>
　　 </tr>
　　 <tr>
　　 　　<th class="hissu">フリガナ</th>
　　 　　<td><input type="text" name="furigana" size="45" value=""></td>
　　 </tr>
・・・
★tableにsummary属性は必須です。
★くかもりでは、widthの値が数値のときは単位をつけてはなりません。800とかけばpxと判断されます。
★tbodyは出来るだけ書きましょう。(仕様上はtable直下にtrは入らない。HTMLでは必須)
　<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
★<font>は非推奨です。HTML5では廃止

そのうえでスタイルシートで
table.form{
border-collapse:collapse;
width:80%;/* スタイルシートの指定が優先されます。*/
table.form th,table.form td{
vertical-align:top;/* これらはスタイルシートで指定すべき */
}
table.form th.hissu:after{content:"*";color:red;}
table.form td span.note{color:red;font-size:0.8em;}

とか、class名をいちいちつけなくても良いです。実はこの場合tableにclass名formをつけなくても
table[summary="入力"]{}でもよい。
　つけるときも、文書の意味がわかるように記述します。
CSSに
table.form td span.note{}と書かれていたら、formのtableのセルのnote(注意書き)だとわかる。

★巾が決まらないのは、巾が指定してないからです。後でスタイルで追記するにしても、早い段階--一行目--で指定しておくと良い。

　なお、tableを使わないほうが楽かもしれません。
テーブルタグを使ってフォームを作成してるのですが… - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7314941.html#a4 )

この回答へのお礼

ご回答ありがとうございます！
ものすごーく詳しく書いて下さって・・・ありがとうございます！；；
大げさかもしれませんが、人の優しさってすごいなぁと思いました。

1つずつ、理解しながら読み進めていきたいと思います！

ありがとうございました！

お礼日時：2012/03/08 16:45