Таблица или спойлер в таблице

Автопринадлежности

Спойлер для ячейки таблицы

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

Имею стандартную таблицу, с текстом в ячейках:

Текст разный по длине. Хочется сделать аккуратно. Приблизительно как на скрине:

Cам HTML сформировать могу как угодно.

Изменение ячейки таблицы на текстовое поле с содержанием ячейки при клике на неё
Доброго времени суток! Подскажите, как реализовать? Есть некая таблица, в которой хранятся 7.

Уникальный номер ячейки таблицы. Задачка не для всех 🙂
Всем привет! Задача — JQ скрипт должен пройти по произвольной двумерной HTML таблице, назначив.

Сгруппировать ячейки для сводной таблицы
Добрый день форумчане! Подскажите как изменить код VBA For i1 = 685 To UBound(arr) .

Необходимо задать границу для первой ячейки таблицы
Как сделать так, чтобы border-bottom был полный(через tr не получается), пожалуйста помогите.

Решение

Ну вот попробуйте так (правда я дивами верстал а не табличкой )

не активное
2) + закрыто
3) — открыто

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

Бренд

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

Изменение стандартного узора для заливки ячейки таблицы в Word
Добрый день! Подскажите есть ли возможность изменить стандартные узоры которые используются при.

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

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

Спойлер для Bootstrap v3.3.4
Здравствуйте! Мне нужно реализовать на сайте спойлер. Я попробовал найти в интернете готовый код.

Источник

Спойлер в таблице

Друзья, прошу помощи! Уверен решение простейшее, но я не силен в js и jquery. В общем необходимо, чтобы по клику по тексту в определенной ячейке, под ней выезжало 2-5 строк таблицы.

Вот пример. Сначала 2 и 3 строка должны быть скрыты, а при клике на ссылку «выезжать». Заранее спасибо!

1 ответ 1

реализуется довольно просто при помощи jquery $(elem).toggle()

.toggle() переключает свойство display: none; на display: block; и наоборот

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html jquery css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.8.40944

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Справка:Сворачивание

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

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

Содержание

Сворачивание таблицы

Добавьте код « mw-collapsible » как класс, чтобы в таблице появилась ссылка «свернуть/развернуть».

Цифра Буква
1 A
2 Б
3 В

Сворачивание текста

Аналогично можно этот класс использовать для сворачивания текста внутри статьи.

Этот текст можно свернуть.

Свёрнутая по умолчанию таблица

Чтобы таблица изначально была свёрнута, используйте двойной код: « mw-collapsed » и « mw-collapsible ». Пример:

Заголовок всегда будет виден
Содержимое всегда
будет скрыто

Скрытие спойлеров в тексте

Скрыть текст внутри статьи можно, используя двойной код: указанный в предыдущем разделе с добавлением кода « mw-collapsible-content ».

Читайте также:  Режим домкрата рендж ровер спорт 2014

Этот текст предшествует скрытому тексту.

Настройка текста «свернуть/развернуть»

Можно добавить свой текст вместо стандартного «свернуть/развернуть». Для этого используйте код « data-expandtext » и « data-collapsetext ».

Цифра Буква
1 A
2 Б

Кнопка «свернуть/развернуть»

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

Если присвоить переключателю значение » mw-customcollapsible-myTable «, то при использовании кода » mw-customtoggle-myTable » это можно осуществить следующим образом:

Источник

Как правильно верстать HTML-таблицы

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

: colette / respawn entertainment, oculus

Практика показывает, что большинство разработчиков верстают таблицы HTML неверно — используют только теги строк и ячеек ( , ).

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

Знакомство с семантической вёрсткой

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

Семантические теги передают смысл (или обозначают важность) содержащегося в них контента.

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

Почему семантика так важна

Она повышает доступность контента. Тогда его лучше понимают:

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

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

Так, можно использовать для всех них тег

, но он не обладает семантикой, никак не обозначает смысл своего содержимого. Поэтому мы применяем для заголовков теги H1… H6, для таблицы — , , , , , . И так далее.

Для оформления страниц при семантической вёрстке применяют каскадные таблицы стилей (CSS).

Рассмотрим, какие теги отвечают за вёрстку таблиц, когда и зачем нужен каждый.

