How to Make a Link from a <Td> Table Cell

how to make a cell of table hyperlink

Try this:

HTML:

<table width="200" border="1" class="table">
    <tr>
        <td><a href="#"> </a></td>
        <td> </td>
        <td> </td>
    </tr>
</table>

CSS:

.table a
{
    display:block;
    text-decoration:none;
}

I hope it will work fine.

How can I make a link from a td table cell

Yes, that's possible, albeit not literally the <td>, but what's in it. The simple trick is, to make sure that the content extends to the borders of the cell (it won't include the borders itself though).

As already explained, this isn't semantically correct. An a element is an inline element and should not be used as block-level element. However, here's an example (but JavaScript plus a td:hover CSS style will be much neater) that works in most browsers:

<td>
  <a href="http://example.com">
    <div style="height:100%;width:100%">
      hello world
    </div>
  </a>
</td>

PS: it's actually neater to change a in a block-level element using CSS as explained in another solution in this thread. it won't work well in IE6 though, but that's no news ;)

Alternative (non-advised) solution

If your world is only Internet Explorer (rare, nowadays), you can violate the HTML standard and write this, it will work as expected, but will be highly frowned upon and be considered ill-advised (you haven't heard this from me). Any other browser than IE will not render the link, but will show the table correctly.

<table>
    <tr>
        <a href="http://example.com"><td  width="200">hello world</td></a>
    </tr>
</table>

how to make a whole row in a table clickable as a link?

Author's note I:

Please look at other answers below, especially ones that do not use jquery.

Author's note II:

Preserved for posterity but surely the wrong approach in 2020. (Was non idiomatic even back in 2017)

Original Answer

You are using Bootstrap which means you are using jQuery :^), so one way to do it is:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

Of course you don't have to use href or switch locations, you can do whatever you like in the click handler function. Read up on jQuery and how to write handlers;

Advantage of using a class over id is that you can apply the solution to multiple rows:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

and your code base doesn't change. The same handler would take care of all the rows.

Another option

You can use Bootstrap jQuery callbacks like this (in a document.ready callback):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

This has the advantage of not being reset upon table sorting (which happens with the other option).

Note

Since this was posted window.document.location is obsolete (or deprecated at the very least) use window.location instead.

Table cell as a link

Try this:

.myTable td a {display:block;width:100%;height:100%;margin:0}

How do I make a link fill a table cell of varying height?

Since the image height is always changing, take the words out of the <a>. Make the link be positioned absolutely within the block so it takes up the whole space. This will make the width of the td's still be to the cell's content so that the link can cover the entire space.

td{  border:1px solid;  position:relative;}td a{  position:absolute;  top:0;  bottom:0;  right:0;  left:0;}

<table>  <tr>    <td>      <a href="https://google.com"></a>      My Link    </td>    <td>      <img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />    </td>  </tr></table>

How to turn a whole table cell into a link in HTML/CSS?

Try display: flex and justify-content: center instead of display: block.

a {  background: lightblue;  display: flex;  justify-content: center;  text-decoration: none;}

<table align="center" border="1">  <tr>  <td><a href="#"><p>Home</p></a></td>  </tr></table>

Make entire contents of a TableCell into a link conditionally

You can create a header cell data array that describes anything you need to render the TableCell:

const headerCellData = [
  {
    name: 'Calories',
    link: '/',
  },
  {
    name: 'Fat (g)',
    link: '/?filter=fat',
    align: 'right',
  },
  {
    name: 'Carbs (g)',
    link: '/?filter=carbs',
    align: 'right',
  },
  {
    name: 'Protein (g)',
    align: 'right',
  },
];

Then map each data item to the TableCell:

<TableHead>
  <TableRow>
    {headerCellData.map((c) => (
      <TableCell align={c.align}>
        {c.link ? <Link to={c.link}>{c.name}</Link> : c.name}
      </TableCell>
    ))}
  </TableRow>
</TableHead>

make the entire contents of the cell clickable

If you want the entire cell clickable (not just the text), you need to play around with CSS a little bit. Remove the padding of TableCell where it's unclickable and set the padding of the container that holds the link to 16px which is the padding of the TableCell we just removed:

<TableCell align={c.align} sx={{ padding: 0 }}>
  <Box sx={{ padding: '16px' }}>
    {c.link ? <Link to={c.link}>{c.name}</Link> : c.name}
  </Box>
</TableCell>

Codesandbox Demo

How to extract hyperlinks from table cells in row/column loop

My solution was the following:

        for (var j = 0, col; col = row.cells[j]; j++) {

            // Checking for href and extracing link
            var links = col.getElementsByTagName('a');

            if (links.length > 0) {
                var cellData = links[0].getAttribute('href');
            } else {
                var cellData = col.textContent;
            }

            rowData.push(cellData);

Show td link in browser

You need "normal" <a> tags for this to work. Example:

tr td { width: 50%; }
tr th { background: #EEE; }
a { color: black; text-decoration: none; }

<table border="1">
<tr><th>Description</th><th>Link</th></tr>
<tr><td>First</td><td><a href="link1" target="_blank">Link 1</a></td></tr>
<tr><td>Second</td><td><a href="link2/multiline" target="_blank">Link<br/>with<br/>multiline<br/>text</a></td></tr>
<tr><td>Third</td><td><a href="link3/long/text" target="_blank">Link with long text with very long description and it will be wrapped automatically</a></td></tr>
</table>