Is it possible to use one table as a background and place another table on top of it?

Currently, I am designing an email template and due to restrictions, I can only use tables.

I am looking for a solution to meet my requirements using tables.

Since all the content is dynamically generated via an RSS feed, images cannot be used in this case.

This is the progress I have made so far:

<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>
csshtmlhtml-email

Answer №1

Absolutely, that can be easily accomplished. I have experimented with creating a layout similar to the one shown in your screenshot.

Feel free to review this code snippet:

<html> 
<head> 
<title>My Custom 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">Left Side</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>

You can also view a live example on this Fiddle Demo link.

The key is nesting tables within table cells(td).

Answer №2

To accomplish this, it's important to note that background images are not compatible with Outlook 2003, 2007, and 2013. If you don't need to cater to those email clients, here's how you can still achieve the desired effect. Please test your design in Litmus or Email on Acid to ensure compatibility with your target email clients.

<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>

For a live preview, click here: http://jsfiddle.net/fcpz1um2/

Answer №3

If you follow the backgrounds.cm technique, you can create a design similar to the sample below that will display correctly in approximately 99% of email clients. It may require media queries and other adjustments to ensure responsiveness, but it should render consistently - even in ALL versions of Outlook.

<table width="620">
<tr>
<td background="https://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(https://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="https://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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to relocate the play again button below the box?

How can I ensure that my "Play Again" button moves up to align perfectly under the black border box? The black border box is styled with a class named .foot .button { background: rgb(247, 150, 192); background: radial-gradient(circle, rgba(247, 1 ...

htmlcss

How to Create a Floating DIV with CSS

Here is the URL I am referring to: Website I want to position the Weather DIV above other content on the page while still maintaining its position when expanded or collapsed. How can I achieve this without affecting the layout of other elements? This is ...

htmlcss

How can an SVG circular progress bar be created using stroke dasharray?

Can anyone help me with adding dashes between the line in this progress bar I'm trying to recreate? Any suggestions would be greatly appreciated. This is my progress so far: I have been using the react-move library to animate the clock <CircularP ...

cssreactjssvgsvg-animatestroke-dasharray

What is the best way to add the ".html" suffix to pages in nuxt.js?

Is it possible to add the ".html" extension to a page address? For instance, changing "test_page" to "test_page.html" ...

htmlvue.jsnuxt.js

Creating a Canvas Viewport Tailored for Multiplayer Gaming

Lately, I've been playing around with the HTML5 Canvas while working on an io game. However, I've hit a roadblock when it comes to handling the viewport. Setting up the viewport itself isn't too complicated, but accurately displaying other p ...

javascripthtmlcanvasviewport

Conceal and reveal a list on page load with jQuery

Is there a way to automatically display this listing collapsed without making changes to the HTML structure? I would like all folders in the tree to be collapsed. Instead of the initial display: https://i.stack.imgur.com/cDw4s.png I prefer it to look li ...

htmljquery

What is the method to retrieve the local filepath from a file input using Javascript in Internet Explorer 9?

I'm experiencing some issues with the image-preview function on IE9, similar to the example photo shown. This method is not functioning properly and throwing an error in IE9, while it works perfectly fine in IE6-8. I am looking for a way to retrieve ...

javascripthtmlinternet-explorer-9

Using pre-existing CSS state background colors in GTK3

I am currently in the process of adapting a PyGTK2 application. This particular application performs tasks such as: self.normal_color = editor.style.base [Gtk.STATE_NORMAL] self.insensitive_color = editor.style.base [Gtk.STATE_INSENSITIVE ...

pythoncssgtk3

Variations in Angular scope variable behavior

Code Snippet in HTML <input ng-model="test1.param"> <input ng-model="test2"> Code Snippet in Controller $scope.test1 = { param: null }; $scope.test2 = null; Upon entering text in both input fields: The value of $scope.test1.param changes ...

htmlangularjs

Sleek CSS Slider with Image Transformation on HoverThe requested task has been

I am currently working with a client on the website . One of the features on the site is a slider at the top that allows for image swapping using pure CSS. However, the client recently requested that the images change when hovering over radio buttons or au ...

csscss-transitions

No match was found for the reverse of 'idname' with arguments '()'. Attempted 1 pattern: ['viewRegistration/(?P<pk_test>[0-9]+)/$']

When setting up my views, I have the following code: def home(request): if request.user.participant: current_user = request.user subscriptionUser = int(Subscription.objects.get(participant=current_user.participant).id) else ...

pythonhtmldjangoview

Which should I use - Angular directive or CSS selector, for better performance?

Currently expanding my knowledge on angular and exploring the capabilities of the ngClass directive. I have come across this interesting functionality: <li ng-repeat="language in languages" ng-class="{line:$even}">{{language}}</li> Alternativ ...

cssangularjs

What is the best way to select an element based on its relationship to another Element object using a selector?

I am currently developing a small library in which I require the ability to select a relative element to the targeted element using the querySelector method. For instance: HTML <div class="target"></div> <div class="relative"></div& ...

javascripthtmlcss-selectors

The flipping CSS code will not be compatible with IE 11

I'm experimenting with creating a flip animation that reveals link text when images are flipped. Everything works fine in most browsers, except for IE11. Apparently there's an issue with transform-style: preserve-3d; in IE10, but being new to CS ...

htmlcssinternet-explorerflip

Tips on eliminating the blue color from a hyperlink within a button

Currently, I am in the process of designing an HTML email template. I have included a green button in the template and now need to eliminate the blue color from the hyperlink within the button. I have exhaustively tried different solutions such as using ! ...

htmlcssbuttonhyperlink

Can you have two onclick events triggered by a single Div? (ASP.NET / HTML)

I am currently working with Div's and facing a challenge of handling 2 events with just one Div-Click.. I wanted to use both onclick="" and OnClientClick, but it seems that when using a Div, I cannot make use of OnClientClick. Can anyone provide me ...

asp.nethtml

Implementing a sorting mechanism for ajax data retrieval

Currently, I am using the code below to save HTML created with jQuery in a database and retrieve it later: $('div[read]').each(function(){ var kelas = $(this).attr('kelas'); $.post('admin.php',{kelas:kelas,id:id},func ...

jqueryhtmlajaxeach

How can CSS be used to make an element completely move off the visible screen?

Imagine if I had a div that was positioned outside of the visible area of the computer monitor screen. When using CSS transitions to move it to a specific position, it would create an effect of the element slowly moving in from outside of the screen. Add ...

css

Activate a side navigation bar in AdminLTE-3

I am using AdminLTE3 as my admin panel in Laravel, but I am facing an issue with the nav-item links not activating when clicked. Even though I have all the required assets for AdminLTE3 and used the starter.html file, the navigation items are not working p ...

phphtmlcssadminlte

What steps are involved in developing a quiz similar to this one?

Check out this interesting quiz: I noticed that in this quiz, when you answer a question, only that section refreshes instead of the entire page. How can I create a quiz like this? ...

javascripthtml