HTMLセル結合にフォームを組み込む場合の幅指定

質問

HTMLの表組を利用しています。
２行４列のうち１行をセル結合して入力テキストを設けたいのですが，
テキストボックスの幅を広げると下の行の列幅まで変わるという事象に悩んでいます。

下の行のセルで個別に幅を指定すれば解決するのは分かったのですが，
行が増えた時に面倒になるので，できれば＜Colgroup＞を使って一元的に指定しておきたいと
考えています。

貼付の図では，入力テキストの幅が小さい分には，下のセルは思い通りなのですが，
入力テキストの幅を広げると，下のセルの幅が狂います。

原因をご存じの方，原因と解決策をご教示いただけると嬉しいです。

回答No.1

ORUKA1951 · ベストアンサー

仕様書を一度ならず目を通されたと思いますが・・

　表を整形のために用いるのは・・

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
*・・・【中略】・・・
* ページレイアウトの目的で表を用いる。
* ・・・【中略】・・・
こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

　と明確に否定されています。
　またcolgroupは、

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
1つ以上のCOL要素を含むCOLGROUP要素にこの属性が設定されていた場合、ユーザエージェントは、これを無視しなければならない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.2.4.1 )］より

　とも書かれています。

　もちろん、form入力欄は表に入れることは、それが表である限り構いませんが、あくまでそれが表であって、整形のためではないことは理解して置いてください。

　たとえば、次のようにHTMLを書いても良いわけです。
<form>
　<dl>
　　<dt>投稿者</dt>
　　<dd>お名前:<input type="text"></dd>
　　<dd>年齢：<input type="text"></dd>
　　<dd>性別：男<input type="radio">　女<input type="radio"></dd>
　　<dt>メッセージ</dt>
　　<dd><textarea></texarea></dd>
　　<dt>・・
これを、textareaの幅に合わせてfloatさせると良い

tableを使うにしても
　<tbody>
　　<tr>
　　　<th>投稿者</th>
　　<td><span>お名前:<input type="text"></span>
　　　　　<span>年齢：<input type="text"></span>
　　　　　<span>性別：男<input type="radio">　女<input type="radio"></span>
　　　</td>
　　</tr>
　　<tr>
　　　<th>メッセージ</th>
　　　<td><textarea></texarea></td>
　　</tr>

　とかでよいはずです。これをきちんと並べるのはCSSに任せる。HTMLはあくまで文書構造（ここで言う形は意味）でマークアップする。

　入力テキスト(TEXTAREA)のサイズは、とりあえず決めておけばよいです。今のブラウザはtextareaはユーザー側で変更できますから・・
　たとえば、firefox＋resizeable Textarea( https://addons.mozilla.jp/firefox/details/3818 )でね。これもそれを使って書いている。もっと長くなれば、It's all Text( https://addons.mozilla.jp/firefox/details/4125 )を使う。

　あまりデザインにこだわるより、正しくマークアップするほうが良いかと思います。

お礼

回答ありがとうございます。
Tableを使うのはあくまでも表形式の画面であるためです。
W3Cの表の仕様について，勉強します。
参考になりました。
ありがとうございます。

回答No.2

ORUKA1951

ＣＳＳに不慣れで、かつＨＴＭＬのtableに合わせれば・・
以前回答した
テーブルの入れ子について - HTML - 教えて！goo ( http://okwave.jp/qa/q6664995.html )
　が良かろうかと
<table summary="入力フォーム" border="1" class="formTable">
　<!-- 後方互換のためborder -->
　<tbody>
　　<tr>
　　　<th abbr="項目"></th><th abbr="入力"></th>
　　</tr>
　　<tr>
　　　<td>記事</td>
　　　<td>
　　　　　<textarea cols="40" rows="20" tabindex="1">ここに記事を</textared>
　　　<td>
　　</tr>
　　<tr>
　　　<td>詳細</td>
　　　<td class="inTable">
　　　　<table summary="詳細入力" border="1">
　　　　　<tbody>
　　　　　　<tr>
　　　　　　　<td>氏名<input type="text" size="10"></td>
　　　　　　　<td>性別<input type="radio" name="sex">男　<・・・
　　　　　　</tr>
　　　　　</tbody>
　　　</td>
　　</tr>
　</tbody>
</table>

CSS
　table.formTable,table.formTable table{
　　border-collapse:collapse;
　}
　table.formTable td{
　　border:solid 1px gray;
　}
　table.formTable th{display:none;}
　td.inTable{padding:0;}
　td table{margin:0;width:100%}

お礼

回答ありがとうございます。
表形式の画面構成に対し，入力フィールドを設けた業務アプリケーションを想定しています。
デザイン性としてのカスケードを想定したのではなく，あくまでも「表」の中に表示と入力が混在している画面にしたかったのが要件です。
少なくとも，固定されたフィールドの指定としてCOLは適さない。というのが結論かと。