Ячейка таблицы как ссылка html
Перейти к содержимому

Ячейка таблицы как ссылка html

  • автор:

How can I make a link from a <td> table cell

I’d like to make the entire <td>. </td> a hyperlink. I’d prefer without the use of JavaScript. Is this possible?

8 Answers 8

Yes, that’s possible, albeit not literally the <td> , but what’s in it. The simple trick is, to make sure that the content extends to the borders of the cell (it won’t include the borders itself though).

As already explained, this isn’t semantically correct. An a element is an inline element and should not be used as block-level element. However, here’s an example (but JavaScript plus a td:hover CSS style will be much neater) that works in most browsers:

PS: it’s actually neater to change a in a block-level element using CSS as explained in another solution in this thread. it won’t work well in IE6 though, but that’s no news 😉

Alternative (non-advised) solution

If your world is only Internet Explorer (rare, nowadays), you can violate the HTML standard and write this, it will work as expected, but will be highly frowned upon and be considered ill-advised (you haven’t heard this from me). Any other browser than IE will not render the link, but will show the table correctly.

Use this code. It expands an <a> to fill the cell horizontally. To fill vertically, use the height property as well.

I would recommend using an actual anchor element, and set it as block.

This will set the anchor to the same dimensions of the parent div.

Here is my solution:

Like this you can still benefit from some table cell properties like vertical-align . (Tested on Chrome)

I’d like to make the entire td a hyperlink. I’d prefer without javascript. Is this possible?

That’s not possible without javascript. Also, that won’t be semantic markup. You should use link instead otherwise it is a matter of attaching onclick handler to <td> to redirect to some other page.

Sarfraz's user avatar

This might be the most simple way to make a whole <td> cell an active hyperlink just using HTML.

I never had a satisfactory answer for this question, until about 10 minutes ago, so years in the making #humor.

Tested on Firefox 70, this is a bare-bones example where one full line-width of the cell is active:

Obviously the example just links to «this document,» so fill in the href=»» and replace the <br /> with anything appropriate.

Previously I used a style and class pair that I cobbled together from the answers above (Thanks to you folks.)

Today, working on a different issue, I kept stripping it down until <div>&nbsp;</div> was the only thing left, remove the <div></div> and it stops linking beyond the text. I didn’t like the short «_» the &nbsp; displayed and found a single <br /> works without an «extra line» penalty.

If another <td></td> in the <tr> has multiple lines, and makes the row taller with word-wrap for instance, then use multiple <br /> to bring the <td> you want to be active to the correct number of lines and active the full width of each line.

The only problem is it isn’t dynamic, but usually the mouse is closer in height than width, so active everywhere on one line is better than just the width of the text.

html — строка таблицы как ссылка

Я не могу установить строку таблицы как ссылку на что-то. Я могу использовать только css и html. Я пробовал разные вещи от div в строке к чему-то другому, но все равно не могу заставить его работать.

14 ответов

У вас есть два способа сделать это:

<tr onclick=»document.location = ‘links.html’;»>

Я сделал вторую работу, используя:

Чтобы избавиться от мертвого пространства между столбцами:

Ниже приведена простая демонстрация второго примера: DEMO

Я создал пользовательскую функцию jquery:

JQuery

Легко и идеально для меня. Надеюсь, это поможет вам.

(Я знаю, что OP хочет только CSS и HTML, но рассмотрим jQuery)

Изменить

Согласовано с Мэттом Кантором, используя данные attr. Отредактированный ответ выше

Если вы используете браузер, который поддерживает его, вы можете использовать CSS для преобразования <a> в строку таблицы:

Конечно, вы ограничены тем, что не кладете элементы блока внутри <a> . Вы также не можете смешивать это с помощью обычного <table>

Обычный способ — присвоить JavaScript JavaScript атрибуту onClick элемента TR .

Если вы не можете использовать JavaScript, вы должны использовать трюк:

Добавьте одну и ту же ссылку к каждой TD той же строки (ссылка должна быть самым внешним элементом в ячейке).

Поверните ссылки на элементы блока: a

Последний заставит ссылку заполнить всю ячейку, поэтому щелчок в любом месте вызовет ссылку.

