Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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>
like image 343
Oleg Dats Avatar asked Feb 20 '23 13:02

Oleg Dats


2 Answers

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/

like image 123
Tim M. Avatar answered Mar 03 '23 18:03

Tim M.


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?

like image 38
Ridcully Avatar answered Mar 03 '23 18:03

Ridcully