How to allow for <p> as clickable and use embedded <a> href?

Question

I have the following p embedded with an a href. How can I make the p clickable and use the internal a.href already defined?

<style type="text/css">
    p.button:hover { cursor: pointer; }
    p.padding  { padding-right:10px; padding-left:10px; }
 </style>
<table class="inline_button" style="width: auto ">
    <tr>
        <td style="text-align: center;  min-height: 28px;background-color: #fe9d39; line-height: 28px;font-size: 12px;font-family: Arial, Verdana, sans-serif;padding: 0;border: 2px solid #fe9d39;">
             <div id="whatever">
            <p class="button padding" style="padding: ; text-decoration: none; color: #ffffff; font-weight: bold;"><a style="text-decoration: none; color: #ffffff; font-weight: bold;" href="http://google.com">click me</a></p>
             </div>
        </td>
    </tr>
</table>

Constraint : no jquery or js (or any scripting)

Answer 1

Add display: block to your <a> so it fills the space within your <p> .

If you're using an HTML5 doctype (or aren't worried about validation and possible old IE errors) you can wrap the p within the a tag.

Answer 2

Use display:block; for anchor tag. also use padding for anchor tag instead of P tag, so it make clicked for your whole P tag. After above changes your code look like below.

    <style type="text/css">
    p.button:hover { cursor: pointer; }
    p.padding  { padding:0; margin:0;}
 </style>
<table class="inline_button" style="width: auto ">
  <tr>
    <td style="text-align: center;  min-height: 28px;background-color: #fe9d39; line-height: 28px;font-size: 12px;font-family: Arial, Verdana, sans-serif;padding: 0;border: 2px solid #fe9d39;"><div id="whatever">
        <p class="button padding" style="padding: ; text-decoration: none; color: #ffffff; font-weight: bold;"><a style="text-decoration: none; color: #ffffff; font-weight: bold; padding:5px 10px; display:block;" href="http://google.com">click me</a></p>
      </div></td>
  </tr>
</table>

Answer 3

The easiest way to do what you want would be to add a click handler to the <p> element using jquery.

$('p.button').click(function(){$(this).children('a').click()});

A better/alternative way of thinking of it would be to put the <p> element into an anchor tag:

<a href="someurl"> <p>Some content</p> </a>