Отправляет email-рассылки с помощью сервиса Sendsay

Тег table в Вопросах и Ответах

  Все выпуски  

Тег table в Вопросах и Ответах


Информационный Канал Subscribe.Ru

Рассылка "Тег table в Вопросах и Ответах"

Автор и Ведущий: Алексей Фоменко "Чистый лист программы "Блокнот" как прочный фундамент профессионального сайта - вот та единственная вещь, которая отличает Настоящего Веб-дизайнера от простого любителя." © Сегодня:
Вопрос:

«Как сделать всю ячейку моей таблицы гиперссылкой?»

Ответ

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

<table border=1>
<tr>
<td>
Нажми
</td>
<td onClick="location.href='0.htm'" class=s>
Здесь
</td>
<td>
Немедленно
</td>
<td>
!!!
</td>
</tr>
</table>

В данном примере ячейка

<td onClick="location.href='0.htm'" class=s>
Здесь
</td>

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

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

<style>
td.s {border-color: blue}
</style>
<table border=1>
<tr>
<td>
Нажми
</td>
<td onClick="location.href='0.htm'" class=s>
Здесь
</td>
<td>
Немедленно
</td>
<td>
!!!
</td>
</tr>
</table>

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

<style>
td.s {cursor: hand; border-color: blue}
</style>
<table border=1>
<tr>
<td>
Нажми
</td>
<td onClick="location.href='0.htm'" class=s>
Здесь
</td>
<td>
Немедленно
</td>
<td>
!!!
</td>
</tr>
</table>

Сравни:

<style>
td.s {border-color: blue}
</style>

и

<style>
td.s {cursor: hand; border-color: blue}
</style>

В чём отличие? Правильно. Мы добавили cursor: hand; Теперь, если ты скопируешь последний код на свою страницу, то при наведении на выделенную синим цветом ячейку ты увидишь изменение курсора: из обычной стрелки он превратился в маленькую ручку. Как думаешь, кликнет человек по этой ячейке?

Думаешь это всё? А прикинь, если вся твоя таблица превратиться в одну большую гиперссылку, кликнет по ней твой посетитель? Ну это уж ты сделай сам. Принципы те же.

---------------------
Приятной работы.
Алексей Фоменко
Томск, 2005 год
Мне интересно ответить на Твой Вопрос.
Если соберёшься его задавать Направляй его сюда
(Буду рад)

http://subscribe.ru/
http://subscribe.ru/feedback/
Подписан адрес:
Код этой рассылки: inet.webbuild.tablehtml
Отписаться

В избранное