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

creating a new page upon clicking a div element

I need assistance in creating an effect similar to the one found on this website - where clicking on a div opens a new page. ...

jqueryhtmljquery-uidom

React is producing a collection of <td>'s

My React code is very straightforward and it runs smoothly: function Columns(){ return ( <React.Fragment> <li>Hello</li> <li>World</li> </React.Fragment> ); } function Example(){ ...

javascripthtmlreactjs

Resolving Issues in HTML and the Dynamic Duo of PHP and MySQL

Hey there, I've been a reader for a while now but this is my first time posting. I'm really into PHP and I've been working on a page lately. Right now, I've got the DB connection set up nicely and my SELECT statement is doing exactly wh ...

phphtmlmysqlformspost

Unable to alter the height of the element

I am attempting to resize an element by dragging, similar to this example. I have created a simple directive for this purpose: @Directive({ selector: '[drag-resize]' }) export class DragResizeDirective { private dragging: boolean; const ...

javascriptcssangular

Find the ID of the displayed div using jQuery

Here is the snippet of code I am working with: <div class="sequence-container"> <div id="1"></div> <div id="2"></div> <div id="3"></div> </div> Along with my jQuery script: $(window).load(function() ...

jqueryhtmlshow-hide

When converting a block formatting context into a block, the margin does not collapse

It seems that the behavior of margins collapsing between block elements inside and outside a BFC is not as straightforward as expected. For instance, when a button element's display property is set to inline-block, it forms a BFC, which should prevent ...

htmlcssmargin

When an external image is dragged over, include the class in the drop area of the file input

Hey, does anyone know how to use Jquery to add a class when an element is being dragged over a drop area? Here's the HTML code I'm working with: <div class="upload"> <form action=""> <input class="uploadfile" type="file" ...

javascriptjqueryhtmlcssdrag-and-drop

Stopping a function that is currently running on a website using Javascript

I have a script on my website that triggers a rain feature when a user clicks on a button. However, I am struggling to figure out how to allow the user to deactivate this feature. I've tried various methods such as using break, return, and timeouts, b ...

javascriptphphtml

Is there a single CSS property value that you want to exclude?

Is there a way to disable only one specific value of a CSS property? For example, when it comes to the 'text-decoration' property, options include none, underline, overline, line-through, blink, and inherit. I want to allow all values of text-de ...

htmlcsstext-decorations

Using PHP, JavaScript is unable to hide <div> elements

I'm encountering an issue where the div I want to show when an error occurs is not hiding and showing properly using JavaScript. Here is a snippet of my code: <script> function hideerror() { var catdiv = document.getElementById(error); ...

javascriptphpjqueryhtmlcss

The scrolling content is positioned beneath the primary header and navigation bar

I'm currently in the process of designing a website where, upon clicking a navigation button, part of the page scrolls while the top header & nav bar remain fixed. Although I've managed to get the scrolling functionality to work and keep the top ...

jqueryhtmlcss

Tips on eliminating excess white space or margins beneath a flexible video player

My issue is with a video and some content underneath. When I reduce the height of the video on mobile, there is too much white space below it. @media only screen and (max-width: 600px) { video { height: 80%; } Instead of adding margin-bottom ...

htmlcssvideomobileresponsive

Updating the content within a div following the submission of a contact form 7

I'm struggling with my contact form. I want the content of my contact form div to change after clicking submit on the form. I've been searching for a solution, but so far, no luck. Here is what I have: Form (div1) with input fields, acceptance c ...

javascriptphphtmlcss

Modify the label contents to reflect the selected file, rather than using the default text

Currently, I am working on customizing my file upload input to enhance its appearance. Everything is going smoothly so far, but I am facing difficulty in finding a suitable jQuery script that can meet my specific requirements. My objective is to have the ...

javascripthtmljquery

Tips for transforming a hover menu into a clickable menu

The scenario above demonstrates that when hovering over the dropdown menu, it displays a submenu. However, I want the submenu to be displayed after clicking on the dropdown text. Could anyone provide assistance on how to change the hovermenu to a clickabl ...

javascripthtmlcss

Place a list with scrolling and overflow features side by side

Having trouble getting my headers to scroll with overflow auto and white-space nowrap. Can't figure out why it's not working. I want to create hyperlinks within headers to link to specific parts of the website. I have the code for hyperlinking s ...

javascripthtmlcssscrolloverflow

I'm not sure how to use the global .container CSS style in Next.js for multiple pages

I'm currently diving into the world of React and Next.js, tackling a project with Next.js. I've set up a global CSS file with a .container style definition which I imported in my _app.js file. However, I'm unsure how to apply this global sty ...

cssreactjsnext.jsglobal

Tips for implementing collapsible functionality that activates only when a specific row is clicked

I need to update the functionality so that when I click on a row icon, only that specific row collapses and displays its data. Currently, when I click on any row in the table, it expands all rows to display their content. {data.map((dataRow ...

reactjstypescripthtml-tablematerial-ui

Displaying PDF files on the internet without allowing them to be downloaded

How can I display PDF files on my website without allowing them to be saved or downloaded? Is there a way to prevent browsers from saving or downloading the PDF files? ...

phpjavascripthtmlcss

How can I incorporate a string variable into an f-string in Python for printing?

Looking to display the user variable from a Python script in an HTML document? Here's a method to achieve this. my_python.py user = "myname" with open("../../html/forms/output.html") as output: print(output.readlines()) outpu ...

pythonhtmlpython-3.xf-string