Make a whole table rows a hyperlink with HTML

Published: 12 years ago

The other day when I was creating a new mail inbox feature for a certain website I needed to somehow make a row of information all clickable in order to take you through the full details of that particular message.

I thought there's probably a way I could do this with JavaScript but surely there was an easy way to do this with normal HTML.

The HTML

Unfortunately one drawback to this method is to have to add the same link inside every <td>, making this process slightly repetitive.

   

       

          
Re: Central Heating
          
Hi John, further to our correspondence regarding the quote for the underfloor heating...
          
20th Jan
       
    

The CSS

In order to create the allusion that the whole row is clickable, you need to set both the <td> and the <a> the same "line-height", also set the traditional inline element <a> to display:block; and finally so there's no gaps between cells set "border-spacing" to 0

table { border-spacing: 0; padding:0; }
table td { line-height:24px; }
table td a { display:block; line-height: 24px; }