HTML trouble making a link inside a td

Question

I put a link in a table cell, and it didn't work. I tried it with a javascript function to open a window, which I would prefer, but that didn't work either. So I looked around for info and found this SO page: How can I make a link from a <td> table cell.

I tried every method there that seemed applicable, plus some variations on those methods, but none of them worked at all; although I did get a simple demo to work. The suggestion made to me on that page is that something else in my code is causing the problem, which seems likely to me.

I'm putting the code below, and maybe someone can help? I don't care what kind of link it is --- whether the entire cell, or just the words -- as long as it takes me to the desired page.

<table style = "width: 100%; margin-top: 20px">
<tr>
   <td>
      <a class = "headscript"> Your Communications</a>
        <p class = "nextscript"> There is a lot of correspondence blah, blah...
          <ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
              <li>Item 1 text stuff </li>
              <li>Item 2 more text   </li>

        <p style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; "> </p>
              <li>Item 3 yet more text</li>
       </ul>
    </p>
  </td>

  <td style = "padding-left:20px;">
    <a class = "headscript"> Your Cost </a> 
      <p class = "nextscript"> some text here</p>

    <table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
    <tr>
        <td> <b> Your annual revenue</b></td>
        <td> <b>Your costs </b> </td>
  </tr>
  <tr>
       <td> Up to $50</td>
       <td> $whatever </td>
  </tr>

Here is where I want the link -- the code shown is one of the suggestions, but it doesn't work for me:

   <tr>  
      <td style = "padding: 0"> additional charges
         <a href="overcharges.cfm">
            <div style="height:100%;width:100%"> more info
            </div>
        </a>
      </td>

     <td> lots of text here, so this cell is much longer than the one with the desired link 
     </td
 </tr>

(Hoping the above code is correct. Small errors in the tr and td tags don't seem to make a difference, but could be misleading.)

Maybe it's just a transcription error, but your final `` is malformed: ` — varontron, Oct 01 '16 at 02:19
You left some of the tags opened, try closing them where needed. But this is not the issue. Your link is working perfectly fine with me. — f_i, Oct 01 '16 at 02:24
I'm glad it is working fine with you. And Aman below also has it working. So I remain baffled. BTW I do try to close all the tags, and I sometimes lose that, but as you say, that is not the issue. — Betty Mock, Oct 01 '16 at 18:38

Aman Kumar · Answer 1 · 2016-10-01T03:04:11.933

Error is related to element structure. 'P' element can not be child of 'ul'. Others are due to similar tag and scope mismatch.

Just refined the code. It's working here

Blockquote

    <body>
<table style = "width: 100%; margin-top: 20px">
<tr>
   <td>
      <a class = "headscript"> Your Communications</a>
        <div class = "nextscript"> There is a lot of correspondence blah, blah...
        <ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
              <li>Item 1 text stuff </li>
              <li>Item 2 more text   </li>
              <li style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; ">Item 3 yet more text</li>
       </ul>
    </div>
  </td>

  <td style = "padding-left:20px;">
    <a class = "headscript"> Your Cost </a> 
      <p class = "nextscript"> some text here</p>

    <table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
    <tr>
        <td> <b> Your annual revenue</b></td>
        <td> <b>Your costs </b> </td>
  </tr>
  <tr>
       <td> Up to $50</td>
       <td> $whatever </td>
  </tr>  
     <tr>  
      <td style = "padding: 0"> additional charges
         <a href="overcharges.cfm">
            <div style="height:100%;width:100%"> more info
            </div>
        </a>
      </td>

     <td> lots of text here, so this cell is much longer than the one with the desired link 
     </td>
 </tr>
 </table>
  </td>
</tr>
</table>

working example here https://jsfiddle.net/aman9753/jya5L1t5/

Hi Aman, I integrated your sample into my program, but it is still not working. I tried out your jsfiddle, and it does seem to be working, although the two — Betty Mock, Oct 01 '16 at 18:36

HTML trouble making a link inside a td

1 Answers1