How to Make a Cell of Table Hyperlink

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 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>

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>

Table cell as a link

Try this:

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

Create Hyperlink, when data is added to row, based on cell value

Try this:

Private Sub Worksheet_Change(ByVal Target As Range)

    Dim LastRow As Long, rng As Range, c As Range, addr
    
    LastRow = Me.Cells(Me.Rows.Count, 1).End(xlUp).Row
    
    On Error GoTo haveError
    
    'see if any cells of interest have changed
    Set rng = Application.Intersect(Target, Me.Range("A1:A" & LastRow & ",C1:C" & LastRow))
    If Not rng Is Nothing Then
        Application.EnableEvents = False
        For Each c In rng.Cells
            Select Case c.Column  'select link address based on column
                Case 1: addr = c.EntireRow.Columns("D")
                Case 3: addr = Cells(c.Row, "E") & Cells(c.Row, "A") & " Rev " & Cells(c.Row, "B") & ".pdf"
            End Select
            c.Parent.Hyperlinks.Add Anchor:=c, Address:=addr, TextToDisplay:=c.Value2
            c.Font.Size = 10
            c.Font.Underline = False
        Next c
        Application.EnableEvents = True
    End If
    
    Exit Sub 'don't run into the error handler
    
haveError:
    Application.EnableEvents = True 'make sure an error doesn't leave events turned off
End Sub

EDIT: I think this is probably closer to what you want. It'd easier just to treat each row as a unit, rather than try to track changes per-cell and only update certain links.

Private Sub Worksheet_Change(ByVal Target As Range)

    Dim LastRow As Long, rng As Range, rw As Range, addr, txt
    
    LastRow = Me.Cells(Me.Rows.Count, 1).End(xlUp).Row
    
    On Error GoTo haveError
    
    'see if any cells of interest have changed
    Set rng = Application.Intersect(Target.EntireRow, Me.Range("A1:F" & LastRow))
    If Not rng Is Nothing Then
        Application.EnableEvents = False
        
        'loop over changed rows
        For Each rw In rng.Rows
            
            Me.Hyperlinks.Add anchor:=rw.Columns("A"), _
                     Address:=rw.Columns("D").Value, _
                     TextToDisplay:=rw.Columns("A").Value2
            
            Me.Hyperlinks.Add anchor:=rw.Columns("C"), _
                     Address:=rw.Columns("E") & rw.Columns("A") & " Rev " & rw.Columns("B") & ".pdf", _
                     TextToDisplay:=rw.Columns("C").Value2
            
            If Len(rw.Columns("E").Value) > 0 Then
                Me.Hyperlinks.Add anchor:=rw.Columns("F"), _
                     Address:="{whatever is the path here}", _
                     TextToDisplay:="View file local"
            Else
                rw.Columns("E").Value = "File not found"
            End If
            
            With rw.Range("A1,C1,F1") 'Range() is *relative* to rw
                .Font.Size = 10
                .Font.Underline = False
            End With
        
        Next rw
        
        Application.EnableEvents = True
    End If
    
    Exit Sub 'don't run into the error handler
    
haveError:
    Application.EnableEvents = True 'make sure an error doesn't leave events turned off
End Sub

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.

Apache POI 5 : Set hyperlinks in word table cell

Your setLink method assumes that the XWPFTableCell has paragraphs already. But that is not the case for new created empty XWPFTableCells. So the code lines in body of for (XWPFParagraph paragraph : cell.getParagraphs()) will not get reached, since cell.getParagraphs() returns an empty List.

Your setLink method should better look like so:

...
 static void setLink(XWPFTableCell cell, String text, String link) {
  XWPFParagraph paragraph = cell.addParagraph();
  XWPFRun run = paragraph.createHyperlinkRun(link);
  run.setText(text);
  run.setUnderline(UnderlinePatterns.SINGLE);
  run.setColor("0000FF");
 }
...

The setting the font size should not be done inside setLink. For this you have setFontSize. This method also assumes that the XWPFTableCell has paragraphs already. But this is true because it gets called after setting text into the cell.

So both the methods could be called like:

...
 XWPFTableCell desCell = desRow.getCell(col);
 setLink(desCell, text, encURL);
 setFontSize(desCell, 6);
...

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);

How to Make a Cell of Table Hyperlink