Incorporate Margins for Table Cells in Outlook (HTML Email)

I'm currently in the process of creating an email newsletter and testing it out on Litmus.

Here's how the newsletter design should appear (refer to the image below):

Although I understand that it may not look exactly the same on Outlook, is there a way to add spacing between the tags for better presentation?

This is how the newsletter appears on Outlook 2013 (Windows 7):

Please keep in mind that I am still in the early testing phase, and my main focus right now is on improving the spacing.

I have included the code snippet related to this section below:

<!-- Main Changes Content Row One Starts -->
<tr>
    <!-- Row One left Box Starts -->
    <td align="left" width="48%" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
        <font face="'Open Sans', Arial, sans-serif">
            <!-- Change Text Here -->
            <span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
                <strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.
            </span><br /><br />
        </font>
    </td>
    <!-- Row One left Box Ends -->

    <!-- Row One Right Box Starts -->
    <td align="left" width="48%" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
        <font face="'Open Sans', Arial, sans-serif">
            <!-- Change Text Here -->
                <span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
                    <strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.
                </span><br /><br />
        </font>
    </td>
    <!-- Row One Right Box Ends -->
</tr> 
<!-- Main Changes Content Row One Ends -->

If anyone has any suggestions or workarounds for enhancing the appearance on Outlook, I would greatly appreciate it.

htmlcssemailoutlook

Answer №1

When designing for Outlook, it's best to avoid using padding and margin. Instead, add td in a row to create spacing. Additionally, Outlook only supports system fonts and not Google fonts. It is recommended to use width in pixels rather than percentages.

<tr>
   <!-- Row One left Box Starts -->
   <td align="left" width="290" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
   <font face="'Open Sans', Arial, sans-serif">
   <!-- Change Text Here -->
   <span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
   <strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.</span>
   <br /><br />
   </font>
   </td>
   <!-- Row One left Box Ends -->
   <td align="left" width="20" bgcolor="#f5f4f4" class="100p mobile-column"></td>
   <!-- Row One Right Box Starts -->
   <td align="left" width="290" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
   <font face="'Open Sans', Arial, sans-serif">
   <!-- Change Text Here -->
   <span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
   <strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.</span>
   <br /><br />
   </font>
   </td>
    <!-- Row One Right Box Ends -->
</tr>

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

What is the best way to open the index.html file in electron?

I'm currently developing a cross-platform app using electron and Angular. As of now, the code I have for loading my index.html file looks like this: exports.window = function window() { this.createWindow = (theBrowserWindow) => { // Create ...

javascripthtmlelectronload

I possess a compilation of URL links and I am seeking to identify the specific HTML div that corresponds to each URL within a webpage

Could you please help me figure out which HTML div each URL belongs to on a webpage using Java? I have a list of URLs that need to be matched with their respective HTML divs. ...

javahtmljsoup

extract information from the HTML id attribute and assign it to a PHP variable using the GET method

After reviewing numerous examples, I am still unable to retrieve the value from the ID attribute in my input element. This identifier is crucial for deleting records from the database, but my attempts with Get method have been unsuccessful. <?php ...

phphtmlattributes

Duplicate a form based on the selected option

My goal is to duplicate a form based on the numerical value selected from the drop-down menu. You can find the corresponding code in this JSFiddle. Here is the HTML code: <div class="travel_tour-info"> <h3>How many people are you booking for? ...

javascriptjqueryhtml

Lock in the top row (header row)

In a node.js application: How can I lock the top row of a table in place, similar to Excel's freeze panes feature? I think this might involve using some CSS styling, but I'm not exactly sure how to achieve it. When I tried using fixed, the entir ...

cssnode.jsreactjsexpress

The font styles shift and vertical bars vanish when placed under images

I'm currently facing some challenges with the text placement beneath the images on my website that I am constructing: 1) The font for "Back to home page" unexpectedly changes from the specified style (Georgia, 0.9em) in Firefox but remains consistent ...

