LINK EM TABELA

Bom dia, existem duas formas:

Essa embora seja mais semântica, você tem mais repetição de código:

<table cellspacing="0" cellpadding="0">
 <thead>
 <tr>
 <td>A</td>
 <td>B</td>
 <td>C</td>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><a href="http://www.google.com.br" target="_blank">Conteudo</a></td>
 <td><a href="http://www.google.com.br" target="_blank">#fff</a></td>
 <td><a href="http://www.google.com.br" target="_blank">#fff</a></td>
 </tr>
 <tr>
 <td> <a href="http://www.bing.com.br" target="_blank">Conteudo2</a></td>
 <td><a href="http://www.bing.com.br" target="_blank">#fff</a></td>
 <td><a href="http://www.bing.com.br" target="_blank">#fff</a></td>
 </tr>
 </tbody>
</table>

	E no css:

table thead td{

 padding: 2px 12px;
 background-color: #eee;
}

table td{

 border: 1px solid #ccc;
 width: 100px;
}

table td a{

 width: 100%;
 float:left;
 padding: 4px 12px;
 text-decoration: none;
 color: #000;
}

table tbody tr:hover td{

 background-color: #d4ebff;
}

	 

	Nessa solução, usamos a estrutura de tabela, que é a indicada nesse caso e aplicamos links com 100% de tamanho dentro de cada célula (td). Caso necessite que uma coluna não tenha o evento click, basta não adicionar a tag <a> nela. Veja a solução aqui: [https://jsfiddle.net/dougtop/khbqg7cq/](https://jsfiddle.net/dougtop/khbqg7cq/)

	 

	No segundo exemplo, pode-se criar uma tabela usando divs:

<div class="table">
 <div class="row-table-head">
 <div class="col-table">A</div>
 <div class="col-table">B</div>
 <div class="col-table">C</div>
 </div>
 <div class="row-table">
 <a href="http://www.google.com.br" target="_blank">
 <div class="col-table">Conteudo2</div>
 <div class="col-table">#fff</div>
 <div class="col-table">#fff</div>
 </a>
 </div>
 <div class="row-table">
 <a href="http://www.bing.com.br" target="_blank">
 <div class="col-table">Conteudo</div>
 <div class="col-table">#fff</div>
 <div class="col-table">#fff</div>
 </a>
 </div>
</div>

	E no css:

.row-table-head, .row-table a{

 display: grid;
 grid-template-columns: 100px 100px 100px;
}

.row-table a{

 text-decoration: none;
 color: #000;
}

.row-table a:hover .col-table{

 background-color: #d4ebff;
}

.row-table-head .col-table{

 padding: 2px 12px;
 border: 1px solid #ccc;
 background-color: #eee;
}

.row-table .col-table{

 padding: 4px 12px;
 border: 1px solid #ccc;
}

	Aqui nós economizamos código ao definirmos apenas uma vez o link para cada linha da tabela. O lado ruim dessa estrutura é que não tem como remover o click em uma coluna ou outra. Veja aqui: [https://jsfiddle.net/dougtop/nbbbpqev/](https://jsfiddle.net/dougtop/nbbbpqev/)

	 

	Abraços, Douglas.

Estou com um caso similar, mas um pouco mais complicado. Estou utilizando uma planilha online do google como fonte de dados e criei uma página html com uma tabela cujos dados vêm lá da planilha do google. Tenho uma coluna cujas células possuem link. Contudo, na tabela html os link não aparecem clicáveis. O modelo postado pelo colega só serve para link fixos e pré-definidos. No meu caso, cada célula terá um link diferente. Como posso fazer esse procedimento?