Member Avatar for jamello

I would like a table cell to act as my hyperlink. What I have currently is a hyperlink embedded in a table cell, hence it is only when the exact underlined hyperlink text is clicked that the url is obeyed. But not when you click anywhere else. [e.g <tr><td><a href=www.meme.com>clickMe </a></td></tr>]
In the example, the url only works where I click on "Click Me" and not anywhere on the table cell. Please, a helping hand is needed.

  • 3 Contributors
  • 2 Replies
  • 189 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by dennisrivers2

Dani AI

Generated

Short version: keep a real <a> inside the <td> for semantics and accessibility, but make that anchor fill the whole cell so clicks anywhere activate it. Good suggestion from — making the link cover the cell is the right approach. Below is a robust pattern (no invalid markup) and an optional JS enhancement if you need click-on-td behavior.

HTML + CSS (anchor fills the cell)

<td class="link-cell">
  <a href="/target" class="cell-fill">Read details</a>
</td>
.link-cell { position: relative; /* allow absolute child to fill */ }
.link-cell .cell-fill {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 0.5em; /* keep visible label for sighted users */
}

If you prefer a JS-driven approach (use only when you can degrade gracefully), put the URL in a data-href and add keyboard support so the cell is reachable to non-mouse users:

<td class="clickable" data-href="/target">Read details</td>
document.addEventListener('click', function(e){
  var td = e.target.closest && e.target.closest('td.clickable');
  if (td && td.dataset && td.dataset.href) window.location.href = td.dataset.href;
});
document.querySelectorAll('td.clickable').forEach(function(td){
  td.tabIndex = 0;
  td.setAttribute('role','link');
  td.addEventListener('keydown', function(e){
    if (e.key === 'Enter' || e.key === ' ') window.location.href = td.dataset.href;
  });
});

A few cautions: avoid wrapping <tr>/<td> with <a> — that can be invalid in older doctypes. Don’t rely on an “invisible character” trick () without adding proper ARIA or screen‑reader text — instead hide helper text with a proper visually-hidden class or use aria-label. Also consider whether the content is tabular data; if it’s layout or a list of clickable cards, using semantic landmarks (anchors around block elements or CSS grid) will give a clearer, more accessible experience.

Recommended Answers

All 2 Replies

Member Avatar for Member #117553

I would like a table cell to act as my hyperlink. What I have currently is a hyperlink embedded in a table cell, hence it is only when the exact underlined hyperlink text is clicked that the url is obeyed. But not when you click anywhere else. [e.g <tr><td><a href=www.meme.com>clickMe </a></td></tr>]
In the example, the url only works where I click on "Click Me" and not anywhere on the table cell. Please, a helping hand is needed.

Hi there.

If you try to code it like this :
<table><tr><a><td>My link here</td></a></tr></table>

your code may not validate, or result in another error.

Do you have something else apart from text link inside your cell?

In case you have some short text, e.g. "Click here" and your cell is wither or higher than this text, you can make one of the following:

Case 1 - your text is wide as wide as the cell is, however it is not that high - you can set it like this with css:

...<td style="line-height: 50px; font-size: 12px;"><a href="#"> Click me! </a></td>...

In this way, if your cell is 50px high, and your text size is 12px, wherever you point your cursor - it will change as a link pointer.

Case 2
Well - it si more complex, and if you have any other elements in this cell, like images, additional text, etc. it may turn to be a problem, still you can try it. You can set the following css to your link:

...<a href="#" style="display: block; width: 100px; height: 50px;">Click me!</a>....

Try it and advise...

Member Avatar for dennisrivers2

Thanks so much for Case 2! I just tried it and it works fine with Firefox, IE, Safari and Google Chrome. I intend to use a jpg with fancy script as the background image for the entire table. Then I will adjust the cell and row dimensions to create my one-cell hot link zones. Finally, I will have a single period as the linked text. I can change the color of the one character to become invisible by blending in with the background. Thanks again.

commented: start your own thread, do not try to attach to one three years old, in the proper language, "cgi" is the perl language, just as it states in the first line of the code submitted. Read the F instructions -1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.