Содржина
Во оваа статија ќе видите како да примените условно форматирање на границите на табелата во Outlook. Ќе ви покажам како да ја промените нивната боја, ширина и стил. Потоа ќе ве научам како да направите неколку модификации истовремено и да ја обоите вашата табела Outlook на многу различни начини.
Прво, би сакал да направам мала белешка за новодојденците на овој блог. Бидејќи денес ќе зборуваме за условно форматирање во шаблоните, ќе ви покажам како правилно да ги поставите користејќи го нашиот додаток за шаблони за споделени е-пошта за Outlook. Оваа алатка може да ви помогне да залепите претходно зачувани совршено форматирани шаблони на вашите е-пошта и да ја намалите рутината на кореспонденција на неколку кликања.
Ако веќе сте го прочитале моето упатство за условно форматирање во табелите на Outlook, знаете како да ја смените содржината на ќелиите и бојата на позадината. Сепак, тоа не е сè што можете да направите за да ја разубавите табелата на Outlook. Денес ќе ви ги покажам начините како условно да ги обоите границите на вашата маса и да ја измените нивната ширина и стил.
Покрај тоа, ве очекува мал бонус во последното поглавје каде што ќе ви покажам како да примените неколку модификации во исто време и направете ја вашата маса шарена и светла како огнометот на 4 јули ;)
Променете ја бојата на границите на ќелиите
За да ви покажеме како функционира сликањето на границите, Ќе ги користам истите примероци од минатонеделниот туторијал. Случајот е следниот: I paste aТим на Microsoft, слободно проверете го нивниот одговор во овој разговор за GitHub :)
Завршна белешка
Навистина се надевам дека успеав да ве убедам дека табелата во Outlook не е само црни граници со обични текст. Има многу простор за подобрување и креативност :)
Кога ќе одлучите да направите неколку сопствени експерименти со сликање, само инсталирајте Шаблони за споделени е-пошта од Microsoft Store и уживајте!
Ако има за сите прашања што останале од вас, потребна е помош со условно форматирање во табелите на Outlook, само оставете неколку зборови во делот за коментари и ние ќе го сфатиме тоа ;)
шаблон и изберете ја есконтната стапка за пополнување на табелата. Во зависност од мојот избор, границите на ќелијата ќе бидат обоени во одредената боја.Табелата што ќе ја обоам денес ќе биде онаа подолу:
| Заглавие на примерокот 1 | Заглавие на примерок 2 | Заглавие на примерок 3 |
| ~%WhatToEnter[ {dataset:'Dataset with discounts', колона:' Попуст', наслов:'Избери попуст'} ] попуст |
Како што се обработува условното форматирање во HTML-шаблоните, ајде да прво отворете го HTML-кодот на оваа табела:
- Отворете го образецот од интерес и притиснете Уреди :
- Најдете го Прикажи ја HTML иконата ( ) на лентата со алатки на шаблонот:
- Види го оригиналниот HTML што ќе се менува повеќе пати:
Ако се прашувате за боите и нивната поврзаност со стапките на попуст, ќе ви дадам совет :) Dataset! Немате идеја што е тоа? Потоа, направете мала пауза и прво прочитајте го моето упатство за шаблони за полнење на Outlook.
Еве ја оригиналната база на податоци што ќе ја користам на почетокот и малку ќе се подобрам во неколку поглавја:
| Попуст | Шифра на боја |
| 10% | #00B0F0 |
| 15 % | #00B050 |
| 20% | #FFC000 |
| 25% | #4630A0 |
Кога ќе треба да ја вратам потребната шифра на боја од оваа табела, ќе го користам следново макро:
~%WhatToEnter[{dataset:'Dataset with discounts',column:'Color code'}]Бидејќи ги опфативме сите основи, ајде да почнеме да ги менуваме боите :)
Ажурирајте ја бојата на границата на една cell
За да ги обоиме границите на една клетка во табела, прво да ја најдеме нејзината линија во HTML-от на шаблонот и да ги погледнеме неговите компоненти одблизу:
- „ стил= “ го претставува множеството основни параметри на ќелијата.
- „ширина: 32%; работа: 1px солидна #aeabab “ се ширината, бојата и стилот на ќелијата и границата.
- „~%WhatToEnter[] попуст“ е содржината на ќелијата.
Оваа кодна линија значи дека ќе видам ќелија со 1px сиви граници со цврст стил. Ако заменам некој од тие параметри, тоа може да го оштети изгледот на табелата во мојот шаблон, т.е. границите ќе бидат невидливи (иако сè ќе изгледа совршено по лепењето).
Би сакал да имам стандард табела во шаблон и нека биде изменета при лепење. Така, додавам еден нов атрибут со параметрите што ќе ги заменат оригиналните при залепување:
Ајде да ја испитаме HTML линијата погоре:
- “ style="border : 1px solid #aeabab;" е првиот атрибут. Тоа се оригиналите на ќелијатакарактеристики.
- „ data-set-style= “ е посебен параметар кој ќе ми помогне да го заменам атрибутот погоре со потребниот сет на својства при вметнување.
- “ граница: 1px солидна; border-color: “ е дел од вториот атрибут каде што ќе направиме пауза. Видете, почетокот е идентичен со оригиналот, иста ширина и стил на границата. Меѓутоа, кога станува збор за бојата (параметарот што сакам да го сменам), го заменувам со border-color: и го ставам макрото WhatToEnter. Оттука, во зависност од паѓачкиот избор, макрото ќе биде заменето со шифрата на бојата и границата ќе се пребојува.
- „~%WhatToEnter[] попуст“ сеуште е содржината на ќелијата што не бара никакви промени.
Затоа, целосниот HTML со ќелијата обоена во иднина ќе изгледа вака:
Кога ќе го залепите овој шаблон , границата на ажурираната ќелија веднаш ќе биде обоена во избраната боја:
Насликајте ги границите на целиот ред
Сега да ги насликаме границите на цел ред од нашата табела за примероци и видете како функционира. Логиката е апсолутно иста како и востав погоре, освен што ќе треба да ги ажурирате сите ќелии од вториот ред. Откако истите модификации што ги опфатив погоре ќе се применат на целиот ред, тој се наслика со намигнување при залепување на шаблонот.
Ако сакате да го погледнете готовиот HTML со боење на вториот ред, еве го:
Променете ја ширината на границата
Сега ајде да се обидеме да ја ажурираме не само бојата на границата, туку и нејзината ширина. Погледнете уште еднаш на атрибутот HTML што го заменува оригиналниот при вметнување:
data-set-style="border: 1px solid; border-color:~%WhatToEnter[{dataset:' Збирка на податоци со попусти“, колона: „Шифра на боја“}]“>~%WhatToEnter[{dataset:„Збирка податоци со попусти“, колона:„Попуст“, наслов:„Избери попуст“}] попустВидете ја 1px параметар? Ова е ширината на границите што треба да се обојат. Може рачно да го промените во, на пример, 2 и границите на табелата ќе станат пошироки откако ќе го залепите.
Сепак, ќе го направам тоа на друг начин. Ќе ја ажурирам мојата база на податоци и ќе додадам нова колона со ширина на границите. Во овој случај, штом изберам сегашна стапка за залепување, бојата и ширината ќе бидатажурирано.
| Попуст | Шифра на боја | Ширина на граница |
| 10% | #00B0F0 | 2 |
| 15% | #00B050 | 2,5 |
| 20% | #FFC000 | 3 |
| 25% | #4630A0 | 3,5 |
Сега ајде да го измениме вториот атрибут на секоја линија и да го замениме 1px со следниов дел од текстот:
граница-ширина:~%WhatToEnter [{dataset:'Dataset with discounts',column:'Border width'}]Потоа го повторувам за сите три ќелии од вториот ред и го добивам следниот HTML во резултатот:
Откако овој шаблон ќе се зачува и залепи, ќе се појават проширени сини граници во е-пошта:
Променете го стилот на границите во табела
Во овој погл apter Би сакал да го свртам вашето внимание на друг параметар - стил. Овој ќе се справи со изгледот на границите. Пред да ви покажам како правилно да го примените, ќе треба да се вратам на мојата база на податоци и да ја менувам во согласност со мојот моментален случај.
| Попуст | Границастил |
| 10% | испрекинат |
| 15% | двојно |
| 20% | Тичка |
| 25% | Риџ |
Ја поврзав секоја дисконтна стапка со стил на граница и ја зачував оваа база на податоци за во иднина. Макрото за враќање на стилот за мојот HTML би било долу:
~%WhatToEnter[{dataset:"Dataset with discounts",column:"Border style"}]Сега ќе треба да го ажурирам атрибутите на вториот ред со замена на solid (стандардниот стил што го користев цело време) со макрото погоре за да го добиете следново парче код:
data-set-style="border: 1px #aeabab; border-style: ~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border style'}]Еве го конечниот HTML:
Ако го копирате овој HTML и залепите на вашите шаблони, резултатот нема да ве остави да чекате:
Поставете условно форматирање за истовремено менување на истакнувањето, бојата на текстот и ширината на границите
Достигнавме најголем интерес тинг дел бидејќи ќе ви покажам како да примените повеќе модификации истовремено. Прво, ќе ја ажурирам базата на податоци од која ќе ги преземам податоците.Бидејќи решив да го сменам означувањето на ќелиите, бојата на текстот и ширината на границите, сите тие параметри треба да се специфицираат. Оттука, мојата нова база на податоци би изгледала вака:
| Попуст | Шифра на боја | Код на заднина | Ширина на граница |
| 10% | #00B0F0 | #DEEBF6 | 2 |
| 15 % | #00B050 | #E2EFD9 | 2,5 |
| 20% | #FFC000 | 10>#FFF2CC | 3 |
| 25% | #4630A0 | #FBE5D5 | 3,5 |
Значи, ако изберам 10%, потребниот текст ќе биде обоен во сино (# 00B0F0 ), позадината на избраните ќелии ќе биде засенчена во светло синиот тон (# DEEBF6 ) и нивните граници ќе се прошират двапати.
Но, како оваа база на податоци може да се поврзе со табела на Outlook за да се форматира? Ве подготвував за оваа задача во 2 статии :) Еве го HTML кој ќе се справи со сите потребни модификации:
Сега да ги погледнеме сите применети модификации:
- Примерок заглавје 1 - ова парче ќе го обои текстот на заглавието во боја од колоната „Код на боја“. Во случај да чувствуватекако што треба да ја освежите меморијата на сликата на текстот, погледнете во поглавјето Промени ја бојата на фонтот на текстот во табелата од мојот претходен туторијал.
- data-set-style="background-color:~%WhatToEnter[ {dataset:'Dataset with discounts',column:'Background code',title:'Select discount'}] - овој дел ја ажурира бојата на заднината, земајќи го нејзиниот код од колоната Позадински код од сетот на податоци. Слободно погледнете го туторијалот Нагласете ги ќелиите ако сметате дека ви треба подетален опис на овој случај.
- data-set-style="border: solid #aeabab; border-width:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border width'}] – со оваа HTML линија ширината на границите ќе се смени на онаа наведена во Ширината на границата Го опфатив претходно, може да погледнете во случај да сте пропуштиле нешто.
Кога ќе залепам шаблон со додадени тие атрибути, резултатот нема да ме остави да чекам:
Има мала забелешка што би сакал да направам пред да ја затворам оваа тема. Додека го тестирав боењето на границите во табелите, се соочив со прилично двосмислено однесување на границите и во онлајн и во десктоп верзиите на Outlook. Бидејќи бев малку збунет, стигнав до нашите програмери за појаснување. Тие открија дека различни клиенти на Outlook ги прикажуваат табелите на различни начини и причината за таквото однесување е грешка во Outlook.
Нашиот тим го пријави овој проблем на
