Как обернуть таблицу в ссылку?

Question

Какие элементы допускают ссылку?

Я хочу обернуть ссылку вокруг table,

<a href="123.php" class="grap" >
    <table border="1" style="width:600px; height:600px;">
        <tbody>
            <tr>
                <td align="center" style="border:1px solid red"><img src="thumb-pic-1.jpg" alt="123"/></td>
            </tr>
        </tbody>
    </table>
</a>

Но это не правильный HTML, как в http://validator.w3.org/

Я могу поставить ссылку в форме , как это,

<form action="123.php" class="grap" >
    <table border="1" style="width:600px; height:600px;">
        <tbody>
            <tr>
                <td align="center" style="border:1px solid red"><img src="thumb-pic-1.jpg" alt="123"/></td>
            </tr>
        </tbody>
    </table>
</form>

Но link или table не предназначены для представления формы ...

Интересно, а есть ли как-нибудь обернуть таблицу в ссылку?

EDIT:

Извините, забыл упоминание о том, что мне нужно получить ссылку на URL, как это,

$('.grap').click(function(){
            alert($(this).attr('action'));
            return false;
        });

Answer 1

<a> является встроенным элементом, а <table> является блочным элементом. Блочные элементы не допускаются во встроенных элементах в xhtml. Но как насчет прослушивателя щелчков на столе или div вокруг стола? Эффект должен быть таким же.

Это может быть также интересно для вас: Неправильно ли изменить элемент блока на встроенный в CSS, если он содержит другой элемент блока?

Answer 2

Браузеры позволяют вам обернуть таблицу внутри ссылки. Практические проблемы с ним связаны с рендерингом (браузеры могут подчеркивать или не подчеркивать текстовое содержимое и рисовать границы вокруг изображений внутри ссылки), а не с основными функциями. Например, это не соответствует HTML 4.01, но что с того?

В вашем примере таблица содержит только одну ячейку, которая содержит только одно изображение. Вместо этого вы можете использовать просто элемент img и стилизовать его соответствующим образом. В более сложном случае таблица может быть полезной. Тогда вам, вероятно, следует установить color и text-decoration для него в CSS и border для любого img, содержащегося в нем, так, чтобы вы получали нужный вам рендеринг, а не изменяющийся рендеринг по умолчанию в браузере для такой ситуации.

Answer 3

Вы можете заставить таблицу думать, что это ссылка.

<table border="0" style="cursor:pointer" onMouseover="window.status='http://www.stackoverflow.com/'" onMouseout="window.status=''" onMouseup="window.location='http://www.stackoverflow.com/'" width="158" height="158" style="background-image: url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png')">
    <tr>
        <td style="display:none;">This entire table is a link with no content</td>
    </tr>
</table>

Answer 4

Нельзя обернуть элемент уровня блока (например, таблицу) во встроенный элемент (например, в привязку).Однако вы можете использовать display: block; для создания уровня якорного блока.

Вы также можете использовать обработчики событий Javascript, чтобы связать таблицу.Например, у вас может быть этот фрагмент кода в вашем теге head, который назначает событие onclick для таблицы.

Где, idOfYourSpecifiedTable является атрибутом id вашей таблицы (то есть <table id='idOfYourSpecifiedTable'>),

<script type="text/javascript">
    document.getElementById('idOfYourSpecifiedTable').onclick = function() {window.location.href='123.php'};
</script>

или в jQuery

<script type="text/javascript">
    $(function() {
        $('#idOfYourSpecifiedTable').click(function() {window.location.href='123.php';});
    });
</script>

Более того, вы даже можете использовать #idOfYourSpecifiedTable {cursor: pointer;}, чтобы сделать курсор указателем (рукой), когда клиент наводит курсор на него.

Однако у этого метода есть свои недостатки.Примечательно, что робот поисковой системы, скорее всего, не обнаружит вашу таблицу как связанную с другой страницей вашего сайта.