我有一个在表格中显示的表格。在第三列中，有 4 行用于选择首选联系方式(单选按钮)。我目前正在使用标签将这段文字写在第一行。然而，有人告诉我，它看起来不如使用自定义图像好。
图像应该很好地位于表单内容中，并带有指向这些单选按钮的箭头。我认为最简单的方法是在列上设置固定宽度，然后将表格的背景图像设置为我得到的图像并将它(使用背景位置)定位到它应该坐的位置。设置好列宽后，应该不会出现对齐问题。
关于如何做到这一点还有其他想法吗？
最佳答案
我的建议:不要将背景放在表格上，而是将背景放在 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>
关于HTML CSS 表格背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1699391/