All geek questions in one place

How to make <td> Clickable as a link (without Javascript)

I am writing code to send HTML emails. Due to the non-standard nature of email clients, I am limited to some rather antediluvian code (without Javascript, without div, without CSS shortcuts, etc.).

Call to action buttons are TD, but so far I have not been able to click on the whole button; just the text in the middle.

The code is similar to

<table width="100%" border="0" cellpadding="0" cellspacing="20">
            <tr>
            <td align="center" valign="middle" width="33%" style="background-color:#6483c1; border:1px solid #44619a; border-radius:2px; padding-top:20px; padding-right:10px; padding-bottom:20px; padding-left:10px;">
            <a href="http://littlehotels.co.uk/travelinsurance.php" target="_blank" style="color:#FFFFFF; text-decoration:none;"><font size="3" face="Arial, Helvetica, sans-serif" color="#ffffff"><b>Travel Insurance</b></font></a>
            </td>

I already tried adding display:blocktd to the style, but that didn't work.

Am I trying to do the impossible?

+4
source share
3 answers

Make the binding an element of the block level and move the indentation from the table cell to the anchor:

<table width="100%" border="0" cellpadding="0" cellspacing="20">
  <tr>
    <td align="center" valign="middle" width="33%" style="background-color:#6483c1; border:1px solid #44619a; border-radius:2px;">
      <a href="http://littlehotels.co.uk/travelinsurance.php" target="_blank" style="padding:20px 10px;display:block;color:#FFFFFF; text-decoration:none;"><font size="3" face="Arial, Helvetica, sans-serif" color="#ffffff"><b>Travel Insurance</b></font></a>
    </td>
  </tr>
</table>
Run code
+7
source

<td> JS <a> - ,
display block .

+1

, , , , - Outlook! , CSS . - -, .

buttons.cm, html VML, , HTML/CSS, .

, .cm :

<table width="100%" border="0" cellpadding="0" cellspacing="20">
            <tr>
            <td align="center" valign="middle" width="33%"><div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://littlehotels.co.uk/travelinsurance.php" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="5%" strokecolor="#44619a" fillcolor="#6483c1">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Travel Insurance</center>
  </v:roundrect>
<![endif]--><a href="http://littlehotels.co.uk/travelinsurance.php"
style="background-color:#6483c1;border:1px solid #44619a;border-radius:2px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Travel Insurance</a></div>
            </td>
            </tr>
            </table>
0

Source: https://habr.com/ru/post/1605598/

More articles:


All Articles