...

View Full Version : Make entire <td> a link



error792
12-24-2009, 07:13 PM
I want to make some cells of a table into links; the entire area of the table cell should be clickable. Currently, only the text portion of the cell is clickable, and usually this won't fill the entire cell. How do I do this?


<!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" xml:lang="en">
<style type="text/css">
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #000;
padding: 0;
}
a {
display: block;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td><a href="#">Link 1</a></td>
<td rowspan="2"><a href="#">Link 2</a></td>
</tr>
<tr>
<td><a href="#">Link 3</a></td>
</tr>
</table>
</body>
</html>

Excavator
12-24-2009, 08:01 PM
Hello error792,
I don't know about tables, do you know tables are not for layout (http://www.hotdesign.com/seybold/everything.html)?
Here is a demo that shows a couple ul menus that have clickable areas larger than the text. http://nopeople.com/CSS/ulmenu/index.html -View the source to see how it's done.

sparkbox
12-24-2009, 10:29 PM
no idea why you want to do this but ok

<table name="badger" onclick="window.location.href='http://www.google.com'">
<tr>
<td class="row1" width="100%" style="cursor:hand; padding: 30px; border: 1px solid black;" >&nbsp;</td>
</t>
</table>

there ya go

error792
12-24-2009, 11:44 PM
Yes, I know tables are not for layout. I'm using it for a schedule, which is certainly tabular data.

The cells need to link to different things, so attaching an event to the entire table won't work either. I might be able to attach events to each table cell, but it would be much cleaner to use <a>'s; it seems simple enough that it ought to be possible.

sparkbox
12-24-2009, 11:59 PM
sorry the edit didnt work

onclick="window.location.href='http://www.google.com'

you need that function in your td

VIPStephan
12-25-2009, 01:32 AM
Yes, I know tables are not for layout. I'm using it for a schedule, which is certainly tabular data.

The cells need to link to different things, so attaching an event to the entire table won't work either. I might be able to attach events to each table cell, but it would be much cleaner to use <a>'s; it seems simple enough that it ought to be possible.

sparkbox: hand is not valid value for the CSS cursor property. It must read cursor: pointer.

error792: If you’re going for the HTML link inside table cells (and the links are the only elements in these cells) then it might help to make the anchors display as block element (display: block). You can then also assign a height if you want.

sparkbox
12-25-2009, 02:30 AM
sparkbox: hand is not valid value for the CSS

i know, hense why i reposted the correct section of code later

error792
12-25-2009, 07:52 AM
error792: If you’re going for the HTML link inside table cells (and the links are the only elements in these cells) then it might help to make the anchors display as block element (display: block). You can then also assign a height if you want.
I did this, it doesn't work.



<!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" xml:lang="en">
<style type="text/css">
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #000;
padding: 0;
}
a {
display: block;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td><a href="#">Link 1</a></td>
<td rowspan="2"><a href="#">Link 2</a></td>
</tr>
<tr>
<td><a href="#">Link 3</a></td>
</tr>
</table>
</body>
</html>

VIPStephan
12-25-2009, 10:36 AM
Block elements have a width that is filling their parent (i. e. 100%) by default. However, you can’t have a percent height since this relates to the parent element’s height. If that one isn’t set then height 100% doesn’t work either. And as far as I remember table cells are somewhat special in that even when you specify a height the direct child won’t use that. So you probably need an absolute size in pixels or ems.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum