0

テーブルに表示されるフォームがあります。3 番目の列には、優先する連絡方法 (ラジオ ボタン) を選択するための 4 つの行があります。現在、このテキストを最初の行に書き込むためにラベルを使用しています。ただし、カスタム イメージを使用するほど見栄えがよくないと言われています。

画像は、これらのラジオ ボタンを指す矢印を使用して、フォーム コンテンツの中にうまく配置されるはずです。これを行う最も簡単な方法は、列に固定幅を設定し、テーブルの背景画像を与えられた画像に設定し、(背景位置で) 配置する場所に配置することだと考えました。列幅が設定されていれば、配置の問題はありません。

これを行う方法に関する他のアイデアはありますか？

4

1 に答える 1

0

私の提案: テーブルに背景を配置する代わりに、rowspan=3 のテーブル セルに背景を配置します。つまり、3 つのラジオ ボタンすべての右側の領域をカバーします。このテクニックを説明する HTML サンプルを次に示します。画像が適切に収まるように、各列 (およびそれを囲む表) のサイズを慎重に調整する必要があることに注意してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table.contactForm
{
    background-color:#EBF3F7;
    width:681px;
} 
table.contactForm td
{
    text-align:left;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:0px;
    padding-right:0px;
    white-space:nowrap;
    height:25px;
}
table.contactForm td.first
{
    width:200px;                
}
table.contactForm label
{
    padding-left:5px;
}
table.contactForm td.second
{
    width:200px;
    text-align:right;
}
table.contactForm td input[type=text]
{
    width:180px;                
}
table.contactForm td.third
{
    width:20px; 
    text-align:right;
}
table.contactForm td.imageArrows
{
    background-image:url(background.jpg);
    background-repeat:no-repeat;
    background-position:left center;
    width:261px;
    height:78px;
    padding:0px;
}

</style>
</head>

<body>
<table class="contactForm">
<tr>
<td class="first"><label for="FullName">Full Name</label></td>
<td class="second"><input type="text" name="FullName" /></td>
<td></td>
</tr>
<tr><td colspan="4"><br/></td></tr>
<tr>
<td class="first"><label for="Phone">Phone</label></td>
<td class="second"><input type="text" name="Phone" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
<td rowspan="3" class="imageArrows"></td>
</tr>
<tr>
<td class="first"><label for="Mobile">Mobile</label></td>
<td class="second"><input type="text" name="Mobile" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
<tr>
<td class="first"><label for="Email">Email</label></td>
<td class="second"><input type="text" name="Email" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>

</table>
</body>
</html>
于 2009-11-09T20:02:08.843 に答える