Frontend-разработчик, программист, дизайнер. Три года в разработке сайтов и приложений, около девяти — в дизайне. Был графдизайнером в языковой школе ILS и разработчиком в IT-компании IVIT. Сейчас преподаёт в Skillbox.

Строки и ячейки таблицы

Каждая таблица состоит из строк и ячеек, а задаётся тегом — это контейнер для остальных тегов таблицы.

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

Важно понимать. Дочерними элементами строки могут быть только ячейки (и заголовочная ячейка ). А сама строка дочерним элементом ячейки быть не может. Это ограничивает возможную вложенность тегов.

Мы видим три строки (элементы ). В каждой из строк по три ячейки ( ). Представим это HTML-кодом:

Объединение ячеек

Ячейки можно объединять (растягивать по горизонтали и вертикали) с помощью специальных атрибутов. При этом поглощаемые ячейки задавать своими тегами уже не придётся.

Столбцы таблицы объединяются атрибутом colspan , а строки — атрибутом rowspan .

И тут важно не запутаться:

Атрибут colspan тегов и объединяет ячейки по горизонтали (то есть ячейки одной строки). Значение colspan указывает, сколько столбцов пересекает ячейка.

Атрибут rowspan тегов и объединяет ячейки по вертикали (то есть ячейки разных строк). Значение rowspan задаёт, через сколько строк проходит ячейка.

Рассмотрим пару примеров:

Вторая ячейка первой строки пересекает два столбца. То есть она растянулась по горизонтали и приняла в себя третью ячейку первой строки. Третья ячейка второй строки пересекает две строки, то есть растянулась по вертикали, заняв и третью ячейку третьей строки.

Поэтому третьи ячейки для первой и третьей строк задавать не нужно. Они уже поглощены другими. Теперь к коду:

Ещё один пример:

Как такое сверстать:

Здесь вторая ячейка второй строки занимает два столбца и две строки. Обратите внимание, что во второй строке нет третьей ячейки и в третьей строке нет второй и третьей ячеек. Теперь места этих ячеек занимает вторая ячейка второй строки.

Заголовок таблицы

Этот тег следует включать в любую таблицу. Где бы вы его ни разместили, его содержимое будет выведено перед таблицей. Изменить это можно с помощью свойства caption-side (значение top — для вывода до таблицы, и bottom — после).

Для единообразия и доступности тег заголовка размещают в самом начале — сразу после тега .

Читайте также:  Как правильно наматывать трос лебедки

Тег по умолчанию выравнивает своё содержимое по центру. Чтобы установить выравнивание по левому или правому краю, достаточно поменять значение свойства text-align.

Зачем нужен заголовок?

  1. Чтобы пользователям было проще ориентироваться на странице — например, когда таблиц много.
  2. Тег помогает людям с ограниченными возможностями. По заголовку они получают краткое представление о содержимом таблицы и решают, полезна ли она для них и стоит ли читать её целиком.
  3. Этот тег влияет на оптимизацию, его любят поисковики.

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

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

Структура таблиц

Структура таблиц очень похожа на структуру HTML-страницы. Только для страницы мы используем теги , и , а для таблицы — , и .

Согласно стандарту HTML5, в таблице может быть только по одной секции thead и tfoot, а вот tbody — несколько.

Эти элементы полезны не только для доступности, но и для стилизации (как логичные точки добавления CSS к таблице).

Шапка таблицы

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

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

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

th th
td td td td td
td td td td td

Из примера видно, что первая строка объединяет две ячейки . Первая ячейка первой строки — это заголовок для других ячеек первого столбца, а вторая ячейка первой строки — это заголовок четырёх оставшихся столбцов.

Заголовки столбцов и строк. Тег

Тег задаёт особые ячейки, с которых начинаются строки или столбцы. В такой ячейке обычно хранится атрибут для всех данных строки или столбца.

Как мы и говорили выше, к содержимому таких ячеек применяется определённый стиль: по умолчанию это выделение жирным шрифтом и выравнивание по центру ячейки.

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

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

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

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

Тело таблицы

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

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

Тело таблицы располагается после заголовка и шапки .

Месяц Дни недели Оплата(тыс. р.)
Январь Понедельник 50
Вторник 40
Среда 35
Четверг 40
Пятница 15
Суббота 60
Воскресенье 30
Февраль Понедельник 20
Вторник 25
Среда 15
Четверг 70
Пятница 77
Суббота 63
Воскресенье 30

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

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

  • в первом будут январские строки;
  • во втором — февральские.

Подвал таблицы

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

Семантически это итог таблицы (например, результат подсчёта сумм по столбцам).

А ещё это нижний колонтитул таблицы, браузер выводит его после , а при печати таблицы содержимое может быть как на каждой напечатанной странице, так и только на последней (это зависит от браузера).

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

Для ячеек в секции следует использовать тег .

Нечётное Чётное
1 2
3 4
5 6
Вы узнали, что такое чётные и нечётные числа

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

Важно помнить!

Теги и нужны не всегда. Бывают таблицы без шапки и подвала.

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

К тому же браузер всё равно подставит этот тег сам, а всегда полагаться на браузеры — значит оставить место для возможных ошибок.

1 Мавзалеев И. В. 10.09.1992
2 Киреева А. Ю. 02.05.1996
3 Корнеев И. Ю. 09.10.1990
4 Тресков В. А. 25.03.1993
5 Ибрагимов А. Е. 15.10.1994
6 Борисенко Д. С. 10.10.1991

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

Теги и

C помощью тега удобно стилизовать столбцы таблицы через CSS (не приходится писать классы для каждой ячейки в разных строках). Это крутая фишка для любого разработчика.

Как это работает:

th th
1 2 3
1 2 3
1 2 3

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

Для группировки тегов применяют специальный тег :

позволяет задать стиль сразу для группы столбцов, а тег внутри — переопределить его для отдельных столбцов в группе.

Располагать теги , нужно перед тегами , , , а если у таблицы есть тег , то после него.

Атрибут span

У тега есть атрибут span, который распространяет стиль на несколько столбцов.

Первый тег — это первый столбец, а второй тег — второй, но из-за атрибута span, в котором мы указали значение «2», его стиль распространяется и на третий.

Это удобно, когда нужно одинаково стилизовать несколько столбцов. Например, чтобы не создавать много тегов с одними и теми же классами, мы используем атрибут span. Этот атрибут работает и для тега .

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

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

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

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

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

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

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

Вернёмся к нашей таблице чётности чисел:

Нечётное Чётное
1 2
3 4
5 6
Вы узнали, что такое чётные и нечётные числа

Чтобы однозначно указать заголовки столбцов, делаем вот так:

И у каждой строки тоже можно определить заголовок (если в таблице есть не только заголовки столбцов). Слегка изменим для этого наш пример:

Пара № Нечётное Чётное
1 1 2
2 3 4
3 5 6
Вы узнали, что такое чётные и нечётные числа

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

У атрибута scope есть ещё два значения — colgroup и rowgroup. Они используются для таблиц с двумя и более уровнями заголовков (заголовки, которые группируют подзаголовки).

Так заголовок верхнего уровня получает scope=»colgroup», а у его подзаголовков scope=»col», и аналогично для строк.

Подытожим

  1. Таблица состоит из строк и ячеек ( и ). Дочерними элементами строки могут быть только ячейки, но не наоборот.
  2. Таблице нужен заголовок . Он увеличивает доступность веб-содержимого. Если дизайнер не учёл этого, верстальщик сам придумывает заголовок и скрывает его с помощью CSS.
  3. За логическое структурирование таблицы, помимо заголовка , отвечают теги , и . Также они полезны при стилизации секций таблицы.
  4. Внутри ячееки задают тегом (он семантический), внутри — , а внутри допустимы оба.
  5. Для стилизации столбцов в таблице применяют тег .

Заботьтесь обо всех пользователях — верстайте таблицы семантически верно.

Сокращение от англ. table row — строка таблицы.

Сокращение от англ. table data — значение (ячейки) в таблице.

Сокращение от англ. table header — заголовок таблицы (ячейка).

Производное от английских слов column («столбец, колонка») и span («размах, объединять, охватывать, перекрывать»).

Производное от английских слов row («ряд, строка») и span («размах, охватывать, объединять, перекрывать»).

Источник

Читайте также:  Брызговики передние поло седан 2015 артикул
Поделиться с друзьями
Тюнинг авто
Adblock
detector