tableタグ内のformの扱いについて

質問

ホームページを修正していてブラウザによって表示が違うので、その対処方法を知りたくて質問します。

知りたいことはブラウザによって極端にテーブルが崩れてしまうので、修正しているのですがあまりにも量が多くて処理に時間がかかるため・・・私の事情なので割愛します。

要件は
firefox16では正常に表示されるのですが、ie8で表示すると崩れてしまいます。
その他サファリ、クロームでも確認しましたが、理想通り表示されます。

http://android-style.sakura.ne.jp/help_test/contact.html

検索していろいろ調べてみましたが、tableの中にformを入れないようにすると言うアドバイス以外ありません。。。
なにかいい対処方法やアドバイスお願いします。

よろしくお願いします。

回答No.6

ORUKA1951 · ベストアンサー

＞ごめんなさい「あまりにも量が多い」と言うのは「引き継いだ量が多いのでと・・・」
　そうなんですか？？
　私は、それが仕事なので、確かに他人の書いた糞--失礼---を直すのは大変です。

　結局、私が示ししたように、コツコツ地道に直していくしかありません。修正方法は、サンプルを参考にしてください。そして、二つを提示してその作業が以下に大変かを理解してもらうしかありませんね。

　ただ、ごらんのようにHTMLもスタイルシートも数分の一、データ転送量は数十分の一になります。
　私は対価を頂くのですが、やはり苦痛です。・・そうでないとしたら投げ出したくなりますよね。重要なところから徐々に直しましょう。
　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
の[DATA]タブを使うと楽ですよ。あまりにエラーが多ければ、とりあえず
The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input )
やfirefoxのHTML Validator( https://addons.mozilla.jp/firefox/details/249 )を使って、重要なものだけでも

お礼

リンク先ありがとうございます。

10本20本ならコツコツ直すのが楽かなって思いましたが、ちょっと数が多かったので質問してみました。

また初歩的な質問しますが、宜しくお願いします。
ありがとうございました。

回答No.5

神崎 渉瑠（@taloo）

>No.2補足

修正の仕方が悪い、
修正の仕方が不十分、
該当箇所は修正されたが、新たに別の不具合を発生する書き方（間違った書き方）を作った、
などの理由が考えられます。

どんな風に作られたのかわからないと、何が悪いかのアドバイスは出来ません。

回答No.4

ORUKA1951

たびたびすみません。
<input type="reset"はひとつの<form></form>内に書かないと意味がありません。

回答No.3

ORUKA1951

折り返し忘れてたので
html,body{margin:0paddin:0;background-color:navy;}
form table{
font-size:0.9em;
border-collapse:collapse;
border-color:rgb(147,147,255);
border-style:solid;border-width:0 10px;
background-color:white;
line-height:3em;
width:50%;margin:0 auto;
}
form table th{background-color:rgb(230,230,230);text-align:left;white-space:nowrap;}
form table span.Required:before,
form table tr.Required th:before{
content:"[*]";color:red;
}
form table tr.Required input,form table tr.Required textarea{border-color:red;}
form table th{line-height:1.6em;}
form table th span.memo{font-weight:normal;}
form table th span.memo:before{content:"\A";white-space:pre;}
form table tr+tr{border-bottom:silver 2px solid;}
form table td{padding:2px 5px;}
form table td[colspan="2"]{text-align:center;}
form table td[colspan="2"] input+input{margin-left:5em;}
form table input[type="text"],form table textarea,form table select{background-color:rgb(230,230,230);}

　HTMLにはデザイン的な要素がまったく含まれていないので、サンプルの形にすることは無論、どのようなデザインも自由です。
　⇒2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )

＞あまりにも量が多くて処理に時間がかかるため・・・
　ご自身で複雑にしているだけです。HTMLに余計な細工をせずにシンプルに文章構造だけ書けば難しくはありません。
　必須項目はRequiredとclass名をつけておく・・たったそれだけ。さらに多重にdivやspanで囲む必要はありません。

＞ブラウザによって表示が違うので、その対処方法を知りたくて
　まずHTMLを正しく書くこと・・・これがすべての基本です。ブラウザによって表示が異なる最大の要因は、HTMLが正しくないことです。その上で標準モードで動作するようDOCTYPEスイッチ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )を記述しておけば、ほぼ解決するはずです。

お礼

ありがとうございます。
ごめんなさい「あまりにも量が多い」と言うのは「引き継いだ量が多いのでと・・・」
「このホームページ直して欲しい」と頼まれて最初から作るとなると時間がかかるので、いい案探してました。

質問掲示板に投稿すると、論点がズレるので割愛しました。

スタイルシートありがとうございます。

回答No.2

神崎 渉瑠（@taloo）

まず、<form>の入れ子は許されません。

<form><form>・・・</form></form>

また、開始タグ、終了タグが他のタグと入れ違いになっている箇所があります。
<form><table></form></table>という順番になるのは許されません。
<form><table></table></form>と、開始タグ-終了タグがセットになるように入れ子にして行ってください。

また、<td>この部分や</td><td>この部分</td> に文章や他のタグを書き入れる事は出来ますが、
<td></td> この部分 <td></td> に書く事は出来ません。

