CODEWITHSUNDEEP
htmlcss
Oleg Dats
Oleg Dats

Reputation: 4133

How to put <table> inside <a> tag?

Is it good solution to put table inside a tag ? Why link doesn't work when it wraps table ? 

<a href="/place">
  <table>
    <tr>
      <td>
        <span class="place-icon" />
      </td>
      <td> 
        My place name
      </td>
    </tr>
  </table>
</a>

Upvotes: 4

Views: 3628

Answers (3)

Rab
Rab

Reputation: 35572

It's not. You shouldn't.

if you want to enable click on table. then you can just do it by attaching click event to table.

 <table  onclick="window.location='yoururl'">
    <tr>
      <td>
        <span class="place-icon" />
      </td>
      <td> 
        My place name
      </td>
    </tr>
  </table>

Upvotes: 1

Ridcully
Ridcully

Reputation: 23655

it seems to me, that you just want to have a link with icon and text, both linking to /place and that you use <table> just for the layout, right? Why not get rid off the table and do the layout using css?

Upvotes: 1

Tim M.
Tim M.

Reputation: 54377

I need to implement the next html

No, you don't, and shouldn't. Really. It's invalid, non-semantic, and (perhaps most importantly) won't work reliably because of those reasons.

If all you want is an image and some text (which is linked), use something like:

<a href="/place" class="button">My Place Name</a>

.button {
    display: inline-block;
    background-image: url();
    background-position: 2px 2px;
    padding-left: 16px; /* size of image */
}

Here's a working example: http://jsfiddle.net/RvTp3/

Per comments, here is another example showing an image aligned to the vertical middle when the text wraps: http://jsfiddle.net/RvTp3/1/

Upvotes: 6

Related Questions