Table Cell clickable

HTML & CSS
1

How can i make a full table cell clickable? In IE and firefox? <a><td>text</td></a> doesnt work for IE.

2

HI,

You can’t wrap an anchor around block level elements. You can put the anchor inside the td and then set the anchor to display:block and it will fill the table cell.

e.g.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

table{
    width:300px;
border-collapse:collapse;
}
td{background:red;border:1px solid #000}
td a{display:block;position:relative}
td a:hover{background:blue;color:#fff}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
    <tr>
        <td><a href="#">Test</a></td>
        <td><a href="#">Test</a></td>
    </tr>
    <tr>
        <td><a href="#">Test</a></td>
        <td><a href="#">Test</a></td>
    </tr>
    <tr>
        <td><a href="#">Test</a></td>
        <td><a href="#">Test</a></td>
    </tr>
</table>
</body>
</html>

However if your design is more complicated than that then you can’t put block level elements inside that anchor. You would then need to use javascript for IE6 as it only understands hover on anchors.

3

Nice!

Btw, for IE6 i won’t care, only 10% - 20% of people use it nowadays, and i shall block my sites for deprecated browsers to avoid problems and force people to migrate.

I know it sounds a little too much but is the way to the next step. We cant create JS to create a different code for each version of the browser, that would make people to stay with their old versions.

Thanks! :wink:

4

Actually, it’ll make your visitors go to a competitor’s site instead, and stay there.

5

i have no competitor’s on this one :slight_smile:

6

With all browsers including IE6 you can attach JavaScript directly to the cell to handle the click. It is only if you really need the <a> tag that you should use one. A lot of people use <a href=“#”> when it is easier to just use a tag that is alrerady there or <span> if there isn’t a tag to attach the onclick to.

7