tags:

views:

702

answers:

2

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>
+4  A: 

CSS:

table { empty-cells: show; }

but that's not supported in IE. &nbsp; is still your best bet for backwards compatibility.

cletus
Well done for pointing out the correct CSS as well as the compatibility issue.
Noldorin
For me, on Firefox 3.0.11 this does not give the requested behavior of making the cell clickable.
gotgenes
Well, no cell will be clickable (beyond selecting text) without a click event handler that does something to the cell but that doesn't seem to be the question.
cletus
I just edited my post to contain my definition of "clickable", which is not in the JavaScript sense, but rather anchor-tag (link) sense.
gotgenes
+1  A: 

You can find an interesting article (partly) about this problem here.

I'd personally go for the &nbsp; 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)?

ChristopheD
Yes, I think we will go the   route We have gene expression contrasts and values for enrichment groups. For every contrast and for every group, there is a value. We're showing those values as colors rather than text, however. So a table both is and is not the correct way to layout the data. Nice link, too.
gotgenes