html - table row like a link.

Question

Hello, i can't set my table row as link to something. I can use only css and html. I tried differenet things from div in row to something another, but still can't make it works.

Answer 1

Can you add an A tag to the row?

<tr><td>
<a href="./link.htm"></a>
</td></tr>

Is this what you're asking?

Answer 2

You can't wrap a <td> element with an <a> tag, but you can accomplish similar functionality by using the onclick event to call a function. An example is found here, something like this function:

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

And add it to your table like this:

<tr onclick="DoNav('http://stackoverflow.com/')"&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;

Answer 3

The usual way is to assign some JavaScript to the onClick attribute of the TR element.

If you can't use JavaScript, then you must use a trick:

1. Add the same link to each TD of the same row (the link must be the outermost element in the cell).

2. Turn links into block elements: a { display: block; width: 100%; height: 100%; }

The latter will force the link to fill the whole cell so clicking anywhere will invoke the link.

Answer 4

//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

Something along these lines perhaps? Though it does use JS, but that's only way to make a row (tr) clickable.

Unless you have a single cell with an anchor tag that fills the entire cell.

And then, you shouldn't be using a table anyhow.

Answer 5

You have two ways to do this:

• Using javascript:

  <tr onlick="document.location = 'links.html';">

• Using anchors:

  <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

I made the second work using:

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

Answer 6

If you're on a browser that supports it you can use CSS to transform the <a> into a table row:

.table-row { display: table-row; }
.table-cell { display: table-cell; }

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

Of course, you're limited to not putting block elements inside the <a>. You also can't mix this in with a regular <table>

Answer 7

If you have to use a table, you can put a link into each table cell:

<table>
  <tbody>
    <tr>
      <td><a href="person1.html">John Smith</a></td>
      <td><a href="person1.html">123 Fake St</a></td>
      <td><a href="person1.html">90210</a></td>
    </tr>
    <tr>
      <td><a href="person2.html">Peter Nguyen</a></td>
      <td><a href="person2.html">456 Elm Ave</a></td>
      <td><a href="person2.html">90210</a></td>
    </tr>
  </tbody>
</table>

And make the links fill up the entire cells:

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

If you are able to use <div>s instead of a table, your HTML can be a lot simpler, and you won't get "gaps" in the links, between the table cells:

<div class="myTable">
  <a href="person1.html">
    <span>John Smith</span>
    <span>123 Fake St</span>
    <span>90210</span>
  </a>
  <a href="person2.html">
    <span>Peter Nguyen</span>
    <span>456 Elm Ave</span>
    <span>90210</span>
  </a>
</div>

Here is the CSS that goes with the <div> method:

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}