:: How to make a whole table cell clickable ::

This example shows how to use an entire table cell as a link and to have it change color when the user's mouse passes over the cell.

We have used the following CSS so that the whole cell highlights when hovered over.

We apply the navbar class to the table:

<table border="1" cellpadding="0" cellspacing="0" class="navbar">

CSS Used: table.navbar { border-collapse: collapse; } table.navbar td { border: 1px solid black; } table.navbar td a{ display: block; width: 200px; padding: 3px; text-decoration: none; } table.navbar td a:link, table.navbar td a:visited { color: #FFF; background-color: #666666; } table.navbar td a:hover, table.navbar td a:active { color: #fff; background-color: #CCCCCC; }

Back to tutorials page