CODEWITHSUNDEEP
html
Jeffmagma
Jeffmagma

Reputation: 460

HTML Table that spans two columns

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.

Upvotes: 0

Views: 498

Answers (5)

Ali Victor
Ali Victor

Reputation: 1

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

Upvotes: 0

Shadow
Shadow

Reputation: 1

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.

Upvotes: 0

Emmiefroshe
Emmiefroshe

Reputation: 1

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

Upvotes: 0

Nithin Kumar Biliya
Nithin Kumar Biliya

Reputation: 3021

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.

Upvotes: 1

mplungjan
mplungjan

Reputation: 178403

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

Upvotes: 0

Related Questions