目立つところでは、「内容を確認する」ボタン周辺に文法違反の書き方がありますので、その部分を修正すれば、おおよそ全てのブラウザで期待通り表示されるようになると思います。

補足

ありがとうございます。
<form>の入れ子は出来ないのは知っているのでやっていませんでしたが、</td>ここに<td><form>等を置いたりしていたので、修正してみました。
しかし・・・変化ありませんでした。
ieは崩れっっっっぱなしです。。。

<td></td> この部分 <td></td>は「内容を確認する」あたりの事だと思いますが、すべて<td></td>に入れましたらが変化が無い状態です。

一応いろんな所に置いてみたのですが、ieだけがダメなのです。

またいいアドバスあったらお願いします。

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

回答No.1

ORUKA1951

★文法間違いがあまりにも多いです。
　ブラウザは、足りないところを追加したり、あってはならないものを取り除いたりして、可能な限り表示を試みますが、それはブラウザによって処理が異なります。結果的にブラウザによって表示が異なる原因になります。
　また、DOMも異なってしまうためスタイルシートが思うように適用できなかったりで良いことはひとつもありません。
　⇒メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )
★HTMLを作成したら、下記サイトなどでチェックしておきましょう。
　⇒Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
★デザインのために&nbsp;や画像を使うのは誤りです。

下記はサンプルですが、とってもシンプルでしょ!!そしてわかりやすい
・必須項目(Required Item)はRequiredとclass名をつける。
・余計なDIVなんてない。(DIVは他に適当な要素がないときのみ使う)

★タブは＿に置換してあるので戻すこと
★HTML4.01strictとCSS2.1です。ウェブ標準
　⇒Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
でチェック済み
　--HTML5のことを考えるとHTML4.01strictのほうが良いでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル0</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
html,body{margin:0paddin:0;background-color:navy;}
form table{
font-size:0.9em;
border-collapse:collapse;
border-color:rgb(147,147,255);
border-style:solid;border-width:0 10px;
background-color:white;
line-height:3em;
width:50%;margin:0 auto;
}
form table th{background-color:rgb(230,230,230);text-align:left;white-space:nowrap;}
form table span.Required:before,
form table tr.Required th:before{
content:"[*]";color:red;
}
form table th span.memo{font-weight:normal;}
form table tr+tr{border-bottom:silver 2px solid;}
form table td{padding:2px 5px;}
form table td[colspan="2"]{text-align:center;}
form table td[colspan="2"] input+input{margin-left:5em;}
form table input[type="text"],form table textarea,form table select{background-color:rgb(230,230,230);}
-->
＿</style>
</head>
<body>
＿<form method="post" action="/help_test/contact.html">
＿＿<table summary="form">
＿＿＿<tbody>
＿＿＿＿<tr>
＿＿＿＿＿<td colspan="2">
＿＿＿＿＿<input type="hidden" name="m" value="1">
＿＿＿＿＿ご意見・ご感想をお聞かせください。<span class="Required">は必須項目です</span></td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="社名">会社名<span class="memo">（法人の方のみ）</span></th>
＿＿＿＿＿<td><input size="30" maxlength="30" name="inp_syamei" type="text" value=""></td>
＿＿＿＿</tr>
＿＿＿＿<tr class="Required">
＿＿＿＿＿<th abbr="氏名">お名前</th>
＿＿＿＿＿<td><input size="30" maxlength="30" name="inp_name" type="text" value=""></td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="Tel">お電話番号</th>
＿＿＿＿＿<td><input size="12" maxlength="12" name="inp_tel" type="text" value=""></td>
＿＿＿＿</tr>
＿＿＿＿<tr class="Required">
＿＿＿＿＿<th abbr="mail">E-mail</th>
＿＿＿＿＿<td><input size="40" maxlength="60" name="inp_mail" type="text" value=""></td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="country">都道府県</th>
＿＿＿＿＿<td>
＿＿＿＿＿＿<select name="inp_region">
＿＿＿＿＿＿＿<option value="0" selected>--------</option>
＿＿＿＿＿＿＿<option value="1">北海道</option>
＿＿＿＿＿＿＿<option value="2">青森県</option>
＿＿＿＿＿＿＿<option value="3">岩手県</option>
＿＿＿＿＿＿＿<option value="47">沖縄県</option>
＿＿＿＿＿＿</select>
＿＿＿＿＿</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="address">住所</th>
＿＿＿＿＿<td><input size="30" maxlength="40" name="inp_address" type="text" value=""></td>
＿＿＿＿</tr>
＿＿＿＿<tr class="Required">
＿＿＿＿＿<th abbr="meaasge">お問い合わせ内容<span class="memo">[300文字程度]</span></th>
＿＿＿＿＿<td><textarea name="inp_value" cols="30" rows="5">ここにお書きください</textarea></td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td colspan="2">
＿＿＿＿＿＿<input type="submit" name="submit" value="内容を確認する">
＿＿＿＿＿＿<input type="reset" value="リセット">
＿＿＿＿＿</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿</form>
</body>
</html>