HTML CSS表格背景

Question

我有一个表格，它以表格的形式呈现。在第三列中，有4行用于选择首选的联系方式(单选按钮)。我目前正在使用标签将此文本写入第一行。然而，有人告诉我，它看起来并不像使用自定义图像那样好。

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

关于如何做到这一点，还有其他的想法吗？

Answer 1

我的建议是:不要把背景放在表格上，而是用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>