Alt-Web Design & Publishing
CSS Clickable Table Cells

Description:

Sometimes it's nice to have an entire table cell behave like an active link or button. Unfortunately HTML doesn't allow <td> tags to be inside anchors. When used, anchors need to be inside <td> tags. Now with the magic of CSS, we can style table cells and the anchor tags inside them to work as a single unit.

Example:

Mouseover or use your Tab key to highlight cells below

musicLorem ipsum dolor sit amet, consectetur adipiscing elit.

Maple LeafLorem ipsum dolor sit amet, consectetur adipiscing elit.

SafariLorem ipsum dolor sit amet, consectetur adipiscing elit.

Some link

Some link

Some link

Method:

I built this table with a product catalog in mind so my CSS selector name (.prod) reflects this. You can change the code to use any selector name you wish.

How I survived a computer disaster

 

Spam Filter - Free Trial

CSS2 Code

table.prod {
width: 600px;
border-collapse:collapse; border:none;
}

.prod a img {
border:none;
float:left;
padding-right:12px;
}

.prod td {
width:200px;
border: 1px solid #000
}

.prod td p {
margin:0;
line-height: 1.2em;
font-size: 16px;
}

/**here's the magic part**/

.prod td a {
display:block;
height:7em; /**adjust height in ems as required**/
text-decoration:none;
}

/**link states**/

.prod td a:link {color: #000}

.prod td a:visited {color:#666}

.prod td a:hover, .prod td a:active, .prod td a:focus {
background-color:#CCFF00
}


Earn money from your website with Lunarpages Affiliate Program.
Lunarpages.com Web Hosting

HTML Code

<table class="prod" cellspacing="0" cellpadding="0">

<tr>
<td><p><a href="#"><img src="your-image.png"/>Some link text goes here</a></p></td>

<td><p><a href="#"><img src="your-image.png"/>Some link text goes here</a></p></td>

<td><p><a href="#"><img src="your-image.png"/>Some link text goes here</a></p></td>

</tr>

<tr>
<td><p><a href="#">Some link</a></p></td>
<td><p><a href="#">Some link</a></p></td>
<td><p><a href="#">Some link</a></p></td>

</tr>

</table>

 

 

bookmarks

 

 

Lunarpages.com Web Hosting

 

Valid XHTML 1.0 Transitional    Valid CSS!

Demos:

CSS Templates: