Разделительная линия между наборами строк
Если у вас есть большой отсортированный по какому-либо столбцу список, то было бы неплохо автоматически отделять получившиеся наборы строк разделительными горизонтальными линиями для наглядности: В приведенном выше примере – это линии между странами, но, в общем случае, между любыми повторяющимися элементами в одном столбце. Давайте рассмотрим несколько способов реализовать такое.
Способ 1. Простой
В самом быстром варианте сделать подобное можно очень легко с помощью условного форматирования, которое будет рисовать нижнюю границу ячеек, если содержимое ячейки в столбце A не равно содержимому следующей ячейки в этой же колонке. Выделите все ячейки в таблице кроме шапки и выберите на Главной вкладке команду Условное форматирование – Создать правило (Home – Conditional Formatting — New Rule) . Выберите тип правила Использовать формулу для определения форматируемых ячеек (Use formula to determine which cells to format) и введите в поле следующую формулу: Обратите внимание на доллары в адресах для закрепления букв столбцов, но не номеров строк, т.к. мы сравниваем только страны из столбца А. Пробелов в формуле быть не должно.
Нажмите на кнопку Формат (Format) и в открывшемся окне на вкладке Граница (Borders) включите линию нужного цвета на нижней границе. После нажатия на ОК наше правило заработает и между группами строк появятся горизонтальные отчеркивающие линии
Способ 2. С поддержкой фильтра для чисел и дат
Небольшой, но весьма ощутимый недостаток первого способа состоит в том, что такие границы не всегда будут корректно работать при фильтрации списка по другим столбцам. Так, например, если отфильтровать нашу таблицу по датам (только январь), то линии будут видны уже не между всеми странами, как раньше: 
Выкрутиться в таком случае можно, используя функцию ПРОМЕЖУТОЧНЫЕ.ИТОГИ (SUBTOTAL) , которая умеет выполнять различные математические операции (сумму, среднее, количество и т.д.), но «видеть» при этом только отфильтрованные ячейки. Для примера, отсортируем нашу таблицу по последнему столбцу с датой и проведем разделительную линию между днями. В условном форматировании придется создать похожее на первый способ правило, но использовать при этом не прямые ссылки в сравнении ячеек D2 и D3, а заключить их как аргументы в функцию ПРОМЕЖУТОЧНЫЕ.ИТОГИ: 
Первый аргумент функции (число 109) — это код операции суммирования. На самом деле мы здесь ничего не складываем и делаем, по сути, тупую операцию типа СУММ(D2), которая, конечно же, равна D2. Но от СУММ эта функция отличается как раз тем, что производит действия только над видимыми ячейками, т.е. и сравниваться будут оставшиеся после фильтра на экране ячейки, что мы и хотели.
Способ 3. С поддержкой фильтра для любых данных
Как легко сообразить, у второго способа тоже есть недостаток: функцию суммирования можно применять только к числам или датам (которые тоже в Excel представляют из себя числа), но не к тексту. Т.е., если нам захочется провести линию между странами, как в первом способе, но так, чтобы она корректно отображалась и после фильтрации, то придется использовать существенно более сложный путь. Выделите еще раз всю таблицу кроме шапки, создайте новое правило на основе формулы и введите следующую конструкцию в поле проверки: =СУММПРОИЗВ(ПРОМЕЖУТОЧНЫЕ.ИТОГИ(103;СМЕЩ($A$1:$A2;СТРОКА($A$1:$A2)-МИН(СТРОКА($A$1:$A2));;1));—($A$1:$A2=$A2))=1 В английской версии это будет:
=SUMPRODUCT(SUBTOTAL(103;OFFSET($A$1:$A2;ROW($A$1:$A2)-MIN(ROW($A$1:$A2));;1));—($A$1:$A2=$A2))=1 Нажав на кнопку Формат (Format) задайте обрамление красной линией сверху и нажмите ОК. Получившееся разделение по странам будет корректно работать даже после фильтрации, например, по дате:
Ссылки по теме
- Подсветка дат и сроков с помощью условного форматирования
- Как Excel на самом деле работает с датами и временем
- Как использовать условное форматирование для подсветки ячеек по условию в Excel
Как сделать горизонтальную линию?
Горизонтальная линия делается с помощью свойства border-bottom, которое применяется обычно к элементу . Это свойство добавляет линию снизу заданной толщины и стиля (пример 1). Чтобы не «портить» все , используем класс line , и уже для класса указываем свойство border-bottom . Сам остаётся пустым, никакое содержимое в нём не требуется, только стилевое оформление.
Пример 1. Использование border-bottom
Результат данного примера показан на рис. 1. Здесь мы делаем линию красного цвета толщиной в один пиксель. Сама линия при это занимает всю доступную ширину.
Рис. 1. Вид линии, созданной через border-bottom
См. также
- border-bottom
- Оформление ссылок
- Точки между слов
Как сделать цветную горизонтальную линию?
Горизонтальные линии хорошо использовать для отделения одного блока текста от другого. Небольшой по размеру текст, сверху и снизу которого располагаются горизонтальные линии, привлекает больше внимания читателя, чем обычный текст.
С помощью тега
можно нарисовать горизонтальную линию, вид которой зависит от используемых атрибутов, а также браузера. Тег относится к блочным элементам, поэтому линия всегда начинается с новой строки, а после неё все элементы отображаются на следующей строке. Благодаря множеству атрибутов тега
линией, созданной через этот тег, легко управлять. Если ещё подключить мощь стилей, то добавление линии в документ превращается в простое занятие.
По умолчанию линия
отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых свойств. В частности, старые версии браузера Internet Explorer для цвета линии применяют свойство color , а остальные браузеры — background-color . Но это еще не все, при этом обязательно следует указать толщину линии (свойство height ) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border . Собирая все свойства воедино для селектора hr , получим универсальное решение для популярных браузеров (пример 1).
Пример 1. Горизонтальная линия
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвет горизонтальной линии
Текстовоя строка
Результат данного примера показан на рис. 1.
Рис. 1. Цветная горизонтальная линия
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Тег
HTML горизонтальная линия — разделитель
Тег
используется в HTML для вывода горизонтальной линии — разделителя.
Построенная с помощью тега
горизонтальная линия в HTML 5 имеет семантический смысл и выступает в роли тематического разделителя.
Синтаксис
текст
текстОтображение в браузере
Некий текст на странице.
Текст, который по смыслу отделен от текста выше.
Пример использования
в HTML коде
Горизонтальная линия в HTML
Некий текст на странице.
Текст, который по смыслу отделен от текста выше.
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты
В HTML5 у тега
нет атрибутов. Используйте CSS вместо них.
Устаревшие атрибуты
Устанавливает толщину линии.