Bazaprogram.ru

Новости из мира ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как сделать таблицу ссылкой в css

Ссылка на всю площадь ячейки таблицы

Имеет место вот такой простейший код ссылки с текста в таблице:

Хочестся сделать так, чтобы ссылки шли не только с самих текстовых строк, а со всей площади ячейки таблицы. Но на практике ссылки действуют только с прямоугольника, выделенного розовым цветом (скриншот).

По идее, для этого должен быть создан родительский блок размером с ячейку таблицы. Но как-то и это не сработало.

HTML5
07.06.2014, 18:44

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

Как растянуть картинку на всю ширину ячейки таблицы QTableView?
Есть кусок полоски, хотелось бы чтобы вся эта полоска была была по всей ширине ячейки таблицы.

Ссылка под размер ячейки таблицы
Здравствуйте. Есть таблица из двух столбцов и нескольких строк. картинки в левом столбце 40px в.

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

07.06.2014, 18:552
07.06.2014, 19:19 [ТС]3
07.06.2014, 19:254
07.06.2014, 19:28 [ТС]5

Нужно 100-процентное заполнение ячейки, высота которой не постоянна.

07.06.2014, 19:306
07.06.2014, 23:30 [ТС]7

Вроде бы, это уже есть:

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

вставляются теги

HTML5
08.06.2014, 12:338

display: block; поменяй на display: inline-block;

08.06.2014, 13:019
08.06.2014, 13:0510
08.06.2014, 18:2711

Решение

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

HTML5
элемент внутри вашего HTML

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

когда я хочу сымитировать

со ссылкой, но соблюдая стандарты html, я делаю это.

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

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

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

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

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

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

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

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

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

вы можете создать особый стиль ссылки TRs с помощью селектора CSS » tr[href]».

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

Set variable устанавливает переменные в сеансах, которые страница, которую вы собираетесь читать и действовать.

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

Спасибо за это. Вы можете изменить значок наведения, назначив класс CSS для строки, например:

Создаем таблицу на html-странице

Здравствуйте, уважаемые читатели блога! Частенько на web-страницы, кроме текста и картинок, возникает необходимость вывести различные данные в виде таблиц. Да это и понятно, таблица — удобнейший способ представления большого количества сведений. Поэтому возникает вопрос «Как же вставлять таблицы в html?». В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.

Как создать таблицу используя HTML

HTML-таблицы создаются в четыре шага.

1. На первом шаге в html-коде с помощью парного тега указываем браузеру, что в web-страницу вставлена таблица: . Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.

2. На втором шаге формируем строки таблицы, помещая парные теги внутрь

08.06.2014, 18:27
08.06.2014, 18:27

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

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

Нужна ссылка не на всю VS, а только на VB
Здравствуйте,хочу перейти с 2010 бейсика на 2013 ,зашёл на оф сайт Майкрософт ,вроде нешёл что.

Почему ссылка растягивается на всю ширину?
Привет. Почему-то ссылка form_link растягивается на всю ширину и никак не хочет становиться.

Ссылка расходится на всю ширину в Chrome
Проблема заключается в том, что ссылка(Our Works) распространяется за свои границы, т.е я могу.

2.7. CSS-ссылки

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

Основной способ оформления ссылок заключается в стилизации подчеркивания ссылки и изменении цвета текста ссылки. Также можно изменить внешний вид курсора с помощью свойства cursor .

Оформление гипертекстовых ссылок

  • Содержание:
  • 1. Псевдоклассы состояний гипертекстовых ссылок
  • 2. Выборка отдельных ссылок
  • 3. Подчеркивание ссылок
  • 4. Изображения для ссылок
  • 5. Использование фонового изображения
  • 6. Ссылки-кнопки
  • 7. Примеры оформления ссылок

1. Псевдоклассы состояний гипертекстовых ссылок

Большинство браузеров выделяют четыре основных состояния гиперссылок, каждому из которых соответствует свой псевдокласс селектора:

Не посещенная — a:link
Посещенная — по которой уже выполнялся переход — a:visited
Не нажатая — над которой находится указатель мыши — a:hover
Нажатая — которая удерживается мышью — a:active

Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — ещё нет, например:

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

2. Выборка отдельных ссылок

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

3. Подчеркивание ссылок

Добавление подчеркивания только при наведении на ссылку:

Внешний вид нижней границы ссылки:

4. Изображения для ссылок

Добавить изображение для ссылки можно с помощью CSS-свойства background-image . Так как элемент является строчным a , то предварительно его нужно преобразовать в блочный элемент a .

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

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

Символ href$ в селекторе атрибута дает браузеру команду найти все атрибуты href , заканчивающиеся определенным образом (в данном случае .pdf ) и добавить к ссылке соответствующий значок.

5. Использование фонового изображения

Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение:

6. Ссылки-кнопки

Благодаря свойствам background-color , border и padding , ссылкам можно придать вид прямоугольных кнопок, а, меняя отображение тех или иных свойств ссылок при наведении курсора мыши a:hover , добавить интересные эффекты.

7. Примеры оформления ссылок

Гипертекстовые ссылки можно оформить различными способами, но основной прием оформления основывается на изменении внешнего вида ссылки при наведении на нее курсором мыши — состояние ссылки a:hover .

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

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

15 ответов:

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

С помощью javascript:

С помощью якоря:

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

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

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

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

jQuery

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

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

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

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

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

обычный способ-назначить некоторый JavaScript для на TR элемент.

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

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

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

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

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

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

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

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

вы не можете обернуть

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

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

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

Javascript

пример

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

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

jQueryвы можете добавить это, например, в стандартный включенный файл javascript

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

. Каждый элемент

создает отдельную строку:

3. Далее, на третьем шаге формируем ячейки таблицы с помощью парных тегов и , которые помещаются внутрь элемента

