HTML table in tag

Question

Is it possible to somehow place a whole HTML table in a href link?

Something like: (does not work in IE)

    <td class="order_confirm">
        <a href="ssss">
            <div>
                <table width="100%" border="0" cellspacing="6" cellpadding="0">
                  <tr>
                    <td><img src="design/img/icon_ok.png" width="22" height="22" alt="objednat" /></td>
                    <td width="0" class="order_confirm_order">OBJEDNAT</td>
                    <td width="100%" class="order_confirm_order_desc">Záväzne si objednávam uvedený tovar a súhlasím s platobnými,<br />
                      dodacími a obchodnými podmienkami prevádzkovateľa.</td>
                  </tr>
                </table>
            </div>
        </a>
    </td>

I am aware of the fact that this is not the best practice, however, I don't really see a workaround for this using a non-table layout... So a solution with a non-table layout would also be acceptable for me.

"Place a whole HTML table in a href link"???????? Let's start by telling us what you want to do. — PeeHaa, Mar 25 '12 at 13:55
You have a `td` with width of 100% while you have other `td`s in that row. — PeeHaa, Mar 25 '12 at 13:56
@PeeHaa - get the whole table in a link to use as a button... if possible... as stated in the question - I know it's not the best practice, but maybe there's some kind of workaround for that... if not, I will have to do it using divs... — Michal, Mar 25 '12 at 14:00
What you want to do is perfectly possible without using tables. — PeeHaa, Mar 25 '12 at 14:02
possible duplicate of [How to wrap a table in a link?](http://stackoverflow.com/questions/9754881/how-to-wrap-a-table-in-a-link) — Jukka K. Korpela, Mar 25 '12 at 14:21

score 2 · Answer 1 · answered Mar 25 '12 at 13:56

2

It isn't correct to place div's or table's in a. (See selfhtml for more information).

What you can do is something like this:

<div onclick="document.location.href = 'new location';">....</div>

answered Mar 25 '12 at 13:56

+1 for this, however, I am aware of it, I don't want to use it, I hope there's an alternetive... – Michal Mar 25 '12 at 14:05
+1 For proposing the method that was later repeated and accepted in another answer... – Guffa Mar 25 '12 at 18:16

score 2 · Answer 2 · answered Mar 25 '12 at 13:57

2

In HTML 5 you can put block elements inside an inline element, so there it would work.

For any browser that doesn't support HTML 5, or if you don't have an HTML 5 doctype in the page, the markup will break, and the div and the table will end up outside the link.

answered Mar 25 '12 at 13:57

Guffa

687,336
108
737
1,005

yeah, well, doctype is XHTML 1.0 Transitional by now, but it's work in progress, so I might change to HTML5. Will there be any other issues switching the doctype? Never worked with HTML5 yet... – Michal Mar 25 '12 at 14:02
@MichalPlško: Well, the greatest issue would be with the browsers that doesn't support HTML 5. – Guffa Mar 25 '12 at 14:38
would they kinda "roll-back" to HTML 4.1 or what? – Michal Mar 25 '12 at 15:07
@MichalPlško: Yes, browsers that doesn't recognise doctypes will fall back to what version it thinks that it might be. Naturally they can't "fall forward" to a version that didn't exist when the browser was released. – Guffa Mar 25 '12 at 16:14

score 1 · Accepted Answer · edited Mar 25 '12 at 19:01

1

If you want your whole table as a link you can simulate it css and javascript.

This example uses jQuery:

<style>
    #big-link {
       cursor: pointer;
    }
</style>

<script>
$(function() {
    $("#big-link").click(function() {
        window.location.href = "ssss";
    });
});
</script>
<div id="big-link">
    <table>
         ...
    </table>
</div>

edited Mar 25 '12 at 19:01

Tim Post

33,371
15
110
174

answered Mar 25 '12 at 14:07

jsonx

1,093
3
14
21

oh, nice option, didn't think of this one... +1 - thanx – Michal Mar 25 '12 at 14:10
maybe you should edit the answer so that it is clear that this is jQuery - not JS alone... (i know that, but someone else might not...) – Michal Mar 25 '12 at 14:11
@MichalPlško: That's the same solution that user1150525 proposed, that you said that you *didn't* want to use... – Guffa Mar 25 '12 at 16:45
@Guffa - not really, he proposed an inline java script, this is jQuery... I can separate this into an external file which is a big advantage for me... inline JS can't be separated to an external file, that was my reason why I didn't wanted to use it... – Michal Mar 25 '12 at 17:26
@MichalPlško: Yes, really. It's the exact same principle, using jQuery is just an implementation detail. – Guffa Mar 25 '12 at 18:04
1

I made an edit to your answer not as a moderator, but as a long time Stack Overflow user. Many people just cut and paste examples given in an accepted answer, then wonder why they don't work. Yes, some people don't know what jQuery is, and you need to account for that just like you need to account for IE6 users not knowing any better, wherever possible. In this case, such accounting is possible, so I added it :) Remember, the OP is not the only one you're teaching. – Tim Post Mar 25 '12 at 19:04

davidcondrey · Answer 4 · 2014-01-29T20:49:26.697

0

Using html4 event attributes you can make the table itself an anchor-tag.

<table
    style="cursor:pointer" 
    onMouseover="window.status='http://www.stackoverflow.com/'" 
    onMouseout="window.status=''" 
    onMouseup="window.location='http://www.stackoverflow.com/'" 
    width="500" height="500">

edited Jan 29 '14 at 20:49

answered Jan 24 '14 at 06:19

davidcondrey

34,416
17
114
136

HTML table in tag

4 Answers4