Experiencing a lack of desired outcome in Outlook when using simple HTML with table elements

When creating a template for Outlook, I encountered an issue where the logo appeared on the right and the link text was on the left, which is the opposite of what I wanted. How can this be resolved?

<center>
<table width="600px;" style="margin:auto auto;">
<tr style="left:auto">
<td>

Within this main table's td tag, the following tables are included. I have made sure that all tags are properly closed without missing any.

The code below pertains to the main table for the logo and link...

<table width="150px;" bgcolor="ffffff" cellpadding="0" cellspacing="0" align="left">

This code is for the link:

<td style="text-align:right;">
<a href="http://www.url.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px; text-align:end; inline-box-align:last; left:auto" data->www.linkurl.com
</span>
</td>

I have tried using text-align, left:auto, right:auto in the <table>, <tr>, <td> levels accordingly but have not achieved the desired output.

Image of the current output in Outlook:

htmlcssoutlookhtml-table

Answer №1

Here is a suggestion that might be more aligned with what you are searching for: JSFiddle Example

Your initial idea was on the right track with 

<td style="text-align:right;">
<a href="http://www.url.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px; text-align:end; inline-box-align:last; left:auto" data->www.linkurl.com
</span>
</td>

However, there are some issues with your CSS. The 'end' value in text-align is not valid and I am unfamiliar with inline-box-align as well.

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

Error encountered when transitioning to TypeScript: Unable to resolve '@/styles/globals.css'

While experimenting with the boilerplate template, I encountered an unusual issue when attempting to use TypeScript with the default NextJS configuration. The problem arose when changing the file extension from .js to .tsx / .tsx. Various versions of NextJ ...

csstypescriptnext.js

Displaying images dynamically in a gridview from a hard drive source

I am facing an issue trying to dynamically retrieve an image from my hard drive. Despite creating the dynamic path correctly, the image is not displaying. The root cause of this problem lies in the fact that I am developing a back-end system for a website ...

c#cssasp.netgridview

I'm not sure if I'm doing this right, the image seems to be overlapping the border

Just dipping my toes into the world of HTML/CSS, so feel free to point out any major errors in my code. The issue I'm facing is illustrated in this image (Apologies for the black boxes covering up some content; focus is on the top image). Check out ...

htmlcssimageborder

Tips for creating a dropdown that autocompletes similar to the one found in Google Chrome

Looking to create a unique custom drop-down autocomplete suggestion list using HTML and CSS, similar to Chrome's design (shown below). In my attempts to achieve this, I utilized an absolutely positioned table beneath the input element. I applied vert ...

htmlcss

Code - Capture user's input

I have multiple input fields in my HTML document and I want to retrieve the text entered into one of them. Here's an example of one such input field: <TH> <FORM> <input name="designation" type="text" size="12" /> < ...

javascriptjqueryhtmlinput

Inconsistencies with Colorbox behavior in an external HTML document

Encountering a strange issue with colorbox while attempting to display a "div" element from another HTML file. The code functions perfectly, except for the final "div" in the external file. The structure of my external file is as follows; div1 img par ...

jquerycsscolorbox

The ultimate guide to personalizing group titles in Angular UI-Select

Is there a way in Angular ui-select to customize the group label? I want to make it larger than the selection items as shown in the image below. https://i.stack.imgur.com/ofcak.png The list is currently grouped by country, but how can I adjust the size o ...

javascripthtmlcssangularjsangular-ui-select

My navigation bar's CSS code falls short of extending across the full width of my screen, leaving a gap of approximately 10 pixels before reaching the edges

Can someone help me figure out what went wrong? I've been trying to remove the margins but it's not working. The background colors of other elements seem to be seeping into this empty space. Any thoughts or suggestions would be greatly appreciate ...

htmlcss

Accessing a hyperlink within the existing page

How can I make a hyperlink in an HTML document that opens the linked document (link1.html) under the link on the same page? links.html: <body> <h3>Links</h3< <a href="link1.html">link1</a> </body> Desired out ...

html

Carousel with Bootstrap: Heading positioned over the content

My goal is to have the caption of Bootstrap Carousel displayed above the content, but I'm encountering issues with it. When clicking on the chevrons, you may notice the < Item 1 > bouncing... (This behavior is a bug, and logically speaking, I ex ...

javascriptjqueryhtmlcsstwitter-bootstrap

The height of the ReactPlayer dynamically adjusts to accommodate content beyond the boundaries of the page

I have a video on my webpage that I want to take up the entire screen, but currently, users have to scroll a bit to reach the bottom, which is not ideal. This is my JavaScript: <div id="page"> <div id="video-container"> ...

javascriptcssreactjsreact-player

2 column setup in the last row of a CSS grid

Can anyone help me troubleshoot an issue with aligning two buttons to the right in a form using CSS grid? I've attached a screenshot for reference. https://i.stack.imgur.com/DFGrx.png **css ** .wrapper { width:75%; padding-top: 15px; padd ...

cssgridcss-grid

Unlinked from the main content, the Angular2 Material2 sidenav stands on its

I am in the process of implementing the material2 sidenav component. My goal is to have a standalone, full-height sidebar that smoothly slides in and out without any interference with the rest of the app layout caused by the sidenav-layout. The desired ou ...

cssangularlayoutangular2-material

Problem with jQuery image gallery

Currently, I am in the process of creating a simple image gallery that enlarges an image when it is clicked. To achieve this functionality, I am utilizing jQuery to add and remove classes dynamically. $(".image").click(function() { $(this).addClass("b ...

jqueryhtmlcss

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

css

Designing a unique pagination layout for your WordPress website

Currently, I am working on a WordPress project. I have created my own template using CSS and HTML format. The implementation is going well, but I am facing difficulty integrating WP pagination design into my template. Below is the pagination code from my ...

phphtmlcsswordpress

Is it possible to load the surrounding markup in Angular before the guards are resolved upon the initial load of the router-outlet?

Within our Angular 12 application, we have implemented guards that conduct checks through API calls to the backend in order to validate the user's permissions for accessing the requested route. The default behavior of these guards follows an all-or-no ...

htmlangularangular-ui-routerrouterrouter-outlet

Using a MySQL statement within a conditional statement

Looking to modify this code to display different information based on the values retrieved, here is the current code: $sql_doublecheck = mysql_query("SELECT * FROM adminpage WHERE setting='main' AND close_site='1'"); $doublecheck = mys ...

phphtmlmysql

Stopping videos in the JQuery Cycle Plugin triggers the stop event

Currently, I have a simple cycle set up with YouTube videos using the following code: <script type="text/javascript"> $(document).ready(function () { $('#cycle').cycle({ fx: 'fade', sp ...

javascripthtmljqueryjquery-events

Guide on displaying the name attribute of a button along with its price in a separate div when clicked

Upon clicking the Koala button, I want to display a message showing the id name of the button and the corresponding price for Koalas. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link h ...

javascripthtmloop