html - table row like a link

You have two ways to do this:

• Using javascript:

  <tr onclick="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%;
}

To get rid of the dead space between columns:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Here is a simple demo of the second example: DEMO

I made myself a custom jquery function:

Html

<tr data-href="site.com/whatever">

jQuery

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

Easy and perfect for me. Hopefully it helps you.

(I know OP want CSS and HTML only, but consider jQuery)

Edit

Agreed with Matt Kantor using data attr. Edited answer above

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>

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 */
}