dougtop

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/ 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/ Abraços, Douglas.