Close

14 июня, 2021

Как сделать ячейку таблицы ссылкой?

Саму ячейку таблицы нельзя непосредственно сделать ссылкой, но допустимо вложить элемент <a> внутрь <td> и сделать ссылку блочной. В этом случае ссылка будет занимать всю доступную ширину, как показано в примере 1. Красный цвет фона у ссылки выбран для наглядности, чтобы была видна область ссылки.

Пример 1. Блочная ссылка

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ячейка как ссылка</title>
<style>
table {
width: 100%; /* Ширина таблицы */
}
td {
border: 1px solid #333; /* Параметры рамки */
padding: 5px; /* Поля в ячейках */
}
td a {
display: block; /* Блочная ссылка */
background: #D71920; /* Красный цвет фона */
color: #fff; /* Цвет ссылок */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<table>
<tr>
<td><a href="page/new.html">Ссылка</a></td>
<td>Если для простоты пренебречь потерями
на теплопроводность, то видно, что волновая тень
синхронизирует кварк без обмена зарядами или спинами.</td>
</tr>
</table>
</body>
</html>

Результат данного примера показан на рис. 1.

Ссылка в ячейке

Рис. 1. Ссылка в ячейке

Использование position

Как видно, если высота ячеек различается, то ссылка занимает не всю ячейку целиком — ссылка отстаёт от границ на величину padding у td, а высота ссылки равна высоте текста. Чтобы обойти эти ограничения, ячейку надо сделать с относительным позиционированием, а ссылку внутри неё — с абсолютным позиционированием. Размеры ссылки при этом задаются с помощью свойств left, right, top и bottom с нулевым значением — тогда ссылка будет занимать всю область ячейки целиком.

К сожалению, есть и ограничения — ячейка с абсолютно позиционированной ссылкой «схлопывается». Есть два решения:

  • задать всей таблице свойство table-layout со значением fixed — ширина всех ячеек при этом станет одинаковой;
  • явно установить ширину ячейки со ссылкой через свойство width.

В примере 2 показано добавление table-layout.

Пример 2. Использование position

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ячейка как ссылка</title>
<style>
table {
width: 100%; /* Ширина таблицы */
table-layout: fixed;
}
td {
border: 1px solid #333; /* Параметры рамки */
padding: 5px; /* Поля в ячейках */
position: relative; /* Относительное позиционирование */
}
td a {
position: absolute; /* Абсолютное позиционирование */
left: 0; right: 0; /* По ширине ячейки */
top: 0; bottom: 0; /* По высоте ячейки */
background: #D71920; /* Цвет фона */
color: #fff; /* Цвет ссылок */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<table>
<tr>
<td><a href="page/new.html">Ссылка</a></td>
<td>Если для простоты пренебречь потерями на
теплопроводность, то видно, что волновая тень
синхронизирует кварк без обмена зарядами или спинами.</td>
</tr>
</table>
</body>
</html>

Результат данного примера показан на рис. 2.

Ссылка в ячейке

Рис. 2. Ссылка в ячейке

Данное решение не работает в браузере Internet Explorer, в нём высота ссылки не равна высоте ячейки. Если нужна поддержка IE, то есть следующее решение, работающее и в других браузерах. Сперва вставляем ссылку в <div>.

<td><div><a href="page/new.html">Ссылка</a></div></td>

Затем в стилях дописываем следующие строки.

td { height: 1px; }
td div { height: 100%; }

Использование JavaScript

Можно вообще отказаться от явных ссылок и воспользоваться событием onclick, добавляя его к нужному элементу <td>. Тогда вся ячейка будет реагировать на щелчок.

Внутри onclick пишем document.location, а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.

Пример 3. Использование события onclick

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ячейка как ссылка</title>
<style>
table {
width: 100%; /* Ширина таблицы */
}
td {
border: 1px solid #333; /* Параметры рамки */
padding: 5px; /* Поля в ячейках */
}
td:first-child {
cursor: pointer; /* Вид курсора */
}
</style>
</head>
<body>
<table>
<tr>
<td onclick="document.location=’page/new.html’">Ссылка</td>
<td>Если для простоты пренебречь потерями на теплопроводность,
то видно, что волновая тень синхронизирует кварк без
обмена зарядами или спинами.</td>
</tr>
</table>
</body>
</html>

Поскольку ячейка с onclick не является привычной ссылкой, её нельзя самостоятельно открыть в новой вкладке и вообще понять что это ссылка. Для наглядности через стили меняем вид указателя на «руку».

Автор: Влад Мержевич
Источник: webref.ru

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?