テーブルタグを使ってフォームを作成してるのですが…

解決済

質問者：tobimori
質問日時：2012/02/19 17:56
回答数：4件

ごくごくシンプルなフォームのページを、テーブルタグを利用して作成しています。
thとtdのborder-bottomに線を入れた、至ってシンプルなものです。
そこでふと、画像のようにthの項目名とtdの入力スペースの間に、
区分するためのラインを入れるにはどうしたら良いのだろうかと思ったのです。
cellpaddingを指定してみたり、tdに背景を配置したらどうだろうかとか
あれこれ考えてみたのですが思うような答えにたどり着けませんでした。

画像のように、上下の線を途切らせず、かつ、上下の間にスペースを設けた上で、
区分するためのラインの入れ方、ご存じの方いらっしゃいましたらご教授いただけませんでしょうか。

ただし、jQuerytoやHTML5など最新技術は使わないシンプルな手段に限らせていただきます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2012/02/19 18:43

HTML4.01strict

CSS2.1
です。

sapnで括って、それをblockにして高さと巾をいっぱいに広げて、右側にborder
タブは、＿に置換してある。
CSS2.1の
タイプセレクタ
子孫セレクタ
要素セレクタ
擬似要素セレクタ(*)
をつかってある。(*)未対応のブラウザを対象とするなら直接HTMLに書く。

<!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>サンプル</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">

＿</style>
</head>
<body>
＿<h1>サンプル</h1>
＿<table summary="mailForm">
＿<tbody>
＿＿<tr>
＿＿＿<th abbr="名前"><span class="required">お名前(漢字)</span></th>
＿＿＿<td><input type="text" size="20" name="name" value=""><td>
＿＿</tr>
＿＿<tr>
＿＿＿<th abbr="お名前"><span class="required">お名前(フリガナ)</span></th>
＿＿＿<td><input type="text" size="40" name="yomi" value=""><td>
＿＿</tr>
＿＿<tr>
＿＿＿<th abbr="〒"><span>郵便番号</span></th>
＿＿＿<td>〒<input type="text" size="10" name="zip" value="">例 000-0000<td>
＿＿</tr>
＿</tbody>
＿</table>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
しかもテーブルでの実現に加えてとてもご丁寧なソースにも感謝です。
重ね重ねありがとうございました。
しかしあれだけのことなのにテーブルでするとなると、
出来なくはないけれどこんなにも手間がかかるのかということを思い知らされました。
でもとても勉強になりましたです。
重ね重ねありがとうございました。

通報する

お礼日時：2012/02/21 21:59

No.4

回答者： ORUKA1951
回答日時：2012/02/21 19:42

わざわざめんどくさいtableを使わなくても。

定義リストを使うほうかシンプル・・

<dl class="mailForm">
＿<dt class="required">お名前(漢字)</dt>
＿<dd><span><input type="text" size="20" name="name" value=""></span></dd>
＿<dt class="required">お名前(フリガナ)</dt>
＿<dd><span><input type="text" size="40" name="yomi" value=""></span></dd>
＿<dt>郵便番号</dt>
＿<dd><span>〒<input type="text" size="10" name="zip" value="">例 000-0000</span></dd>
</dl>

dl.mailForm{
＿border:1px solid #999;
＿border-top-width:0;
＿background:silver;
}
dl.mailForm dt {
＿float:left;
＿width:10em;
＿border-top:1px solid #999;
＿padding:10px 0 0 1em;
}
＿dl.mailForm dd span{display:inline-block;border-left:gray 2px solid;padding-left:1em;}

dl.mailForm dd {
＿margin-left:10em;
＿padding:10px 0 10px 10px;
＿border-top:1px solid #999;
}

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
複数、ベストアンサーを選べるのであれば確実にそうさせていただいたのですが…
すみません。
テーブルを使用しないでという発想がなかったので、とても勉強になりました。
あまりのシンプルさにびっくりです。
これを機会にこちらに移行しようと思っております。
重ね重ねありがとうございました。

通報する

お礼日時：2012/02/21 21:56

No.3

回答者： tracer
回答日時：2012/02/21 16:03

いろんな方法が考えられますが、理屈として一番理解しやすいのは、tr、th、tdの背景をなしにして、tableの背景にボーダーを引く方法ではないでしょうか。

thの幅が決まっているのであれば、簡単な方法だと思います。ただ、理屈が簡単というだけで、ベストプラクティスではないですが。

table{
background:#任意の色 url(ボーダ画像のパス) thの幅px 0 repeat-y;
}

tr,td,th{
background-color:transparent;
}