HTML Table that spans two columns

Question

I have a very simple HTML table with some text, and want a link to span two of the table columns, but to still keep the two columns separate for the purpose of formatting. I've tried something like

<table>
    <tr>
        <a href="#">
            <td>text 1</td>
            <td>text 2</td>
        </a>
    </tr>
</table>

but the link doesn't appear and when inspecting the HTML, the <a> tag isn't there at all. Is there any way to do this? I don't want the text inside to span two columns, just the link to work on the text and the space in between.

Answer 1

What you are trying to do is not a valid HTML. You cannot have <tr> -> <a> -> <td>

Try some thing like below -

<table style="border-collapse: collapse;">
    <tr onclick="location='#'" style="cursor:pointer; color: blue;">
        <td style="border-bottom: 1px solid blue;">text 1</td>
        <td style="border-bottom: 1px solid blue;">text 2</td>
    </tr>
</table>

• Added border-collapse: collapse; on table tag to remove space between the columns
• onclick="location='#'" on tr tag to redirect to the new page (behaviour of anchor tag)
• color: blue; on the tr tag to make it look like anchor tag
• border-bottom: 1px solid blue; on the td tags so that there is an underline like the anchor tag

You can see this on stackblitz here .

Answer 2

The anchor spanning two cells is illegal HTML

Instead use two A tags

<table>
  <tr>
    <td><a href="...">text 1</a></td>
    <td><a href="...">text 2</a></td>
  </tr> 
</table>

or an onclick of the table row

<tr onclick="location='otherpage.html'" style="cursor:pointer"> 

Answer 3

Using an Anchor tag to span two columns is wrong Instead collapse the two table columns

Answer 4

You can't put an anchor tag in a table.. it's wrong.

Rather.. put the tag in the tag then set the span to 2.. to cover two columns.. Or u cab just do tag in the twice.

Hope this helps.

Answer 5

A single anchor tag should not be used for two elements. Rather, use something like text 1 text 2