Ссылки в таблицах html

Приветствую! сегодня речь о таблицах, а именно о том как сделать ячейку таблицы ссылкой? как сделать строку таблицы ссылкой? как сделать строку таблицы ссылкой чтобы ссылка открывалась в новом окне? Эти вопросы могут подстерегать начинающих сайтостроителей.

Как растянуть ссылку на всю ячейку таблицы


Часто требуется растянуть ссылку в ячейке html таблицы по ширине и высоте на всю ячейку. Для этого нужно задать для ссылок в ячейках блочное поведение (display: block;), указать ширину ссылок и высоту 100%, при этом ширина и высота ссылки будет подстраиваться под габариты ячейки автоматически. Также нужно убрать отступы в ячейках таблицы, за это отвечает свойство cellpadding, его нужно установить равным 0. Теперь ссылки внутри ячеек будут растягиваться. Так же я сделал отступы внутри ссылок, чтобы смотрелось симпатичнее.

Код:

<style type="text/css">
td a {
width: 100%;
height: 100%;
display: block;
padding:5px;

}

</style>
<table cellpadding="0" cellspacing="0">
<tr><td><a href="#">Ссылка на ячейку таблицы</a></td></tr>
</table>

Результат:

Ссылка на ячейку таблицы

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


Иногда требуется чтобы ячейка таблицы была ссылкой, но текста самой ссылки не было. Тут есть 2 варианта.

1) вариант

Доработаем предыдущий пример. Нужно обернуть текст внутри ссылки в тэг span, например и задвинуть его за экран браузера, далеко, что бы никто не увидел)

код:

<style type="text/css">
td a {
width: 100px;
height: 20px;
display: block;
}

td a span{
position:absolute;
left:-10000px;
}

</style>
<table cellpadding="0" cellspacing="0">
<tr><td><a href="#"><span>Ссылка на ячейку таблицы</span></a></td><td>Слева ячейка ссылка</td></tr>
</table>

здесь я явно указал ширину и высоту ячейки, поскольку содержимое в ней отсутствует.

результат:

Ссылка на ячейку таблицы Слева ячейка ссылка

2) вариант
Нужно навесить событие OnClick на ячейку.

код:

<style type="text/css">
td:hover {
cursor:pointer;
}
</style>
<table cellpadding="0" cellspacing="0">
<tr><td onClick='location.href="http://takprostotak.ru"'>Ссылка на ячейку через javaScript событие</td></tr>
</table>

результат:

Ссылка на ячейку через javaScript событие

Открываем ссылку на строку html таблицы в новом окне.


Иногда требуется сделать так, чтобы по клику на строку таблицы открывалась ссылка в новом окне. Для этого создадим javaScript функцию openWin(url) ипосле этого достаточно привязать вызов этой функции к событию OnClick строки любой таблицы на странице. В качестве аргумента функции следует указать ссылку, которую следует открывать в новом окне.

код:


<script language="JavaScript">
 // создадим javascript функцию
 function openWin(url) {
   myWin= open(url);
 }
 </script>
<table>
<tr onclick="openWin('http://takprostotak.ru')"><td>Ячейка 1</td><td>Ячейка 2</td></tr>
</table>

Часто требуется выделить строку таблицы цветом при наведении мышки. Для этого нужно указать CSS свойства для ячеек таблицы:

код:

table tr:hover td{ backgroung-color: #80BFFF;}
cursor:pointer;

результат:

Ячейка Ячейка 2


Похожие статьи:
↑ Наверх ↑
  • Комментарии

Прокомментировать

Подписаться, не комментируя

Видеоуроки для вебмастеров
  • Рубрики
  • Случайные

Идеальный хостинг