表格HTML邊框

我在使用我的HTML電子郵件模板時遇到了一些困難。我是這個HTML世界的新手，這是我的第一個電子郵件模板。我無法使用<div>標籤這一事實讓我很頭疼。表格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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Fashion Newsletter</title> 
<style type="text/css" > 
body { 
    font: Georgia, "Times New Roman", Times, serif; 
} 

</style> 
</head> 

<body> 
<!--For Three Columns--> 

<table align="center" width="600" cellpadding="0" cellspacing="0" bgcolor="#000" > 
    <tr> 
    <td width="180"> 
     <a href="#link"> 
      <img src="images/180.gif" /> 
     </a> 
     </td> 
    <td width="180"> 
     <a href="#link"> 
      <img src="images/180.gif" /> 
     </a> 
     </td> 
    <td width="180"><p class="three"> 
     <a href="#link"> 
      <img src="images/180.gif" /> 
     </a> 
     </p></td> 
    </tr> 
</table> 
</body> 
</html>

我刪除代碼「獨柱」表，因爲單個列代碼工作的罰款。我還有意添加bgcolor="#000"，以便我可以看看發生了什麼。

摘要：

如果你看着截圖，我基本上要減小兩個<td>標籤，即兩列之間的空間。
我想刪除

來源

2013-06-23 Vaibhav Sharan

我可能是錯的，但是，它看起來像你設置你的表爲600px，每列爲180px。這可能會導致列之間的黑色區域。 – SlitCanvas

table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#000" class="box" > 
<tr> 
<td width="180"> 
    <a href="#link"> 
     <img src="images/180.gif" />  </a>  </td> 
<td width="180"> 
    <a href="#link"> 
     <img src="images/180.gif" />  </a>  </td> 
<td width="180"><p class="three"> 
    <a href="#link"> 
     <img src="images/180.gif" />  </a> 
    </p></td> 
</tr> 
</table>

添加CSS樣式，你可以玩的，並得到你想要的外觀，是在表的末尾所產生的空間（右，黑色）：

.box { 
background-color: #FFFFFF; 
margin: 2px; 
padding: 2px; 
width: 600px; 
border-top-width: 2px; 
border-right-width: 1px; 
border-bottom-width: 2px; 
border-left-width: 1px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #000066; 
border-right-color: #990000; 
border-bottom-color: #00FF33; 
border-left-color: #FF0000; 
}

來源

2013-06-23 13:15:36

謝謝。有效：） –

試試這個; 在table tag style =「border-style：solid; border-width：2px 0px 2px 0px;」

來源

2013-06-23 13:22:32 user2512996

試試這個。基本上，使寬度爲160px的table，在圖像之間放置10px td。也可能需要刪除第三列的p標記以避免不必要的邊距/填充。

如果您想要保持寬度爲600px的table，只需在第一列之前和第三列之後添加20px td即可。

<table align="center" width="560" cellpadding="0" cellspacing="0" bgcolor="#000" > 
    <tr> 
    <td width="180"> 
     <a href="#link"> 
      <img src="images/180.gif" /> 
     </a> 
     </td> 
    <td width="10"></td> 
    <td width="180"> 
     <a href="#link"> 
      <img src="images/180.gif" /> 
     </a> 
     </td> 
    <td width="10"></td> 
    <td width="180"><a href="#link"> 
      <img src="images/180.gif" /> 
     </a></td> 
    </tr> 
</table>

來源

2013-06-23 17:07:57 hmhcreative

回答

相關問題