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

时间:2015-07-01 15:33:50

标签: html css html5 html-email

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

我需要一种方法来使用表来实现以下功能 enter image description here

所有内容都是通过RSS Feed动态生成的,所以我无法使用图片。

这是我到目前为止所拥有的

srcFolders = dir('D:\test*');
for folder = 1:length(srcFolders)
    path = strcat('D:\',srcFolders(folder).name);
    sear = strcat(path, '\*.bmp');
    srcFiles = dir(sear);
    for i = 1 : length(srcFiles)
        filename = strcat(path,'\',srcFiles(i).name);
        Image1= imread(filename);
        Image2 = imread('D:\2','jpeg'); % Image 2

        x = diff( Image2 , Image1)
        % any suggestion here to get my output for printing in excel 
        if (x >= 0.05)
            xlswrite(xlsfile, srcFiles(i), ‘0’, ‘A1’);
        else
            xlswrite(xlsfile, srcFiles(i), ‘1’, ‘A1’);
        end
    end
end

3 个答案:

答案 0 :(得分:0)

是的,你总是可以这样做。我试图在你的帖子中获得与屏幕截图类似的布局。

您可以查看此代码

<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内填写表格。

答案 1 :(得分:0)

但是,可以知道Outlook 2003,2007和2013不支持背景图像。如果您不想在这里支持这些电子邮件客户端,那么您将如何实现这一目标。免责声明:这应该在Litmus或Acid on Acid上进行测试,以验证您希望支持的电子邮件客户端是否产生了您想要的结果。

<table width="620" height="400" cellspacing="0" cellpadding="0" border="0" background="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png">
    <tbody>
        <tr>
            <td align="left" valign="top" style="padding-top: 75px;">
            <table width="200" bgcolor="#dddddd" cellpadding="0" cellspacing="0" border="0">
                <tbody>
                    <tr>
                        <td><h2>Title</h2></td>
                    </tr>
                    <tr>
                        <td><p>Some text</p></td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

您也可以在此处查看:http://jsfiddle.net/fcpz1um2/

答案 2 :(得分:0)

使用backgrounds.cm方法,您可以执行类似下面的示例,它应该适用于大约99%的电子邮件客户端。它需要媒体查询等,以使其响应,但应该一致地呈现 - 即使在所有Outlook中。

<table width="620">
<tr>
<td background="http://i.stack.imgur.com/dDVdU.png" bgcolor="#EFEFEF" width="100%" height="300" valign="top" style="-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center; background-image:url(http://i.stack.imgur.com/dDVdU.png); background repeat: no-repeat;">
                        <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;height:250px;">
    <v:fill type="frame" src="http://i.stack.imgur.com/dDVdU.png" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
                        <div style="text-align:left;">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                        <td height="34" style="font-size:1px; mso-line-height-rule:exactly; line-height:1px;">&nbsp;</td>
                        </tr>
                        </table>

                        <table align="left" width="230" cellpadding="0" cellspacing="0" border="0" style="vertical-align:bottom; max-width:430px;">
                            <tr>
                            <td style="padding-left:5px;">
                            <table align="left" bgcolor="red" width="100%" cellpadding="0" cellspacing="0" border="0" style="vertical-align:bottom; max-width:430px;">
                            <tr>
                              <td style="color:#FFFFFF; font-size:67px; line-height:80px; padding:5px;">30% <span style="font-size:40px;">Off</span></td>
                              </tr>
                              <tr>
                              <td bgcolor="#000000" style="color:#FFFFFF; padding:5px;">HURRY UP! GRAB YOUR BITE</td>
                            </tr>
                            </table>
                            </td>
                            </tr>
                            </table>

                        </div>
                        <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
                      </td>
</tr>
</table>