- ベストアンサー
テーブルタグを使ったシンプルなフォーム作成方法
- テーブルタグを利用してシンプルなフォームを作成する方法についてご紹介します。
- フォームのthとtdに線を入れ、ラインを追加する方法について考えています。
- 最新技術を使わずに、上下の線を途切らせずにスペースを設けながらラインを追加する方法を教えてください。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
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"> <!-- table[summary="mailForm"]{ border-collapse:collapse; border:gray 1px solid; background-color:silver; } table[summary="mailForm"] th, table[summary="mailForm"] td{ padding:5px 1em; text-align:left; } table[summary="mailForm"] tr+tr th, table[summary="mailForm"] tr+tr td{ border-top:gray 1px solid; line-height:1.6em; } table[summary="mailForm"] th span{ display:block; width:100%;height:100%; border-right:2px red solid; padding-left:0.5em; } table[summary="mailForm"] th span.required:after{ content:"*"; color:red; } --> ＿</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>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
わざわざめんどくさい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; }
お礼
ご回答ありがとうございました。 複数、ベストアンサーを選べるのであれば確実にそうさせていただいたのですが… すみません。 テーブルを使用しないでという発想がなかったので、とても勉強になりました。 あまりのシンプルさにびっくりです。 これを機会にこちらに移行しようと思っております。 重ね重ねありがとうございました。
- tracer
- ベストアンサー率41% (255/621)
いろんな方法が考えられますが、理屈として一番理解しやすいのは、tr、th、tdの背景をなしにして、tableの背景にボーダーを引く方法ではないでしょうか。thの幅が決まっているのであれば、簡単な方法だと思います。ただ、理屈が簡単というだけで、ベストプラクティスではないですが。 table{ background:#任意の色 url(ボーダ画像のパス) thの幅px 0 repeat-y; } tr,td,th{ background-color:transparent; }
お礼
ご回答ありがとうございました。 なるほど、と思わされました。 研究対象にさせていただこうと思っております。 重ね重ねありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。よく考えてみると、反ってtableを使わないほうが楽ですね。
お礼
ご回答ありがとうございました。 しかもテーブルでの実現に加えてとてもご丁寧なソースにも感謝です。 重ね重ねありがとうございました。 しかしあれだけのことなのにテーブルでするとなると、 出来なくはないけれどこんなにも手間がかかるのかということを思い知らされました。 でもとても勉強になりましたです。 重ね重ねありがとうございました。