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

Perform calculations for product and sum when button is clicked

I received the following task for an assignment: Develop 3 functions along with a form. The first function should execute upon button press and utilize the other 2 functions. These two functions are supposed to compute the sum of two numbers and the ...

javascripthtml

Using multiple foreach loops within each other

After struggling with this issue for days, I've decided to seek some assistance :) I'm currently working on a project management tool that includes an edit-page where admins can modify project members and their roles within the project. My goal ...

phphtmltwitter-bootstrapfor-loopforeach

How can the Node app utilize an HTML page to reference another JavaScript file? Ran into an unexpected syntax error: `Uncaught SyntaxError: Unexpected token '<

I'm trying to figure out how to call another script from an HTML page that is being served by my node project's localhost server. Here's the basic setup: index.js var http = require('http'); var fileSystem = require('fs' ...

javascripthtmlnode.js

Elements featured in the header: logo, tagline, graphics, and more

I'm interested in designing a schema with the following elements: I'm contemplating whether it would be beneficial to have a separate container for the logo and slogan. Additionally, I am considering if it is advantageous to create a container f ...

css

Positioning the <div> to the left of a sidebar

I regret to inform you that I am unable to provide an answer at this time. Below is the code snippet provided: #wrapper { width: 844px; display: block; margin-left: auto; margin-right: auto; text-align: left; } #posts { width: 844px; float: left; } .en ...

htmlcss

Incorporate a Font Awesome icon into a Bootstrap 4 callout

I am having issues adding an icon to the left side of a Bootstrap 4 callout. Currently, the icon is appearing above the H4 heading. I would like the icon to be positioned on the left side before the message. I have attempted using .p:last-child but it doe ...

cssbootstrap-4

What's the best way to avoid global application of stylesheets imported for svelte carbon components?

My dilemma lies in wanting to utilize the DatePicker feature from carbon-components-svelte. Unfortunately, when I do so, the global application of styles from carbon-components ends up causing some conflicts with my own custom styles. As per the documenta ...

csssveltesveltekitcarbon-componentscarbon-components-svelte

Avoiding the use of "echo" in PHP can prevent unintended characters, especially the one created by the "¯

How can I prevent an issue where the '&macr' in a URL variable string creates the ¯ characters when echoed? echo "direct=1&closeBrowser=1&savelog=log.txt&storage=xfile&macrfile=klanta\test.html"; ...

phphtmlstringurlcharacter

What is the formula to determine the sizes of grandchildren div containers?

Hey everyone, I'm having some trouble with my jQuery code and I can't seem to figure out what's going on. Here's the scenario: I'm creating a few divs (based on entries from MySQL) and I'd like to show you the end result: ...

javascriptjquerycsshtml

Osclass Website Alert: Multiple H1 tag Issue Detected

I operate a website called MyMobPrice and utilize OsClass for its functionality. However, I am encountering an error on each product page stating "More than One H1 Tag found." The issue lies within the two sets of H1 codes designed for desktop and mobile ...

phphtmlosclass

Shifting the form to the bottom right corner

Just starting out with HTML5 and CSS, I've been experimenting with different elements. One project I've been working on is a form: <div id="form1"> <form action="demo_form.asp" autocomplete="on" > Departure City & ...

csshtml

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

javascriptjquerycss

Is there a method or API available for interacting with an <object> that is currently displaying a video?

Yay, I figured it out! I've been using video.js to play videos on a website that needs to work offline too. Unfortunately, using flash is not an option due to compatibility issues. So, I decided to write my own fallback solution. For Internet Explor ...

javascripthtmlinternet-explorervideo

Is there a way to shift this modal to the right?

I am facing an issue with aligning a button modal to the right side. I attempted using bootstrap classes like : float:right, mt:20 Unfortunately, these did not have the desired effect. Below is my code snippet: <b-modal ref="my-modal" hide-fo ...

htmlcsstwitter-bootstrapvue.js

What is the method for extracting text from a dd attribute without a name using Python and Selenium?

I am working on a webpage that includes a price listed in a dd value. Here is the snippet of code I am dealing with: <dd itemprop="youSave" class="saleprice pricingSummary-priceList-value" style="width: 50%; height: 20px; text-align: left; padding-le ...

pythonhtmlseleniumweb-scraping

PHP XML loop encountering issues with functionality

Hi there, I'm a newcomer to stackoverflow, but I've been following this site for quite some time. Currently, I'm working on a simple web application that will serve as a catalogue for music tracks, allowing users to add their own tracks afte ...

phpxmlhtml

Divide the screen evenly with a split, where one side is filled with an image

As a newcomer, I'm curious about how to split the screen in half with a form on the left and an image taking up the full height on the right. Is there a simple way to achieve this? For reference, here is a link showing exactly how I envision it: Exam ...

cssbootstrap-4

Scroll to make the div slide in from the bottom

I'm trying to achieve a similar effect like the one shown in this website (you need to scroll down a bit to see the divs sliding in). Although I'm not very proficient in JS, I was able to create a code that makes the divs fade in from 0 opacity ...

javascriptjqueryhtmlcss

CrispyForms: FormHelper - Easily move the </form> tag to a different location and manage multiple forms from a single model

When utilizing FormHelper and invoking the Form using {% crispy form %}, it generates a Form wrapped within <form> tags. However, my Template is structured into two columns. The first column displays the dynamically generated {% crispy form %}. The ...

pythonhtmldjangodjango-formsdjango-crispy-forms

How can I convert a JSON template to HTML using AngularJS?

As someone who is just starting out with AngularJS, I am facing an issue where the HTML tags in a JSON file are not being encoded when rendered in HTML using AngularJS. Is there a specific method in AngularJS that can help with this? This is what my HTML ...

javascripthtmljsonangularjs