Vinculando linhas inteiras da tabela

Não há uma maneira fácil de vincular uma linha inteira da tabela, pois você não pode envolver uma <a>tag em torno de uma <tr>tag.

Existem duas abordagens para resolver isso

1. use javascript para ligar ao evento onclick da linha da tabela
2. coloque uma tag âncora dentro de cada célula da tabela da linha

Ambas as abordagens têm problemas:

1. Usar o primeiro método fará com que as pessoas com javascript desabilitado não consigam seguir esse link. Além disso, se você vincular um arquivo, os usuários não poderão fazer coisas como clicar com o botão direito -> salvar como
2. Usar o segundo método resultará em um alvo de clique menor, pois é difícil fazer com que as marcas de âncora sempre se expandam para a largura e altura total das células da tabela

É por isso que faz sentido combinar essas duas abordagens.

Vantagens

1. A linha inteira sempre será clicável (e acionará um efeito de foco)
2. Os usuários podem clicar com o botão direito -> salvar em quase toda a superfície da linha
3. Usuários sem javascript ainda podem seguir o link

HTML

<tr data-href="linkToFile.pdf">
  <td>
    <a href="linkToFile.pdf">Column one</a>
  </td>
  <td>
    <a href="linkToFile.pdf">Column two</a>
  </td>
<tr>

CSS

*[data-href] {
  cursor: pointer;
}
td a {
  display:inline-block;
  min-height:100%;
  width:100%;
  padding: 10px; /* add your padding here */
}
td {
  padding:0;  
}

Tentamos fazer com que a tag âncora ocupe todo o espaço disponível. Isso não funciona bem para células vazias (um  pode ajudar um pouco), bem como nos casos em que algumas células da tabela têm várias linhas. Daí o seguinte javascript.

Javascript (usando jquery)

$('*[data-href]').on("click",function(){
  window.location = $(this).data('href');
  return false;
});
$("td > a").on("click",function(e){
  e.stopPropagation();
});

A chave aqui é usar stopPropagationpara evitar que o evento de clique borbulhe na linha