. Тег

содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:

создает обычную ячейку, а

ячейку заголовка, т.е. шапку соответствующего столбца:

4. Ну и на последнем шаге помещаем внутрь элементов

и

Столбец 1Столбец 2Столбец 3
Ячейка 1-1Ячейка 1-2Ячейка 1-3
Ячейка 2-1Ячейка 2-2Ячейка 2-3

В открывающий тег table я добавил атрибут border и присвоил ему значение 1 для того, чтобы на странице в браузере были видны границы ячеек. По умолчанию этот атрибут равен 0. Результат:

Столбец 1Столбец 2Столбец 3
Ячейка 1-1Ячейка 1-2Ячейка 1-3
Ячейка 2-1Ячейка 2-2Ячейка 2-3

Более тонко настроить отображение границ помогут каскадные таблицы стилей. С помощью свойства CSS border можно изменить толщину и цвет рамок, а также изменить тип границ.

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

. Если понадобиться как-то оформить вставляемый текст, то можно использовать теги оформления.

Кроме текста мы можем помещать в ячейки картинки с помощью тега :

и
и

, и в нее вставляются строки и ячейки.

При создании таблиц необходимо учитывать некоторые правила:

  • для создания таблицы используется только тег
    ;
  • тег
  • может находиться только внутри тега

    ;
  • теги
  • , любое другое содержимое тега

    игнорируется браузером;
  • содержимое таблицы(текст или картинки) может находиться только в тегах
  • . Причем допустимо использовать не более одного элемента

    в пределах одной таблицы, и он должен идти в html коде сразу после тега

    и

    могут находиться только внутри тега

    и

    ;
  • ячейки таблицы должны иметь хоть какое-то содержимое, иначе браузер может их вообще не отобразить, если же какая-то ячейка должна быть пустой, то в нее обычно помещают неразрывный пробел (HTML-литерал );
  • таблица относится к блочным элементам web-страницы;
  • размеры таблицы и ее ячеек зависят от содержимого, т.е. таблица растягивается по ширине и высоте так, чтобы все уместилось;
  • между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ;
  • текст ячеек заголовка(элемент th) выводится полужирным шрифтом и выравнивается по центру;
  • границы вокруг таблицы и ее ячеек по умолчанию не рисуются.
  • Заголовок таблицы

    Далее рассмотрим дополнительные секции таблиц html. На практике они используются редко, но иногда могут пригодиться.

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

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

    :

    Это таблица

    Ячейка 1.1Ячейка 1.2
    Ячейка 2.1Ячейка 2.2

    Это таблица

    Ячейка 1.1Ячейка 1.2
    Ячейка 2.1Ячейка 2.2

    Секции таблицы

    Таблицу html можно логически разбить на части — секции. Всего существует три вида секций:

    • секция заголовка, в которую помещают ячейки заголовка, которые формируют шапку таблицы;
    • секция тела, в которой располагают ячейки с основными данными;
    • секция завершения, в которую помещают ячейки с итоговыми данными.

    Секция заголовка таблицы формируется с помощью парного тега

    .

    Секцию тела создают парным тегом

    . Одна html таблица может содержать несколько секций тела, что позволяет создавать структурные блоки к которым могут применяться единые стили оформления.

    Секция завершения формируется парным тегом и в пределах одного контейнера

    может быть только одна.

    Все эти парные теги должны содержать теги

    , которые формируют строки, относящиеся к соответствующим секциям:

    Столбец 1Столбец 2Столбец 3
    Ячейка 1.1Ячейка 1.2Ячейка 1.3
    Ячейка 2.1Ячейка 2.2Ячейка 2.3
    Итог 1Итог 2Итог 3

    Объединение ячеек таблицы

    Осталось рассказать о самой важной возможности таблиц — объединении ячеек. Для объединения нескольких ячеек в одну используются атрибуты colspan и rowspan тегов

и

. Атрибут colspan задает количество ячеек объединенных по горизонтали, а rowspan — по вертикали:

1.11.2-1.3
2.12.22.3
3.1-4.13.23.3
4.24.3

1.11.2-1.3
2.12.22.3
3.1-4.13.23.3
4.24.3

При объединении ячеек важно проверить количество ячеек в каждой строке, чтобы не было ошибок. Так, конструкция

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

, либо такая же конструкция! Если число ячеек во всех строках не будет совпадать, то появятся пустые лишние ячейки.

Пример неправильного html-кода при объединении ячеек:

ячейка 1.1ячейка 1.2
ячейка 2.1ячейка 2.2

И результат отображения в браузере:

Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка.

Атрибуты тега

В этом посте мы уже столкнулись с одним атрибутом тега

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

Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом

. Давайте их рассмотрим.

Атрибут align — задает выравнивание таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left.

Атрибут background, который задает фоновый рисунок к таблице. В качестве значения принимает адрес файла с изображением.

bgcolor — устанавливает цвет фона таблицы. Можно использовать совместно с атрибутом background.

Атрибут bordercolor задает цвет рамки таблицы.

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

Cellspacing — задает расстояние между внешними границами ячеек.

На этом рассказывать о том как вставить таблицу в html страницу я закончу, только подведу итоги:

  • для вставки таблицы используются теги
— обозначение таблицы,

— добавление строки и

, секция завершения и секция тела —

;
  • для объединения ячеек используем атрибуты тега
  • — вставка ячейки;
  • таблица представляет из себя блочные элемент web-страницы;
  • в качестве содержимого ячеек может быть не только текст, но и картинки и другие таблицы;
  • таблица может содержать три вида секций: секция заголовка —
  • colspan и rowspan.

    На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога! Все, до новых встреч!

    Читать еще:  Wm user delphi
    Ссылка на основную публикацию
    Adblock
    detector