Оглавление
В этой статье вы узнаете, как условно форматировать таблицы в Outlook. Я покажу вам, как обновлять краску текста ячеек и фон с цветом, который вы выберете из выпадающего списка.
Подготовка
Прежде чем мы начнем наш "урок рисования" и узнаем, как условно форматировать таблицы в Outlook, я хотел бы сделать небольшое вступление о нашем приложении для Outlook под названием Shared Email Templates. С помощью этого удобного инструмента вы сможете управлять своей перепиской в Outlook так быстро и легко, как раньше могли только представить. Дополнение поможет вам избежать повторяющихся копипастов и создать красивые письма ввсего несколько кликов.
Теперь самое время вернуться к нашей основной теме - условному форматированию в таблицах Outlook. Другими словами, я покажу вам, как окрашивать ячейки, их границы и содержимое в нужный цвет. Прежде всего, убедитесь, что вы помните, как создавать таблицы в Outlook.
Поскольку я буду раскрашивать ячейки в зависимости от тона, который я выберу из выпадающего списка, мне нужно сделать еще одну предварительную настройку. Если вы помните мой урок по созданию заполняемых шаблонов электронной почты, вы знаете, что выпадающие списки создаются с помощью наборов данных. Найдите время обновить свои знания по этой теме, если вам кажется, что вы забыли, как управлять наборами данных, и давайте двигаться дальше.
Теперь мне нужно предварительно сохранить набор данных с цветами, которые я собираюсь использовать (я назвал его Набор данных со скидками ) и добавить WhatToEnter макрос с выпадающим выбором. Итак, вот мой набор данных:
| Скидка | Цветовой код |
| 10% | #70AD47 |
| 15% | #475496 |
| 20% | #FF0000 |
| 25% | #2E75B5 |
Если вам интересно, где взять эти коды, просто создайте пустую таблицу, перейдите к ее Свойства и выберите любой цвет. Вы увидите его код в соответствующем поле, не стесняйтесь скопировать его прямо оттуда. 
Я создаю макрос WHAT_TO_ENTER и подключаю его к этому набору данных, поскольку он понадобится мне позже:
~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title: Select discount'}]Этот небольшой макрос поможет мне получить выпадающий список скидок для выбора. Как только я это сделаю, необходимая часть моей таблицы будет окрашена.
Я понимаю, насколько непонятно это может выглядеть сейчас, поэтому не буду оставлять вас с этим недоразумением и начну показывать, как изменить цвет текста или выделить ячейку. Я буду использовать базовые примеры, чтобы вы могли понять идею и воспроизвести эту процедуру с вашими собственными данными.
Давайте начнем.
Изменение цвета шрифта текста в таблице
Давайте начнем с затенения некоторого текста в таблице. Я подготовил шаблон с образцом таблицы для наших экспериментов с закрашиванием:
Моя цель - окрасить текст в соответствующий цвет в зависимости от выпадающего выбора. Другими словами, я хочу вставить шаблон, выбрать необходимую ставку скидки из выпадающего списка, и этот вставленный текст будет окрашен. В какой цвет? Прокрутите вверх к набору данных в подготовительной части, вы увидите, что каждая ставка скидки имеет свой собственный цветовой код. Это желаемый цвет, который должен бытьиспользуется.
Поскольку я хочу, чтобы скидка добавлялась из выпадающего списка, мне нужно вставить макрос WhatToEnter в эту ячейку. Чувствуете, что вам нужно освежить память по этой теме? Найдите время, чтобы ознакомиться с одним из моих предыдущих уроков ;)
Таким образом, результирующая таблица будет выглядеть следующим образом:
| Образец заголовка 1 | Образец заголовка 2 | Образец заголовка 3 |
| ~%WhatToEnter[ { {dataset:'Набор данных со скидками', column:'Скидка', title:'Выберите скидку'} ] скидка |
Видите ли, размер скидки будет добавлен из выпадающего списка, и слово "скидка" будет там в любом случае.
Но как настроить шаблон так, чтобы текст окрашивался в соответствующий цвет? Довольно просто, нужно лишь немного обновить HTML шаблона. Давайте закончим с теоретической частью и перейдем к практике.
Раскрасьте весь текст в ячейке таблицы
Прежде всего, я открываю HTML-код своего шаблона и внимательно его проверяю: 
Вот как выглядит мой шаблон в HTML: 
Примечание. Далее я опубликую все HTML-коды в виде текста, чтобы вы могли скопировать их в свои шаблоны и изменить по своему усмотрению.
Давайте внимательно посмотрим на HTML выше. Первая строка - это свойства границы таблицы (стиль, ширина, цвет и т.д.). Затем идет первая строка
Меня интересует первый элемент второго ряда с моим WHAT_TO_ENTER. Раскраска будет выполнена путем добавления следующего фрагмента кода:
ТЕКСТ_К_СЕБЕ_ЦВЕТНОЙЯ разобью его на части и поясню каждую из них:
- Сайт ЦВЕТ Параметр обрабатывает покраску. Если заменить его, скажем, на "red", то текст станет красным. Однако, поскольку моя задача - выбрать цвет из выпадающего списка, я на секунду вернусь к подготовке и возьму готовое WhatToEnter макрос оттуда: ~%WhatToEnter[{dataset:'Набор данных со скидками',column:'Скидка',title: Выберите скидку'}]
- ТЕКСТ_К_СЕБЕ_ЦВЕТНОЙ это текст, который нужно заштриховать. В моем конкретном примере это будет " ~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title:'Select discount'}] скидка " (скопируйте этот фрагмент прямо из оригинального HTML-кода, чтобы избежать повреждения данных).
Вот новый фрагмент кода, который я вставлю в свой HTML:
Примечание. Вы могли заметить, что параметр "column" отличается в этих двух макросах. Это потому, что мне нужно вернуть значение из разных столбцов, т.е. колонка: 'Код цвета' вернет цвет, в который будет окрашен текст, в то время как столбец: 'Скидка' - ставка дисконтирования для вставки в ячейку.
Возникает новый вопрос - в какое место HTML его поместить? Говоря в общем, этот текст должен заменить TEXT_TO_BE_COLORED. В моем примере это будет первый столбец (
Когда я сохраню изменения и вставлю этот обновленный шаблон, во всплывающем окне мне будет предложено выбрать скидку. Я выбираю 10%, и мой текст сразу же окрашивается в зеленый цвет. 
Затенение части содержимого ячейки
Логика окрашивания только части содержимого ячейки в основном такая же - вы заменяете только тот текст, который должен быть окрашен, кодом из предыдущей главы, оставляя остальной текст как есть.
В данном примере, если мне нужно выделить цветом только процент (без слова "скидка"), я открою HTML-код, выделю часть, которую не нужно выделять цветом ("скидка" в нашем случае), и перенесу ее за пределы тега: 
Если вы делаете подготовку к раскрашиванию с самого начала, просто имейте в виду, что текст будущего раскрашивания идет вместо ТЕКСТ_К_СЕБЕ_ЦВЕТНОЙ Остальное остается после завершения. Вот мой обновленный HTML:
Видите? Я поместил только часть содержимого ячейки в теги, поэтому при вставке будет окрашена только эта часть. 
Применение условного форматирования к ячейкам таблицы
Теперь немного изменим задачу и попробуем выделить не текст, а весь фон ячеек в той же таблице-образце.
Выделите одну ячейку
Поскольку я модифицирую одну и ту же таблицу, я не буду повторяться и вставлять HTML-код исходной таблицы и в этой главе. Прокрутите немного вверх или сразу перейдите к первому примеру этого учебника, чтобы увидеть неизмененный код неокрашенной таблицы.
Если я хочу оттенить фон ячейки со скидкой, мне также придется немного изменить HTML, но модификация будет отличаться от раскраски текста. Главное отличие в том, что цвет должен быть применен не к тексту, а ко всей ячейке.
Выделяемая ячейка выглядит так в формате HTML:
Поскольку я хочу выделить ячейку, изменения должны быть применены к атрибуту ячейки, а не к тексту. Я разобью строку выше на части, поясню каждую из них и укажу на части, которые нужно изменить:
- "style=" означает, что ячейка ряда имеет следующие свойства стиля. Здесь мы делаем первый перерыв. Поскольку я должен установить пользовательский цвет фона, я изменяю стиль на стиль набора данных .
- "width: 32.2925%; border: 1px solid black;" - Это свойства стиля по умолчанию, которые я имел в виду выше. Мне нужно добавить еще одно, чтобы настроить фон выбранной ячейки: background-color Поскольку моя цель - выбрать цвет из выпадающего списка, я возвращаюсь к своей подготовке и беру оттуда готовый WhatToEnter.
Совет. Если вы хотите, чтобы ячейка была окрашена в один цвет и чтобы выпадающий список не беспокоил вас каждый раз, просто замените макрос на название цвета ("синий", например). Это будет выглядеть так: ~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title:'Select discount'}] скидка
- " ~%WhatToEnter[] скидка " - это содержимое ячейки.
Итак, вот обновленный вид HTML:
Остальная часть таблицы остается как есть. Вот результирующий HTML, который выделит ячейку с процентной ставкой:
Когда я сохраню это изменение и вставлю обновленную таблицу в электронное письмо, я получу выпадающий список со скидками, а первая ячейка будет выделена, как и планировалось. 
Раскрасьте весь ряд
Когда одной ячейки недостаточно, я закрашиваю весь ряд :) Вы можете подумать, что вам нужно будет применить шаги из раздела выше для всех ячеек в ряду. Спешу вас разочаровать, процедура будет немного отличаться.
В инструкциях выше я показал, как обновить фон ячейки, изменяя HTML-фрагмент этой ячейки. Поскольку сейчас я собираюсь перекрасить весь ряд, мне нужно взять его HTML-строку и применить изменения прямо к ней.
Теперь он свободен от опций и выглядит следующим образом . Мне нужно добавить data-set-style= и вставьте туда мой WHAT_TO_ENTER. В результате строка будет выглядеть так, как показано ниже:
Таким образом, весь HTML таблицы с закрашенной ячейкой будет выглядеть следующим образом:
Не стесняйтесь копировать этот HTML для своих собственных шаблонов, чтобы убедиться, что он работает так, как я описал. В качестве альтернативы, доверьтесь скриншоту ниже :) 
Подведите итоги
Вот и все, что я хотел рассказать вам сегодня об условном форматировании в таблицах Outlook. Я показал вам, как изменить цвет содержимого ячеек и выделить их фон. Надеюсь, мне удалось убедить вас, что в изменении HTML шаблона нет ничего особенного и сложного, и вы проведете несколько собственных экспериментов с рисованием ;)
К вашему сведению, инструмент можно установить из Microsoft Store на ПК, Mac или планшет с Windows и использовать на всех устройствах одновременно.
Если у вас есть вопросы или, может быть, предложения по форматированию таблиц, пожалуйста, сообщите мне об этом в комментариях. Я буду рад получить от вас ответ!
