I would like to make all cells of an HTML table clickable–that is, the link from the anchor tag is active–from any point within a cell. The catch is that the cells have no contents. We are simply using the HTML table to visually represent quantities by coloring the backgrounds of each cell. The cells to contain anchor tags, but no content between the anchor tags.
Below are three examples of tables. In the first table, no dimensions for cells are defined. In the second table, minimum dimensions are defined. In the third table, width and height are explicitly defined. In the first cell of the first row of each table is a simple period character. Notice that in the first and second tables, only that cell is clickable. We would like to avoid explicitly setting height and width, and so if we could get modify either of the first two tables to match the clickable-behavior of the third, that would be fantastic. We could put a non-breaking space ( ) in the anchor tags, but is there another, more elegant solution?
<html>
<head>
<style>
td.min {min-width: 1px; min-height: 1px;}
td.defined {width: 50px; height: 50px;}
td a.fullcell {width: 100%; height: 100%; display: block;}
</style>
</head>
<body>
<h1>No dimension defined</h1>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td>B</td>
<td bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
<h1>Min-dimension defined</h1>
<table border="1">
<tr>
<td class="min">1</td>
<td class="min">2</td>
<td class="min">3</td>
</tr>
<tr>
<td class="min">A</td>
<td class="min" bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td class="min" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td class="min">B</td>
<td class="min" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td class="min" bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
<h1>Dimensions defined</h1>
<table border="1">
<tr>
<td class="defined">1</td>
<td class="defined">2</td>
<td class="defined">3</td>
</tr>
<tr>
<td class="defined">A</td>
<td class="defined" bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td class="defined" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td class="defined">B</td>
<td class="defined" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td class="defined" bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
</body>
</html>
You can find an interesting article (partly) about this problem here.
I’d personally go for the route: it triggers relatively coherent behaviour (in different browsers) and it is quite commonly used nowadays.
Another question would be: do you really need tables for layout (is this tabular data)?