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

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

Как можно связать всю ячейку таблицы гиперссылкой в html без javascript или jquery?

Я попытался поместить href в сам тег td, но он не работает, по крайней мере, в chrome 18

11 ответов

Я надеюсь, что это будет работать нормально.

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

Я тоже искал решение и только что нашел этот код на другом сайте:

Почему бы не объединить метод onclick с элементом <a> внутри <td> для резервного копирования для не-JS? Кажется, отлично работает.

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

Таким образом, вы по-прежнему можете использовать некоторые свойства ячеек таблицы, например vertical-align . (Проверено в Chrome)

Проблемы:

(Пользователь: Kamal) Это хороший способ, но вы забыли о проблеме вертикального выравнивания! таким образом мы не сможем разместить ссылку точно в центре элемента TD! даже с выравниванием по вертикали: средний;

(Пользователь: Христос) . Ваш ответ — лучший ответ, потому что нет никаких проблем с выравниванием, а также сегодня JavaScript необходим каждому . он везде, даже в старом смартфоне .. .и он включен по умолчанию .

Мое предложение для полного ответа (Пользователь: Христос):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Использование 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 не является привычной ссылкой, её нельзя самостоятельно открыть в новой вкладке и вообще понять что это ссылка. Для наглядности через стили меняем вид указателя на «руку».

How to make a table row a link

Allowing a table row to be a link is not as simple as one might think. This article explains what the main issue is with making links out of table rows, provides some solutions to the problem, showcase some real-world examples, and question whether having a table row as a link is something that should even be done.

The problem

Using native HTML table elements, it not valid HTML to wrap an anchor ( <a> ) element around a table row ( <tr> ) element.

Solutions

Solution 1: Use JavaScript

JavaScript can be used to programmatically navigate a user to another page when a table row is clicked. There are many ways to do this with JavaScript, but one way is to add an event listener on every table row element and use window.location.href to navigate the user to another page.

A link has been added in the cells of the last column to demonstrate that this solution works fine when some of the table rows contain links (which cannot be said for some of the other solutions to be proposed).

Note that with this solution, users will not be able to control/command click on a row to open the linked page in a new tab (as is normal behavior when using <a> elements). However, you could add an event listener to detect if the control/command key is pressed and open the page in a new tab if the row is clicked while the control/command key is pressed. Opening a page in a new window can be done programmatically using window.open([url], '_blank') .

This is the same javascript solution as above, except it handles control/command clicking a row to open it in a new table.

The only remaining issue with this solution is that the user doesn't get the URL preview provided by browsers when hovering over anchor elements. There is currently no workaround for this.

Link preview in the bottom left of the browser window when hovering over an anchor element.

Solution 2: Use anchor elements in every table cell

Anchor elements can be used to link a row if they are used in every cell. To prevent every table cell to be focusable (which would be annoying when tabbing through the table with a keyboard), only allow the first cell to be focusable by adding a tabindex="-1" to all anchor elements except for the one in the first column. Using the :focus-within pseudo selector, it's possible to apply styles to the entire row when the first cell is focused, giving the impression that the entire row is focused while tabbing through the table.

One issue with this solution is that it's not valid HTML to nest anchor elements within one another. That means that it would not be possible to add another <a> element inside the table row. When nesting <a> elements in an HTML file, they will appear as siblings when rendered in a browser. Here's what happens in the table when trying to nest <a> elements:

Inspecting the cell with the nested link, you can see that the anchor elements go from being nested to being siblings.

Chris Coyier has a great article going in-depth on nested links and some attempts at getting around them. I should point out that if you're using React and you try to nest links, they will end up showing up in the rendered HTML markup as nested. This is because React uses JavaScript to create the HTML markup, so this kind of thing is possible. However, just because this can be done in React, doesn't mean it's valid HTML. It's probably a good idea to avoid using invalid HTML since other tools, such as screen readers or search engine crawlers, likely expect the HTML to use valid syntax.

One workaround that can be done is to not wrap the content inside of a table cell with an <a> element, but instead, add an empty <a> in each cell and then absolutely position it relative to the cell so that it covers the entire cell area. This way, it's possible to have other links within the table cells.

Note that the <a> links that are not absolutely positioned should have the position: relative and z-index: 1 CSS styles applied to allow them to sit above the absolutely positioned <a> element in the stacking context (which allows them to be clickable).

Solution 3: Use CSS grid to create a table

Using CSS grid, you can build out your table with <div> elements instead of native HTML table elements, and then you can use <a> elements for the table rows. David Lynch explains just how well you can build out tables using CSS grid.

Note that similar to the previous solution, if the entire row is an <a> element, then it is not possible to have nested <a> elements. However, we can instead add the <a> element inside the table row and absolutely position it to cover the entire table row.

Real-world examples

Let's take a look at two real-world examples of linking rows: GitHub and Reddit.

Although the following examples might be better classified as "lists" rather than "tables", the same logic/observations apply to tables.

GitHub

GitHub doesn't make the entire row in their pull request list/table clickable. You need to click on the title of the pull request in each row to navigate to that page. This makes things straight-forward from an implementation and accessibility point of view.

Reddit uses <div> elements for their lists so you don't get an indication to what URL you will be navigated to while hovering over the row. However, as a compromise, you can hover over the title in the row and it uses a proper <a> element that will indicate the URL when hovering over it. Also, when tabbing focusable elements in the list, the entire rows themselves aren't focusable, but rather each actionable item in the row is focusable.

Should table rows be links in the first place?

From a user experience point of view, it can be very convenient to be able to click anywhere on a table row in order to navigate to another page. For that reason, I think it is an acceptable pattern. However, I would not use an anchor element, but rather use JavaScript (as suggested in option #2) to handle the click event on a table row and try to have an anchor element within the row pointing to the linked page for users to be able to hover over it and get a preview of the page's URL. I would also prevent entire table rows to be focusable and instead rely on the links within the table row for keyboard navigation.

Resources

Stack Overflow discussion on making an entire row clickable

React Table: React hooks to help you build tables

Inclusive components — Data tables: building tables with accessibility in mind

Nested Links: article by Cris Coyier explaining how to deal with nested <a> elements

Flexible data tables with CSS Grid: Explains how to style data tables with CSS Grid

Hey, I'm Robert Cooper and I write articles related to web development. If you find these articles interesting, follow me on Twitter to get more bite-sized content related to web development.

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

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

14 ответов

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

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

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

Ниже приведена простая демонстрация второго примера: 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.