Если вам нужно использовать таблицу, вы можете поместить ссылку в каждую ячейку таблицы:

И заставьте ссылки заполнить все ячейки:

Если вы можете использовать <div> вместо таблицы, ваш HTML может быть намного проще, и вы не получите «пробелов» в ссылках между ячейками таблицы:

Вот CSS, который идет с методом <div> :

Вы не можете обернуть элемент <td> тегом <a> , но вы можете выполнить аналогичные функции, используя событие onclick для вызова функции. Пример здесь, что-то вроде этой функции:

И добавьте его в таблицу следующим образом:

Ответ от sirwilliam лучше всего подходит мне. Я улучшил Javascript с поддержкой горячей клавиши Ctrl + LeftClick (открывается страница на новой вкладке). Событие ctrlKey используется ПК, metaKey для Mac.

Javascript

Пример

Я знаю, что этот вопрос уже ответил, но мне все еще не нравится какое-либо решение на этой странице. Для людей, которые используют JQuery, я сделал окончательное решение, которое позволяет вам привести строку таблицы почти так же, как тег <a> .

Это мое решение:

Javascript. Вы можете добавить это, например, в стандартный файл javascript.

HTML Теперь вы можете использовать это для любого элемента <tr> внутри вашего HTML

Когда я хочу имитировать ссылку со ссылкой, но соблюдая стандарты html, я делаю это.

Таким образом, когда кто-то идет с помощью мыши на TR, вся строка (и эта ссылка) получает стиль наведения, и он не видит, что существует несколько ссылок.

Надежда может помочь кому-то.

У меня есть другой путь. Особенно, если вам нужно отправить данные с помощью jQuery

Установите переменную, задающую переменные в SESSIONS, на которых вы будете читать и действовать. страница

Мне бы очень хотелось, чтобы вы отправлялись прямо в окно, но я не думаю, что это возможно.

После прочтения этой темы и некоторых других я придумал следующее решение в javascript:

Чтобы использовать его, поставьте href в tr/td/th, который вы хотите кликать, например: <tr href=»http://stackoverflow.com»> . И убедитесь, что script выше выполняется после создания элемента tr (путем размещения или использования обработчиков событий).

Недостатком является то, что TRs не будет полностью работать как ссылки, такие как divs с display: table; , и они не будут выбираться на клавиатуре или иметь текст состояния. Изменить: я сделал навигация по клавиатуре, установив onkeydown, role и tabIndex, вы можете удалить эту часть, если нужна только мышь. Они не будут показывать URL-адрес в строке состояния при наведении курсора.

Вы можете специально указать ссылку TRs с помощью «tr [href]» селектора CSS.

Ячейка таблицы как ссылка html

a background-color:#CCCCCC;
border:2px dotted #000000;
display:block;
line-height:100%;
margin:3px;
padding:20px
>
a:hover background-color:#FFC0CB;
>

a background-color:#CCCCCC;
border:2px dotted #000000;
display:block;
float:left;

margin:3px;
padding:20px
>
a:hover background-color:#FFC0CB;
>

Ячейка таблицы как ссылка html

Создание игр на Unreal Engine 5

Создание игр на Unreal Engine 5

Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Моя группа

Зачем Вы изучаете программирование/создание сайтов?

Основы Unreal Engine 5

Основы Unreal Engine 5

Пройдя курс:

— Вы получите необходимую базу по Unreal Engine 5

— Вы познакомитесь с множеством инструментов в движке

— Вы научитесь создавать несложные игры

Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!

Чтобы получить Видеокурс,
заполните форму

Создание лендингов на заказ

Создание лендингов на заказ

Придя на семинар:

— Вы узнаете мою историю, как я начинал создавать сайты на заказ.

— Вы узнаете, почему сейчас самое время начать этим заниматься.

— Вы получите очень подробный пошаговый план действий по созданию и продвижению своей Web-студии с комментариями, в том числе, и в виде PDF.

— Вы узнаете, как и где найти сотрудников, как общаться с заказчиками.

— Вы узнаете, как максимально автоматизировать бизнес-процессы.

После семинара Вы уже самостоятельно сможете, следуя простому и подробному плану, открыть свою Web-студию и получить первые заказы.

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

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