使用表格作爲另一個表格的邊框

試圖創建一個很好的html電子郵件，並在內容周圍有一個邊框，但還沒有弄清楚.....總會有些東西.....感謝幫幫我！使用表格作爲另一個表格的邊框

<table bgcolor="#ACD13C" width="100%" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td> 
 
     <table bgcolor="#ffffff" width="500" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
      <td>Text goes here</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2016-01-10 George

圍繞什麼內容？每個''？ – jonathanGB

是的，它會繞過整個第二張桌子。 – George

你可以用你的表在一個div，使它的背景下，綠色和width:100%，改變你的表的白色背景和它的寬度500，該margin:0 auto將集中表，像這樣：

JS Fiddle- updated

<div style="width:100%; background-color:#ACD13C; padding:50px 0; "> 
    <table style="margin:0 auto;" bgcolor="white" width="500" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td>Text goes here</td> 
    </tr> 
    </table> 
</div>

來源

2016-01-10 05:38:58

謝謝！還有一個問題。你可以在第二張桌子周圍創建像30px bgcolor/border嗎？ – George

歡迎你，第二張桌子？如果你可以把你的代碼放在小提琴中，我會檢查出你的意思 –

只有相同的代碼（div style =「width：100％...）到width =」530「纔可能如果你喜歡的話，我可以放一個小提琴 – George

類似的東西？

td { 
 
     border: 1px solid black; 
 
    }

<table bgcolor="#ACD13C" width="100%" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td> 
 
     <table bgcolor="#ffffff" width="500" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
      <td>Text goes here</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2016-01-10 05:13:16 jonathanGB

不是。它看起來像這樣 - 只有沒有頂部和底部信息（第一時事通訊）的http：//www.activecampaign.com/blog/author/kvann/。希望這會更有意義。謝謝 – George

不，我還是不明白。你能提供一個更廣泛的html和html應該是什麼樣子的圖像嗎？ – jonathanGB

請看上面的S.Rusdana例子和我的評論。 – George

做ü希望看到這樣的？

<!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>HTML Email</title> 
 
    <style type="text/css"> 
 
     body { 
 
      margin: 0; 
 
      padding: 0; 
 
      min-width: 100%!important; 
 
     } 
 

 
     .content { 
 
      width: 100%; 
 
      max-width: 600px; 
 
     } 
 

 
     .header { 
 
      padding: 40px 30px 20px 30px; 
 
     } 
 
    </style> 
 

 
    <style type="text/css"> 
 
     @media only screen and (min-device-width: 601px) { 
 
      .content { 
 
       width: 600px !important; 
 
      } 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <table width="100%" bgcolor="#ACD13C" border="0" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
      <td> 
 
       <table class="content" align="center" cellpadding="0" cellspacing="0" border="0"> 
 
        <tr> 
 
         <td class="header" bgcolor="#ffffff"> 
 
          Text goes here 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</body> 
 
</html>

來源

2016-01-10 05:30:27

是的！上面和下面都有綠色的選項嗎？ – George

@ S.Rusdana，請更新您的答案，無需在每次更改內容時發佈新答案，謝謝 –

這樣???

<!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>HTML Email</title> 
 
    <style type="text/css"> 
 
     body { 
 
      margin: 0; 
 
      padding: 0; 
 
      min-width: 100%!important; 
 
     } 
 

 
     .content { 
 
      width: 100%; 
 
      max-width: 600px; 
 
     } 
 

 
     .header { 
 
      padding: 40px 30px 20px 30px; 
 
     } 
 
    </style> 
 

 
    <style type="text/css"> 
 
     @media only screen and (min-device-width: 601px) { 
 
      .content { 
 
       width: 600px !important; 
 
      } 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <table width="100%" bgcolor="#ACD13C" border="0" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
      <td> 
 
       <table class="content" align="center" cellpadding="0" cellspacing="0" border="0"> 
 
        <tr> 
 
         <td class="header" bgcolor="#ACD13C"> 
 
          Text goes here 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</body> 
 
</html>

來源

2016-01-10 05:34:37

沒有。它也使文本變成綠色。它應該像通訊內容的框架一樣。 – George

謝謝你Rusdana的努力！我是html＆css編碼的新手。你知道是否有任何好書可以學習編碼嗎？再次感謝並祝你有個愉快的夜晚。 – George

歡迎喬治...... http：//www.w3schools.com/default.asp是最好的HTML，CSS即使你可以去https://www.codecademy.com/...我希望這可能幫助你 –

使用表格作爲另一個表格的邊框

回答

相關問題