css - 我可以使用表格作为背景并在其上添加不同的表格吗?

标签 css html html-email

我正在处理电子邮件模板,因此我的选项仅限于表格。

我需要一种方法来使用表格实现以下目标 enter image description here

所有内容都是通过 RSS 提要动态生成的,所以我不能使用图片。

这是我目前所拥有的

<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="banner"><tbody><tr>
    <td>
      <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody><tr>
    <td width="100%">
       <table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody><tr>
    <!-- start of image --><td align="center">     *|FEEDBLOCK:http://domain.com/feed/|* *|FEEDITEMS:[$count=1]|*
      <a target="_blank" href="*|FEEDITEM:URL|*">*|FEEDITEM:IMAGE|*</a>
     </td>
     </tr></tbody></table>
    <!-- end of image -->
    </td>
   </tr>

   <tr>
    <td width="100%">
      <table width="150" align="left" bgcolor="#ff4800" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody><tr>
    <!-- start of title --><td align="left">*|FEEDITEM:TITLE|*</td>
       </tr>
       <tr>
    <!-- start of content -->
      <td align="left" bgcolor="#ffffff">*|FEEDITEM:CONTENT|* </td>
         </tr>
           </tbody></table>
    <!-- end of title -->
    </td>
       </tr>
                      <!-- Spacing -->
    <tr><td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td></tr>
    <!-- Spacing -->
    </tbody></table>
    </td>
          </tr></tbody></table>

最佳答案

是的,你总是可以这样做。我已尝试针对您帖子中的屏幕截图获得某种类似的布局。

您可以查看此代码

<html> 
<head> 
<title>My Layout</title>
<style type="text/css"> 
table{
border:1px solid #c4c4c4;
}
td{
border:1px solid #c4c4c4;
}
#table1{
width: 800px;
}
.table1-td-left{
height:400px;
width:200px;
background-color: green;
}
.table1-td-right{
width:600px;
background-color: yellow;
}
.table2-td-left{
background-color: red;
    width: 200px;
}
.table2-td-right{
background-color: blue;
    width: 300px;
}
</style> 
</head> 

<body> 
<table id="table1">
    <tr>
        <td class="table1-td-left">LHS</td>
        <td class="table1-td-right">
            <table id="table2">
                <tr>
                    <td class="table2-td-left">Content # 1</td>
                    <td class="table2-td-right">Content # 2</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body> 
</html>

您可能还会看到这个 Fiddle Demo .

基本上您需要在 td 内制作表格。

关于css - 我可以使用表格作为背景并在其上添加不同的表格吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31165744/

相关文章:

CSS 未在实时网站上显示

javascript - 如何弹出放大动画?

html - 电子邮件模板 - 背景图像与文本叠加在确切位置

用于电子邮件的 HTML 图像模块

css - 为什么负边距在 IE 7 中不起作用?

HTML - 并排放置标题

javascript - jQuery 悬停图像的特定区域

javascript - jQuery 动态显示弹出窗口,无需静态 HTML 属性

HTML 电子邮件 Office 365 (OWA) 表格呈现错误

html - 如何让 div 用边距填充视口(viewport)?