Саме осередок таблиці не можна безпосередньо зробити посиланням, але припустимо вкласти елемент <a> всередину <td> і зробити посилання блокової. У цьому випадку посилання займатиме всю доступну ширину, як показано в прикладі 1.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.
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.
<div>.
<code data-language="html"><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 не є звичним посиланням, його не можна самостійно відкрити в новій вкладці і взагалі зрозуміти що це посилання. Для наочності через стилі змінюємо вигляд покажчика на «руку».
="field-items">