0

我有一个表格显示在表格中。在第三列中，有 4 行用于选择首选的联系方式（单选按钮）。我目前正在使用标签在第一行中写入此文本。但是，有人告诉我，它看起来不如使用自定义图像好。

该图像应该很好地位于表单内容中，并带有指向这些单选按钮的箭头。我认为最简单的方法是在列上设置固定宽度，然后将表格的背景图像设置为我得到的图像并将其（带有背景位置）定位到它应该放置的位置。设置列宽后，应该不会出现对齐问题。

关于如何做到这一点的任何其他想法？

4

1 回答 1

0

我的建议：不要将背景放在桌子上，而是将背景放在 rowspan=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 回答