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

Implementing selective image loading with HTML and angularJS

This image reveals the issue at hand Within this HTML code snippet, some of my images are displaying on the webpage while others are not. How can I go about resolving this? <img src="img/uploadFiles/{{room.imageLocation.split('//')[6]}}/{{ro ...

htmlangularjsangular-ui-bootstrap

Reverse the text alteration when the user leaves the field without confirming

Upon exiting a text box, I aim to display a confirmation dialogue inquiring whether the user is certain about making a change. If they select no, I would prefer for the text box to revert back to its original state. Is there an uncomplicated method to ach ...

javascriptjqueryhtml

What is the most effective method for dimming or disabling a Material-UI div?

Within my application, there are instances where I need to dim and disable the mouse events for certain div elements based on the component's state - such as when it's loading. My initial approach involved creating a helper function that generate ...

htmlcssreactjsmaterial-ui

The boundary extends fully to the right

Recently, I created a calculator to convert kilograms to pounds and encountered an issue when trying to add a border to a p element. The problem was that the border extended all the way to the right side of the page. Here is the corresponding HTML code: &l ...

htmlcssborder

How to Enhance Your MUI DataGrid Rows with Borders

Trying to customize the borders of Material UI DataGrid rows to achieve a design similar to this screenshot (with some info censored): https://i.stack.imgur.com/0xRFd.png The issue I'm facing is that I'm unable to display the right border correc ...

cssreactjsmaterial-uidatagrid

Troubleshooting Problem with Responsive Bootstrap Navbar

I've been working on creating a menubar using Bootstrap where the logo image is centered instead of being on the left side of the bar. However, I'm facing an issue where the right links in the menu go off the screen. When I view the page with a w ...

htmlcsstwitter-bootstrap

Indent the text within a span element that is displayed as an inline block

I am in search of a solution using only CSS for the following issue. Take into account the HTML below: <p> <span>Some text</span> <span>Some text</span> </p> Both <span> elements are set as inline-block. ...

css

Could one harness the power of SO's script for adding color to code within questions?

Similar Question: Syntax highlighting code with Javascript I've observed that Stack Overflow utilizes a script to apply color coding to any code shared in questions and answers, making it resemble how it would appear in an IDE. Is this script pub ...

javascriptjqueryhtmlajax

Radio button - arranging the background image and text in alignment

I'm struggling to align my custom radio buttons alongside text. Here is an example image: Despite using CSS for styling, I am unable to properly align the radio buttons. Below is a snippet of my HTML: label.item { display: inline-block; positi ...

htmlcsstwitter-bootstrapradio-button

Guide to showing video files stored in a folder on a PHP template

I am working on a project similar to the functionality of this website: As you can see, when you click on any video, it takes you to the same page with the video playing being the only difference. I want to implement this feature on my website as well. ...

phphtmlget

Utilizing a JavaScript variable within a jQuery function as an attribute

var image = "path.png"; Is it possible to include the 'image' variable in the jQuery function like this? $('#mapfoto').prepend('<img id="theImg" src="http://path.gr/" + image />'); ...

javascriptjqueryhtml

Achieving perfect alignment of an iframe on a webpage

Having an issue with aligning the iframe on my website. I have two buttons set up as onclick events that connect to internal pages displaying PHP data in tables within the iframe. Despite trying various CSS styles and positioning methods, I can't seem ...

javascripthtmlcssiframe

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Wondering how to accomplish this: I've designed an HTML5 homepage and I'm looking to display a message to visitors, such as "Dear visitor, I am currently on vacation from....", in the form of a memo or sticky note positioned in the top right cor ...

javascriptjquerycsshtml

Create a CSS style to set the background with a half height positioned behind the

I am looking to create a div with a background and overlay effect. Here is what I have done so far: I want it to look like this: body { background: blue; } .wrap { height: 300px; width: 600px; margin: 0 auto; background-color: #000000; } .b ...

htmlcss

A guide on using jQuery to cycle through every row of every table on an HTML page

I am trying to figure out the correct syntax for nesting two loops within each other in jQuery. The first loop should iterate over each table in an HTML page that does not have any IDs or classes, while the second loop should go through each table row of t ...

jqueryhtmlcss

The behavior of -webkit-border-radius differs from that of -moz-border-radius

My website is displaying differently on Safari compared to Firefox. I want the CSS to make it look consistent across both browsers. I understand that I could use two div boxes - one for the outline and one for the image. However, I prefer how Firefox only ...

safaricss

An error in PHP has been detected within the CodeIgniter framework

I have encountered an error that has been frustrating me lately: An unexpected PHP Error occurred with the following details: Severity: Warning Message: strip_tags() expects parameter 1 to be string, array given Filename: inscription/loginform3.php Line ...

phphtmlmysqlcodeigniter

CSS code for targeting specific screen sizes in the Bootstrap grid system

I'm not an expert in styling, but I often use Bootstrap for small projects. Currently, my main challenge lies within the grid system. With one monitor at a 1920x1080 resolution and another at 1366x768, I find myself wanting to adjust the grid system b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the method for retrieving the value of a checkbox when clicked?

Managing a dynamically created HTML table with checkbox values can be tricky, especially when the value needs to reflect changes in real-time. If you are struggling to update the status of the checkboxes based on database values and pass that information t ...

phpjqueryhtml

Receiving "Illegal Invocation" error when attempting to submit form using ajax

I am attempting to submit a form using ajax, and here is the form code: <form class="form-vertical" method="POST" id="request-form" action="/post_handler?request=add_data" enctype="multipart/form-data"> <div class="form-group"> <label ...

javascriptajaxhtmlajaxform