cssimagefonts

What could be causing the second image to not drop in the proper position in an HTML and JavaScript environment?

I am encountering an issue with a simple drag and drop implementation using images in my code. The first image works fine, but for some reason the second image does not display correctly when dragged inside the div boxes; it appears outside of the box. Can ...

javascripthtml

What is causing the initial activation of the <button> within a form?

Within my <form>, I have included 2 submit buttons. The first button looks like this: <button class="regular" id="geocodesubmit" style="height:40px;">Set Location</button> The second button looks like this: <button type="submit" ...

javascripthtmlcssforms

JQuery displays 'undefined' on checkbox loaded via Ajax

Currently, I am utilizing a checkbox to activate my select Option tag. The select option tag and checkbox are both loaded via ajax. While the select option works perfectly, the checkbox displays as undefined. However, it functions properly in enabling my d ...

javascriptjqueryhtmlajaxcheckbox

execute action once element has finished loading - angular

I am looking for a way to trigger an angular function after a specific element has been displayed on the page. The challenge arises because this element is part of a Single Page Application (SPA) where its display is controlled by a series of events. Tradi ...

javascripthtmlangularjs

Tips for controlling HTML elements using JavaScript

I'm currently working on implementing a mouse-over scale effect for an HTML image. I chose to use JavaScript for this task because I need the ability to manipulate multiple elements in different ways simply by hovering over one element. Below is the J ...

javascripthtmlcsswebkit

What could be causing the styled-component's flex value to not update?

I have a sidebar and main content on my website layout. The main content occupies most of the screen space, while the sidebar should only take up a small portion. Both elements are within a flexbox container, with the sidebar and main content as child divs ...

cssreactjstypescriptflexboxstyled-components

How can I make a div element match the height of an image and overflow without relying on

Here is the code that I am currently working with: https://codepen.io/allen-houng/pen/ExYKYdq Additionally, you can find a gist of the code snippet below: <div class="parent"> <div class="imageWrapper"> <img class="image" src="imageurl" ...

javascripthtmlcss

Centered vertically: Enhancing buttons with Bootstrap 3

I am struggling to vertically center a group of buttons within a column (as seen in the image). The height of the row is variable and I have tried numerous approaches without success. Screenshot: <div class="row question even"> <div class=" ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for transferring information from a form to your email address

I am trying to find a way to automatically send form data to my email without the user having to open their inbox. I attempted to use the "mailto" function but it didn't work as desired, still opening the email box. Here is the script I tried: functio ...

javascriptphphtmlemailmailto

Occasions focused on the <input type="file"> feature

Looking for a way to write a file input in React that accepts CSV files, validates them, and prevents upload if there are errors? Check out the code snippet below: <CustomInput type="file" id="fileBrowser" name="file" label={filename || 'Choos ...

javascripthtmlreactjs

Box containing text going in both directions

I am trying to recreate a div structure that features a circle emoji at the top and two text elements at the bottom. However, my attempt is not producing the desired result. Here is my current code: .container { width: 70px; height: 400px; backgroun ...

htmlcss

What is the best way to make text appear as if it is floating in Jade or HTML?

Currently, I am facing an issue with a Jade file that displays an error message when a user tries to log in with incorrect credentials. The main problem is that this error message disrupts the alignment of everything else on the page, as it is just a regul ...

javascripthtmlpug

What are some tips for incorporating vue.js into a basic web application?

I've been trying to incorporate vue.js into my web application, but for some reason, it's not loading and the HTML is not firing in the browser. Please take a look at the code snippet below: <!DOCTYPE html> <html> < ...

javascriptjqueryhtmlcssvue.js

Techniques for transferring images directly into HTML canvas games

I created a thrilling race car game and here is the code snippet: index.html <!DOCTYPE html> <html> <head> <title> Extreme Race Car Game </title> <link rel="stylesheet" type="text/css" href="style.css"> < ...

javascriptjqueryhtmlcsshtml5-canvas