У цій статті ви дізнаєтеся, як умовно форматувати таблиці в Outlook. Я покажу вам, як оновити колір тексту комірок та передумови кольором, який ви обираєте у випадаючому списку.

Підготовка

Перш ніж ми почнемо наш "урок малювання" і навчимося умовно форматувати таблиці в Outlook, хотілося б зробити невелике представлення нашого додатку для Outlook під назвою Shared Email Templates. За допомогою цього зручного інструменту ви зможете керувати своєю кореспонденцією в Outlook так швидко і легко, як раніше могли тільки уявити. Надбудова допоможе вам уникнути повторюваних копіпастів і створювати красиві листи у форматів декілька кліків.

Тепер саме час повернутися до нашої основної теми - умовного форматування в таблицях Outlook. Іншими словами, я покажу вам, як розфарбувати комірки, їх межі і вміст в потрібний колір. Для початку переконайтеся, що ви пам'ятаєте, як створювати таблиці в Outlook.

Оскільки я буду розфарбовувати клітинки на основі тону, який я виберу зі спадного списку, мені потрібно зробити ще одну попередню підготовку. Якщо ви пам'ятаєте мій урок про те, як створювати заповнювані шаблони електронних листів, ви знаєте, що спадні списки створюються за допомогою наборів даних. Знайдіть хвилинку, щоб оновити свої знання з цієї теми, якщо ви відчуваєте, що забули, як керувати наборами даних, і давайте рухатися далі.

Тепер мені потрібно попередньо зберегти набір даних з кольорами, які я збираюся використовувати (я назвав його Набір даних зі знижками ) і додайте WhatToEnter з випадаючим списком. Отже, ось мій набір даних:

Якщо вам цікаво, де взяти ці коди, просто створіть порожню таблицю, перейдіть на її Властивості Ви побачите його код у відповідному полі, сміливо копіюйте його прямо звідти.

Створюю макрос WHAT_TO_ENTER і підключаю його до цього набору даних, оскільки він мені знадобиться пізніше:

Цей невеликий макрос допоможе мені отримати випадаючий список знижок на вибір. Як тільки я це зроблю, необхідна частина моєї таблиці буде зафарбована.

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

Давайте почнемо.

Зміна кольору шрифту тексту в таблиці

Почнемо з зафарбовування тексту в таблиці. Я підготувала шаблон зі зразком таблиці для наших експериментів з малювання:

Моя мета - пофарбувати текст у відповідний колір в залежності від вибору, що випадає. Іншими словами, я хочу вставити шаблон, вибрати необхідну ставку дисконтування з випадаючого списку і цей вставлений текст буде пофарбований. В який колір? Прокрутіть вгору до набору даних в частині підготовки, ви побачите, що кожна ставка дисконтування має свій колірний код. Це і є потрібний колір, який повинен бутивикористаний.

Оскільки я хочу, щоб знижка додавалася зі списку, що випадає, мені потрібно вставити макрос WhatToEnter в цю комірку. Відчуваєте, що вам потрібно освіжити пам'ять на цю тему? Знайдіть хвилинку, щоб переглянути один з моїх попередніх уроків ;)

Отже, підсумкова таблиця матиме такий вигляд:

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

Але як налаштувати шаблон так, щоб текст зафарбовувався відповідним кольором? Насправді дуже просто, потрібно лише трохи оновити HTML шаблону. На цьому закінчимо з теорією і перейдемо до практики.

Зафарбувати весь текст у комірці таблиці

Перш за все, я відкриваю HTML-код свого шаблону і уважно його перевіряю:

Ось як виглядає мій шаблон у форматі HTML:

Примітка: надалі я викладатиму всі HTML-коди у вигляді тексту, щоб ви могли скопіювати їх у свої шаблони і модифікувати так, як вам зручно.

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

Мене цікавить перший елемент другого рядка з моїм WHAT_TO_ENTER. Забарвлення буде зроблено шляхом додавання наступного фрагмента коду:

Я розберу його для вас на частини і поясню кожну з них:

