right align text in menubar - html

Question

I am coding a menubar for an e-mail - therefore the messy tables. I need the two menuoptions "Point" and "My profile" to be aligned in the right side of the table:
<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
<tbody>
<tr>
<td style="padding:10px 0px 10px 0px" align="center" valign="top">
<table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
<tbody>
<tr>
<td align="left" width="35" valign="top"> </td>
<td align="center" width="590" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
<tbody>
<tr>
<td style="padding:7px 0px 7px 0px" align="center" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8" align="center" valign="top">
Book
<span> </span>
Gift
<span> </span>
Voucher
<span> </span>
<span> </span>
<b>Point:</b>
<span> </span>
<b>My profile</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="35" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JSFIDDLE
I have tried to set a text-align:right; on the a tag, the td tag, but I cannot get the two options to align right.
I can align them right if I set the text-align on the table. But then all the text are aligned right.
Does anybody have an idea what I am doing wrong here?

Answer 1

I think this will work for you -
I have put the inner table width to 100% and split you <a> tag to two <td> and gave them float.
<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
<tbody>
<tr>
<td style="padding:10px 0px 10px 0px" align="center" valign="top">
<table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
<tbody>
<tr>
<td align="left" width="35" valign="top"> </td>
<td align="center" width="590" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
<tbody>
<tr>
<td style="padding:7px 0px 7px 0px" align="center" valign="middle">
<table style="border-collapse:collapse;width:100%" cellspacing="0" cellpadding="0" border="0" align="left" width: "100%">
<tr>
<td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8;float:left" align="center" valign="top">
Book
<span> </span>
Gift
<span> </span>
Voucher
<span> </span>
<span> </span>
</td>
<td style="float:right">
<b>Point:</b>
<span> </span>
<b>My profile</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="35" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Hope this is helpfull for you.

Answer 2

try this snippet:
<a href="http://example.com"
style=
"color:#004b60;
text-decoration:none;
background-color: red;
padding: 5px 10px 5px 10px;
margin-left:250px;"
target="_blank"><b>Point:</b>
</a>
use margin-left:250px; instead of text-align: right;
check the fiddle: https://jsfiddle.net/hfsd62eg/1/