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

回答

相關問題