как сделать таблицу ссылкой html

ВАЖНО! Для того, что бы сохранить статью в закладки, нажмите: CTRL + D

Задать вопрос ВРАЧУ, и получить БЕСПЛАТНЫЙ ОТВЕТ, Вы можете заполнив на НАШЕМ САЙТЕ специальную форму, по этой ссылке >>>

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

14 ответов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы можете использовать

Вот CSS, который идет с методом

Вы не можете обернуть элемент

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

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

Javascript

Пример

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

ЧИТАЙТЕ ТАКЖЕ:  как сделать сюрикен из диска

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

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

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

Что-то вроде этого? Хотя он использует JS, но это единственный способ сделать строку (tr) доступной.

Если у вас нет одной ячейки с привязным тегом, который заполняет всю ячейку.

И тогда вы не должны использовать таблицу в любом случае.

Это избавит вас от необходимости дублировать ссылку в tr — просто выкинь ее из первого a.

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

Чтобы использовать его, поставьте href в tr/td/th, который вы хотите кликать, например:

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

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

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

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

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

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

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

Источник: http://qaru.site/questions/25828/html-table-row-like-a-link

В этой статье я покажу, как можно при помощи jQuery сделать строку таблицы полностью кликабельной (ссылкой).

Репутация таблиц среди разработчиков далека от идеальной, тем не менее, существует масса ситуаций, когда вид выводимой информации делает необходимым их использование. Ведь, напомню, смысл семантики заключается в использовании для представления правильных тегов, например, к заголовку следует применять тег h1 ( h2 , h3 и т. д.), таблицы обрамлять тегом table .

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

ЧИТАЙТЕ ТАКЖЕ:  как сделать деревянные полы в частном доме

Существует несколько способов сделать строки кликабельными. Опишем, как это можно сделать с помощью jQuery. Начнем с разметки:

Теперь, чтобы сделать строку полностью кликабельной (не вставляя при этом в каждую ячейку тег a ), в атрибут строки data-href добавим URL той странички, на которую перейдет пользователь при клике по строке. Новая разметка будет выглядеть так:

Вот все, что касается HTML. Перейдем к javascript:

В приведенном выше коде каждой строке добавлен класс clickable , таким образом, при необходимости дизайн строк-ссылок можно менять. Теперь, кликнув по строке, произойдет переход на новую страницу.

Есть, однако, одна маленькая проблема. Если в разметке есть ссылка, как в колонке .Actions , то при клике по ней произойдет переход на страничку, url которой будет соответствовать атрибуту data-href строки, а не ссылки.

javascript, где эта проблема решена, будет выглядеть так:

Теперь, когда курсор находится над ссылкой, кликабельность «включается» и при клике происходит желаемый эффект. Когда же курсор покидает ссылку, она «выключается». Демо, где показано, как все это работает, ниже.

Источник: http://dnzl.ru/view_post.php?id=203

Собственно вопрос: как сделать так, чтобы строка таблицы была ссылкой?
Пока пришел вот к такому решению

Но сам понимаю, что это как-то костыльно. Просто в данном контексте использование именно тега

  • Вопрос задан более двух лет назад
  • 2097 просмотров

Уболтал начальство не канифолить моск, а сделать по человечески, в дивах.
HTML-код

Оставлю это тут, может кому пригодится.
ЗЫ хотя если будут ещё какие интересные решения было бы познавательно глянуть.

Источник: http://toster.ru/q/312466

Опции темы
Отображение
  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

Непоняяятно

а при чем тут тогда гиф в беграунде ячейки? — если он не видоизменяется — ну пусть и будет беграундом

посмотрите на форуме много вопросов по организвции меню — там наверняка будет ответ — просто поискать нужно

Источник: http://www.html.by/threads/1232-jachejka-kak-ssylka

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

При наведении мыши на них курсор принимает форму руки, а при клике в окне браузера открывается другая веб-страница или определённый документ. Гиперссылки могут представлять собой как текст, так и изображение.

ЧИТАЙТЕ ТАКЖЕ:  как сделать петлю на швейной машине

Как сделать гиперссылку в HTML? Гиперссылка задаётся при помощи парного тега (от английского слова Anchor — якорь). Параметр href тега содержит адрес документа.

В HTML теги гиперссылки представлены в виде и , а ссылкой считается вся информация, которую и содержат:

Перед тем, как создать гиперссылку в HTML, следует знать, что её адрес может быть относительным и абсолютным. Относительный указывает расположение документа относительно текущей страницы.

Сработает он в том случае, если конечный документ располагается в той же директории, что и текущий. Также, вы можете указать путь к файлу относительно корневой директории веб-сайта с помощью символа « / ».

Абсолютный адрес представляет собой ссылку в полном виде на документ, расположенный в сети интернет.

Создание гиперссылок в HTML — процесс несложный. По умолчанию они подчёркиваются и выделяются синим цветом, а посещённые — фиолетовым.

Изменить цвет гиперссылки в HTML можно в параметрах тега :

  • link – цвет ссылок веб-страницы;
  • vlink – цвет посещённых гиперссылок веб-страницы;
  • alink – цвет активных ссылок веб-страницы.

Указанные атрибуты определяют цвета ссылок всего HTML-документа. Если вставить такой код в тег , каждый раз задавать цвет шрифту не придётся.

Перед тем, как делать гиперссылки в HTML, имейте в виду, что их цвета должны гармонично вписываться в общий дизайн и оформление вашего веб-сайта и в то же время важно сделать их заметными для пользователя.

Основные атрибуты гиперссылок

В рамках HTML гиперссылки могут иметь следующие параметры:

1. title – позволяет создать текст подсказки, которая всплывает при наведении курсора мыши на гиперссылку.

2. target – указывает браузеру в каком окне следует открыть ссылку.

Он может принимать следующие значения:

  • _blank – ссылку необходимо открыть в новой вкладке;
  • _self – гиперссылка в HTML должна быть открыта в текущей вкладке. Значение по умолчанию;
  • _parent – браузер должен загрузить ссылку в родительском окне;
  • _top – гиперссылка загружается по всему пространству окна браузера (разбиение на фреймы в данном случае исчезает).

Таким образом, ответ на часто задаваемый начинающими веб-мастерами вопрос « как вставить гиперссылку в HTML » получен.

Желаем успехов в изучении веб-программирования!

Источник: http://www.internet-technologies.ru/articles/giperssylki-v-html.html

Ссылка на основную публикацию