HTML Forum

I'm working on a site that is 90% tabular data. I never thought I would code this many tables in my life once I switched over to CSS for layout. I want to make a table cell clickable so that a person can drill the data from that cell down further. I'm displaying the data in the cell by color ad not text with each color representing a different possible variable for that cell. The color is being displayed by changing the background color of each cell using css. So there is very little text in the cell to make clickable. Is there an easy way to make the whole thing clickable?

I've seen a feww approaches, and there may be others. The choice depends on whether you need a true <a> element or not.

If you do want to use an <a> tag, then play around with padding on the anchor tag for that little bit of text that you do have. The padding area is completely clickable, so this can expand the "hotspot" to fill (or nearly fill) the table cell.

Also, try giving the <a> tags a display:block rule. This way you can define a width and height for the anchor tag that fills (or nearly fills) the entire cell

A different approach uses javascript on the <td> element, giving it an onclick action - onmouseover as well, if you want to simulate a hover behavior. The plus side here is that the entire cell becomes clickable, no little "dead zones" around the edges. The downsite is that you are using javascript (may be turned off) and search engines will not see these clickable cells as ture links.