Как сделать таблицу с ячейками-гиперссылками?
06 февраля 2023 г.
Как сделать таблицу с ячейками-гиперссылками?
Ответ:
Добрый день.
Реализовать ссылки внутри ячеек таблицы очень просто. Достаточно в нужную ячейку таблицы <td> поместить тег ссылки <a>:
<table>
<tbody>
<tr>
<td><a href="http://example.com/">Внешняя ссылка</a></td>
<td><a href="/your_website_page/">Внутренняя ссылка</a></td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>1
Можно ли сделать таблицу так, чтобы само нажатие на ячейку отправляло в гиперссылку?
С гиперкартой понятно; также можно рисунок разбить и куски поместить в ячейки как гиперобъекты, но с т.з. написания, хотелось бы чего-то более изящного.
Варианты которые вижу я:
1) Поместить внутрь ячейки <td> ссылку <a>, растянуть ее с помощью CSS на длину и ширину ячейки.
2) С помощью CSS свойства display: table-cell; привести элементы <a> расположенные внутри таблицы к отображению в качестве ячеек таблицы (возможно при этом также нужно будет менять и родительские элементы, нужно тестировать).
3) Сделать простой JS скрипт, который будет по нажатию на ячейку <td> делать переход по ссылке, например, из заданного атрибута ячейки.