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

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

  • автор:

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

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

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.

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 «кликабельные» вертикально и горизонтально расположенные ссылки-ячейки?

В своё время Азат писал заметку про ссылки в ячейках в разделе JavaScript. Предложенный метод, конечно, очень хорош, но недавно на своём любимом сайте anfrax.ru я столкнулся с совершенно замечательным CSS трюком, который, во-первых, в точности воспроизводит JavaScipt’овый метод, а во-вторых, очень лаконичен и красив. Странно, я встречал подобное решение (переопределение свойства display ) раннее, но не принял во внимание, что оно может пригодиться и в данной ситуации…

Итак, вот, что необходимо для достижения нирваны в случаях с вертикальным и горизонтальным расположением ячеек (спасибо тов. dragster за дельные замечания):

Вариант с вертикальными ячейками:

В итоге мы имеем следующее:

Вариант с горизонтальными ячейками:

А можно поступить с горизонтальными ячейками по-другому, как любезно указал г-н Серега (я почему-то забыл о замечательном свойстве float ):

В итоге мы имеем следующее:

Большим плюсом использования одного из указанных методов является тот факт, что они безоговорочно работают в IE5.5+ (в IE5.0 не работают варианты с горизонтальными ячейками) и в NN6+ и Opera5+ (иногда, правда, с некоторыми причудливыми глюками). Согласитесь, это неплохая совместимость.

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

Но почему эта ссылка растягивается на всю ячейку мне не понятно

Добавлено 04.03.08, 13:44
У него используется только стиль branches, но в нем ничего подобного я не нашел.

так не добавляй

Добавлено 04.03.08, 13:54
будет ссылка ровно по строке. если ячейка выше, то на всю высоту ссылки не будет. собсна у лебедева так и сделано.

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

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

Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

Необходимые знания: Базовый HTML (Введение в HTML).
Цель: Изучить более продвинутые возможности HTML таблиц и их доступность.

Добавление заголовка к таблице с помощью <caption>

Вы можете добавить заголовок для таблицы установив его в элементе <caption> и этот элемент необходимо поместить внутрь элемента <table> (en-US). Причём вам нужно поместить его сразу после открытия тега <table> .

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

Заголовок помещают сразу после тега <table> .

Примечание: Атрибут summary (en-US) также может быть использован в <table> элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать <caption> элемент, так как summary deprecated в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).

Упражнение: Добавление заголовка

Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.

  1. Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
  2. Добавьте подходящий заголовок к таблице.
  3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.

Примечание: Этот пример можно найти на GitHub по ссылке timetable-caption.html (живой пример).

Добавление структуры с помощью <thead>, <tfoot> и <tbody>

Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ сделать это используя <thead> (en-US), <tfoot> и <tbody> (en-US), которые позволяют вам разметить header, footer и body секции таблицы.

Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

  • Элементом <thead> нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете <col> / <colgroup> (en-US) элемент, тогда заголовок должен находиться ниже его.
  • Элементом <tfoot> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
  • Элементом <tbody> необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).

Примечание: <tbody> всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <tbody> и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.

Упражнение: Добавление структуры таблицы

Давайте используем эти новые элементы.

  1. В первую очередь, сделайте копию spending-record.html и minimal-table.css в новой папке.
  2. Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка «SUM» которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
  3. Поместите очевидную строку заголовка внутрь <thead> элемента, строку «SUM» внутрь <tfoot> элемента и оставшийся контент внутрь <tbody> элемента.
  4. Сохраните, перезагрузите и вы увидите, что добавление элемента <tfoot> привело к тому, что строка «SUM» опустилась к нижней части таблицы.
  5. Далее, добавьте атрибут colspan , чтобы ячейка «SUM» занимала первые четыре столбца, таким образом числовое значение «Cost» появится в последнем столбце.
  6. Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <head> вашего HTML документа вы увидите пустой элемент <style> . Внутри этого элемента добавьте следующие строки CSS кода:

Примечание: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, Вступление в CSS это хорошее место для начала; у нас также есть статья конкретно о стилизации таблиц).

Ваша готовая таблица должна выглядеть примерно так:

Примечание: Этот пример можно также найти на GitHub по ссылке spending-record-finished.html (живой пример).

Вложенные таблицы

В одну таблицу вкладывать другую таблицу возможно, если вы используете полную структуру включая элемент <table> . Это как правило не рекомендуется, так как делает разметку более запутанной и менее доступной для пользователей скринридеров, так в большинстве случаев вы можете просто вставить дополнительные ячейки/строки/столбцы в существующую таблицу. Однако, иногда это необходимо, например, если вы хотите легко импортировать контент из других источников.

Разметка простой вложенной таблицы:

Результат которого выглядит примерно так:

cell1 cell2 cell3

Таблицы для пользователей с ограниченными возможностями

Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.

Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.

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

Использование заголовков столбцов и строк

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

Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке Добавление заголовков с помощью элемента <th>.

Атрибут scope

Новая тема в этой статье это атрибут scope (en-US), который может быть добавлен к элементу <th> он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:

И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):

Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.

Атрибут scope имеет ещё два возможных значения — colgroup и rowgroup . Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу «Items sold. » в начале этого раздела статьи, вы увидите что ячейка с «Clothes» находится над ячейками «Trousers», «Skirts» и «Dresses». Все эти ячейки должны быть помечены как заголовки ( <th> ), но «Clothes» заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому «Clothes» должна получить атрибут scope=»colgroup» , тогда как другие получат атрибут scope=»col» .

Атрибуты id и headers

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

  1. Вы устанавливаете уникальный id для каждого <th> элемента.
  2. Вы устанавливаете атрибут headers для каждого <td> элемента. Каждый headers атрибут должен содержать список всех id , разделённый пробелами, ко всем <th> элементам которые действуют как заголовок для этой ячейки.

Это обеспечивает явное определение позиции для каждой ячейки вашей HTML таблицы, определяет заголовки столбцов и строк таблицы. Для того чтобы это работало реально хорошо таблице нужно определить и заголовки столбцов, и заголовки строк.

Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:

Примечание: Этот метод создания очень точного определения ассоциаций между заголовками и данными в ячейках, но использует гораздо больше разметки и оставляет обширное пространство для ошибок. Атрибута scope обычно достаточно для большинства таблиц.

Упражнение: играем со scope и headers
  1. Для заключительного упражнения мы, вначале создадим копию items-sold.html и minimal-table.css в новой папке.
  2. Теперь попробуем добавить соответствующий атрибут scope , который наиболее соответствует этой таблице.
  3. И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты id и headers .

Примечание: вы можете проверить как работает последние примеры здесь items-sold-scope.html (also see this live) и items-sold-headers.html (see this live too).

Заключение

Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите Styling Tables.

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

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