• На сьогоднішній день, на жаль, це не так. КОЛІР Якщо замінити його на, скажімо, "red", то цей текст стане червоним. Однак, оскільки моє завдання полягає у виборі кольору зі списку, що випадає, я на секунду повернуся до підготовки і візьму свій підготовлений WhatToEnter макрос звідти: ~%WhatToEnter[{dataset:'Набір даних зі знижками',column:'Знижка',title: Вибрати знижку'}]
• ТЕКСТ_ДЛЯ_ЗАБАРВЛЕННЯ це текст, який потрібно заштрихувати. У моєму конкретному прикладі це буде " ~%WhatToEnter[{dataset:'Набір даних зі знижками',column:'Знижка',title:'Виберіть знижку'}] знижка " (скопіюйте цей фрагмент прямо з оригінального HTML-коду, щоб уникнути пошкодження даних).

Ось новий фрагмент коду, який я вставлю в свій HTML:

Примітка: Ви могли помітити, що в цих двох макросах відрізняється параметр "column". Це пов'язано з тим, що мені потрібно повернути значення з різних стовпців, тобто стовпчик:'Код кольору' поверне колір, яким буде зафарбовано текст при цьому колонка: "Знижка - ставка дисконтування для вставки в комірку.

Виникає нове питання - в якому місці HTML його розмістити? Якщо говорити в загальному, то цей текст повинен замінити ТЕКСТ_ДЛЯ_ЗАБАРВЛЕННЯ. У моєму прикладі це був би перший стовпчик ( ) другого рядка (стовпця). Отже, замінюю макрос WTE та слово "знижка" на наведений вище код і отримую наступний HTML:

Зразок заголовка 1

Зразок заголовка 2

Зразок заголовка 3

~%WhatToEnter[{dataset:'Набір даних зі знижками',column:'Знижка',title:'Виберіть знижку'}] знижка

Після того, як я збережу зміни і вставлю цей оновлений шаблон, спливаюче вікно запропонує мені вибрати знижку. Я обираю 10%, і мій текст одразу ж забарвлюється в зелений колір.

Затінити частину вмісту комірки

Логіка зафарбовування тільки частини вмісту комірки в основному така ж - ви замінюєте тільки текст, який потрібно зафарбувати, кодом з попереднього розділу, залишаючи решту тексту як є.

У цьому прикладі, якщо мені потрібно виділити тільки відсоток (без слова "знижка"), я відкрию HTML-код, виберу ту частину, яку не потрібно виділяти (в нашому випадку "знижка") і винесу її за межі тега:

Якщо ви робите підготовку до розфарбовування з самого початку, просто майте на увазі, що майбутній розфарбований текст йде на місці ТЕКСТ_ДЛЯ_ЗАБАРВЛЕННЯ решта залишається після закінчення. Ось мій оновлений HTML:

Зразок заголовка 1

Зразок заголовка 2

Зразок заголовка 3

~%WhatToEnter[{dataset:'Набір даних зі знижками',column:'Знижка',title:'Виберіть знижку'}] знижка

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

Застосування умовного форматування до комірок таблиці

Тепер давайте трохи змінимо завдання і спробуємо виділити не текст, а весь фон комірок в тій же таблиці-зразку.

Виділіть одну комірку

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

Якщо я захочу відтінити фон комірки зі знижкою, мені також потрібно буде трохи модифікувати HTML, але модифікація буде відрізнятися від розфарбовування тексту. Основна відмінність полягає в тому, що колір повинен бути застосований не до тексту, а до всієї комірки.

У форматі HTML комірка, що виділяється, має такий вигляд:

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

• "style=" означає, що комірка рядка має такі властивості стилю. Тут ми робимо першу перерву. Оскільки я повинен задати користувальницький колір фону, я змінюю стиль до data-set-style .
• "width: 32.2925%; border: 1px solid black;" - Це властивості стилю за замовчуванням, які я мав на увазі вище. Мені потрібно додати ще одну, щоб налаштувати фон вибраної комірки: background-color Оскільки моя мета - вибрати колір з випадаючого списку, я повертаюся до своєї підготовки і беру звідти готовий WhatToEnter.

Порада: якщо ви хочете, щоб комірка була пофарбована в один колір і не хотіли, щоб випадаючий список щоразу набридав вам, просто замініть макрос на назву кольору ("синій", наприклад). Виглядатиме це так: ~%WhatToEnter[{dataset:'Набір даних зі знижками',column:'Знижка',title:'Виберіть знижку'}] знижка

• " ~%WhatToEnter[] знижка " - вміст комірки.

Отже, ось як виглядає оновлений HTML:

Решта таблиці залишається як є. Ось результуючий HTML, який виділить комірку з відсотковою ставкою:

Зразок заголовка 1

Зразок заголовка 2

Зразок заголовка 3

~%WhatToEnter[{dataset:'Набір даних зі знижками',column:'Знижка',title:'Виберіть знижку'}] знижка

Коли я збережу цю зміну і вставлю оновлену таблицю в електронний лист, то отримаю випадаючий список зі знижками і перша комірка буде виділена, як і планувалося.

Зафарбувати весь ряд

Коли однієї клітинки не вистачає, зафарбовую весь ряд :) Ви можете подумати, що потрібно буде застосувати кроки з розділу вище для всіх клітинок в ряду. Поспішу Вас розчарувати, процедура буде трохи відрізнятися.

У наведених вище інструкціях я показав, як оновити фон клітинки, змінивши фрагмент HTML цієї клітинки. Оскільки зараз я збираюся перефарбувати весь рядок, мені потрібно буде взяти його HTML-рядок і застосувати зміни безпосередньо до нього.

Наразі він є безальтернативним і має такий вигляд . Треба додати, що data-set-style= data-set-style= і вставити туди мій WHAT_TO_ENTER. В результаті рядок буде виглядати так, як показано нижче:

Таким чином, весь HTML таблиці з коміркою, що зафарбовується, буде виглядати наступним чином:

Зразок заголовка 1

Зразок заголовка 2

Зразок заголовка 3

~%WhatToEnter[{dataset:'Набір даних зі знижками',column:'Знижка',title:'Виберіть знижку'}] знижка

Не соромтеся копіювати цей HTML для своїх шаблонів, щоб переконатися, що він працює так, як я описав. Або ж довіртеся скріншоту нижче :)

Підбиваємо підсумки

Ось і все, що я хотів сьогодні розповісти про умовне форматування в таблицях Outlook. Я показав, як змінювати колір вмісту комірок і виділяти їх фон. Сподіваюся, мені вдалося переконати вас, що в модифікації HTML шаблону немає нічого особливого і складного, і ви проведете кілька власних експериментів з малюванням ;)

До речі, інструмент можна встановити з Microsoft Store на ПК, Mac або Windows-планшет і використовувати на всіх пристроях одночасно.

Якщо у Вас виникли питання або, можливо, пропозиції щодо форматування таблиць, будь ласка, повідомте мені про це в коментарях. Буду радий почути Вас!