HTML CSS表背景

我有一个表格在表格中呈现。在第三栏中，有4行用于选择首选的联系方式（单选按钮）。我目前正在使用标签在第一行中写入此文本。然而，我被告知，它看起来不如使用自定义图像好。HTML CSS表背景

图像应该在指向这些单选按钮的箭头之间很好地坐在表单内容之间。我认为最简单的方法是在列上设置一个固定的宽度，然后将表格的背景图像设置为我已经给出的图像，并将它放置在背景位置。在设置列宽的情况下，不应该存在对齐问题。

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

来源

2009-11-09 Pilot

如果您可以向我们提供链接或图片，那么它会更有帮助。 – rahul 2009-11-09 06:38:17

如果没有示例页面在线，代码示例就足够了，但屏幕截图（最好标记为）或至少一个链接更好。凤凰是对的。 – 2009-11-09 06:41:14

对不起，链接到表单的外观：http://imagebin.ca/view/yhuZbw.html。除了单选按钮被排列在右边外，这就是结构目前的样子。但这很容易改变。 – Pilot 2009-11-09 06:47:31

我的建议：不要将背景放在桌子上，而应将背景放在带有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-09 20:02:08

HTML CSS表背景

回答

相关问题