Как сделать <td> В качестве ссылки (без Javascript)

Question

Я пишу код для отправки HTML-сообщений электронной почты. Из-за нестандартного характера почтовых клиентов я ограничен каким-то довольно допотопным кодом (без Javascript, без div, без ярлыков CSS и т. Д.)

Кнопки вызова к действию - это TD, но так далеко я не смог сделать целую кнопку нажатой; просто текст посередине.

Код нечто вроде

<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> 

Я уже пытался добавить display:block в стиле тд, но это не сработало.

Я пытаюсь сделать невозможное?

Answer 1

Сделать Анкер элемент уровня блока и переместите прокладку из ячейки таблицы к якорю:

<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>

Answer 2

Вы не можете сделать <td> кликабельным без JS
Увеличить внутреннюю <a> вместо этого - для покрытия необходимой области,
настройка display на block может помочь.

Answer 3

Существует способ, это не совсем то, о чем вы просите, но должно дать вам желание, которое вы хотите - даже в Outlook! Вы были на правильном пути, но стили CSS должны быть вместо тега. Самое приятное то, что есть бесплатный онлайн-инструмент, который может создать для вас код.

Перейти к buttons.cm и он создаст html и VML, необходимые для того, чтобы дать вам полностью кликаемую кнопку в HTML/CSS, а не только как изображение.

Добавлен код вывод из buttons.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>