How do I make an entire row of a table clickable in css?

Question

If I have the following code what would I add to make a row clickable as a link? (be gentle I am new to this) I have tried a couple of things, but I am very new to this so I am struggling to get it right:

 .hoverTable { width: 700px; border-collapse: collapse; } .hoverTable td { padding: 7px; border: #315795 1px solid; font-family: "tradegothic"; font-size: 14px; color: #315795; } /* Define the default color for all the table rows */ .hoverTable tr { background: #bec7d6; } /* Define the hover highlight color for the table row */ .hoverTable tr:hover { background-color: #315795; color: #ffffff; } /* Define the hover highlight color for the table row */ .hoverTable td:hover { background-color: #315795; color: #ffffff; } 

 <table class="hoverTable" style="width: 700px;"> <tbody> <tr class="clickable-row" data-href="mathdept.ucr.edu"> <td colspan="3"><strong><a>CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE<span style="float: right;">►►</span></a><br /></strong></td> </tr> <tr> <td colspan="3"><strong>OUR PEOPLE - COMMITTEES <span style="float: right;">►►</span></strong></td> </tr> <tr> <td colspan="3"><strong>SEMINARS, COLLOQUIUM, CONFERENCES &amp; RESEARCH <span style="float: right;">►►</span></strong></td> </tr> </tbody> </table> 

Answer 1

if I understood correctly you need to create something like in the picture that I uploade:

In order to create that you need to put the href="information" inside of tag :

enter code here

<tr class="clickable-row">
<td colspan="3"><strong><a href="/mathdept.ucr.edu">CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE<span style="float: right;">►►</span></a><br /></strong></td>
</tr>

Answer 2

HTML has two basic types of elements, inline elements and block elements. If you want to know more about it, just read here .

Because them <a> tag belongs to the class of the inline elements, it won't fill the whole table cell. The trick is to convert the anker tag with the link to a block element:

a {
  display: block;
}

Now the anker will fill the complete cell. Below you will find a code example on how this solution works.

---

I have two extra advices for you as beginner:

Use of Non-Standard Fonts

Please take care, if you are using unusual fonts like tradegothic , which are not installed an all computers. If a visitor of a website does not have this font installed on his machine, he will see your website in the default font of his web browser.

If you want to use a custom font, please read here .

Do not use tables if not necessary

Using a table to display a navigation or other non-table data is mostly considered as a bad style of code .

Below you will find the exakt same looking navigation box without using an html table. This code could be considered to be more clean.

 .nav { width: 700px; /* Define the width of the navigation box */ padding: 0; } .nav li { list-style-type: none; margin: -1px 0 0 0; } /* Define the style of the ankers */ .nav a, .nav a:visited { display: block; border: #315795 1px solid; padding: 7px; font-family: "tradegothic"; font-size: 14px; font-weight: bold; text-decoration: none; color: #315795; background: #bec7d6; } /* Define the hover style for the ankers */ .nav a:hover { background-color: #315795; color: #ffffff; } /* Define the Arrows */ .nav a::after { content: "►►"; float: right; } 

 <ul class="nav"> <li><a href="http://stackoverflow.com">CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE</a></li> <li><a href="http://stackoverflow.com">OUR PEOPLE - COMMITTEES</a></li> <li><a href="http://stackoverflow.com">SEMINARS, COLLOQUIUM, CONFERENCES &amp; RESEARCH</a></li> </ul> 

---

Original Solution with Table

If you, for whatever reasons, prefer the table solution, here you will find the fixed code.

 .hoverTable { width: 700px; border-collapse: collapse; } .hoverTable td { padding: 0; border: #315795 1px solid; } /* Define the style for normal and visited links */ .hoverTable a, .hoverTable a:visited { display: block; padding: 7px; text-decoration: none; font-weight: bold; font-family: "tradegothic"; font-size: 14px; color: #315795; background: #bec7d6; } /* Define the hover style for the links */ .hoverTable a:hover { color: #ffffff; background: #315795; } 

 <table class="hoverTable"> <tbody> <tr class="clickable-row" data-href="mathdept.ucr.edu"> <td colspan="3"><a href="http://stackoverflow.com">CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE<span style="float: right;">►►</span></a></td> </tr> <tr> <td colspan="3"><a href="http://stackoverflow.com">OUR PEOPLE - COMMITTEES <span style="float: right;">►►</span></a></td> </tr> <tr> <td colspan="3"><a href="http://stackoverflow.com">SEMINARS, COLLOQUIUM, CONFERENCES &amp; RESEARCH <span style="float: right;">►►</span></a></td> </tr> </tbody> </table>