Змест
У гэтым артыкуле вы ўбачыце, як прымяніць умоўнае фарматаванне да межаў табліцы ў Outlook. Я пакажу вам, як змяніць іх колер, шырыню і стыль. Затым я навучу вас, як уносіць некалькі змяненняў адначасова і размалёўваць табліцу Outlook рознымі спосабамі.
Па-першае, я хацеў бы зрабіць невялікую заўвагу для пачаткоўцаў гэтага блога. Паколькі сёння мы пагаворым пра ўмоўнае фарматаванне ў шаблонах, я пакажу вам, як іх правільна наладзіць з дапамогай нашай надбудовы Shared Email Templates для Outlook. Гэты інструмент можа дапамагчы вам уставіць папярэдне захаваныя ідэальна адфарматаваныя шаблоны ў электронныя лісты і скараціць вашу руціну перапіскі ў некалькі клікаў.
Калі вы ўжо прачыталі мой падручнік па ўмоўным фарматаванні ў табліцах Outlook, вы ведаеце як змяніць змест вочак і колер фону. Аднак гэта не ўсё, што вы можаце зрабіць, каб асвятліць табліцу Outlook. Сёння я пакажу вам спосабы ўмоўнага афарбоўвання межаў вашай табліцы і змены іх шырыні і стылю.
Больш за тое, невялікі бонус чакае вас у апошнім раздзеле, дзе я пакажу вам, як прымяніць некалькі мадыфікацый у той жа час і зрабіце свой стол такім жа маляўнічым і яркім, як феерверк 4 ліпеня ;)
Змяніце колер межаў клетак
Каб паказаць вам, як працуе малюнак межаў, Я буду выкарыстоўваць тыя ж узоры з падручніка на мінулым тыдні. Справа наступная: я ўстаўляю аКаманда Microsoft, не саромейцеся праверыць іх адказ у гэтай размове на GitHub :)
Заключная заўвага
Я вельмі спадзяюся, што мне ўдалося пераканаць вас, што табліца ў Outlook - гэта не проста чорныя рамкі з простымі тэкст. Ёсць шмат месца для ўдасканалення і творчасці :)
Калі вы вырашыце правесці некалькі ўласных эксперыментаў па маляванні, проста ўсталюйце агульныя шаблоны электроннай пошты з Microsoft Store і атрымлівайце асалоду!
Калі ёсць па любых пытаннях, якія засталіся ў вас, патрэбна дапамога з умоўным фарматаваннем у табліцах Outlook, проста пакіньце некалькі слоў у раздзеле каментарыяў, і мы разбярэмся ;)
шаблон і абярыце стаўку дыскантавання для запаўнення табліцы. У залежнасці ад майго выбару, межы ячэйкі будуць афарбаваны ў пэўны колер.Табліца, якую я буду размалёўваць сёння, будзе прыведзенай ніжэй:
| Узор загалоўка 1 | Узор загалоўка 2 | Узор загалоўка 3 |
| ~%WhatToEnter[ {dataset:'Dataset with discounts', column:' Discount', title:'Select discount'} ] discount |
Паколькі ўмоўнае фарматаванне апрацоўваецца ў HTML шаблонаў, давайце спачатку адкрыйце HTML-код гэтай табліцы:
- Адкрыйце цікавы шаблон і націсніце Праўка :
- Знайдзіце Праглядзець значок HTML ( ) на панэлі інструментаў шаблону:
- Праглядзець арыгінальны HTML, які будзе некалькі разоў зменены:
Калі вас цікавяць колеры і іх сувязь са стаўкамі дыскантавання, я дам вам падказку :) Набор дадзеных! Паняцця не маеце, што гэта такое? Затым зрабіце невялікую паўзу і спачатку прачытайце мой падручнік па запаўняемых шаблонах Outlook.
Вось арыгінальны набор даных, які я буду выкарыстоўваць у пачатку і крыху палепшыць у некалькіх раздзелах:
| Зніжка | Каляровы код |
| 10% | #00B0F0 |
| 15 % | #00B050 |
| 20% | #FFC000 |
| 25% | #4630A0 |
Калі мне трэба атрымаць неабходны код колеру з гэтай табліцы, я буду выкарыстоўваць наступны макрас:
~%WhatToEnter[{dataset:'Dataset with discounts',column:'Color code'}]Паколькі мы разгледзелі ўсе асновы, давайце пачнем мяняць колеры :)
Абнавіце колер рамкі аднаго cell
Каб афарбаваць межы адной ячэйкі ў табліцы, давайце спачатку знойдзем яе радок у HTML шаблону і ўважліва паглядзім на яе кампаненты:
- “ style= ” прадстаўляе набор асноўных параметраў ячэйкі.
- “шырыня: 32%; межа: 1 пікс суцэльны #aeabab » — гэта шырыня, колер і стыль ячэйкі і рамкі.
- «~%WhatToEnter[] зніжка» гэта змест ячэйкі.
Гэты радок кода азначае, што я ўбачу ячэйку з шэрымі рамкамі памерам 1 пікс суцэльнага стылю. Калі я замяню любы з гэтых параметраў, гэта можа сапсаваць знешні выгляд табліцы ў маім шаблоне, г.зн. межы будуць нябачнымі (хаця пасля ўстаўкі ўсё будзе выглядаць ідэальна).
Я хацеў бы мець стандартны табліцу ў шаблоне і змяніць яе пры ўстаўцы. Такім чынам, я дадаю адзін новы атрыбут з параметрамі, якія заменяць зыходныя пры ўстаўцы:
Давайце разгледзім радок HTML вышэй:
- “ style="border : 1px solid #aeabab;" гэта першы атрыбут. Гэта арыгінал клеткіхарактарыстыкі.
- “ data-set-style= ” - гэта спецыяльны параметр, які дапаможа мне замяніць атрыбут вышэй неабходным наборам уласцівасцей падчас устаўкі.
- “ border:1px суцэльны; border-color: » - гэта частка другога атрыбуту, дзе мы зробім паўзу. Глядзіце, пачатак ідэнтычны арыгіналу, тая ж шырыня рамкі і стыль. Аднак калі гаворка ідзе пра колер (параметр, які я хачу змяніць), я замяняю яго на border-color: і ўстаўляю макрас WhatToEnter. Такім чынам, у залежнасці ад выбару выпадальнага меню, макрас будзе заменены кодам колеру, а рамка будзе перафарбавана.
- “~%WhatToEnter[] зніжка” па-ранейшаму з'яўляецца змесцівам ячэйкі, якое не патрабуе ніякіх зменаў.
Такім чынам, поўны HTML з ячэйкай будучага колеру будзе выглядаць так:
Калі вы ўстаўляеце гэты шаблон , мяжа абноўленай ячэйкі адразу афарбуецца ў абраны колер:
Зафарбуйце межы ўсяго радка
Цяпер давайце зафарбуем межы на увесь радок нашай узорнай табліцы і паглядзіце, як гэта працуе. Логіка абсалютна тая ж, што і ўабзаца вышэй, за выключэннем таго, што вам трэба будзе абнавіць усе вочкі другога радка. Пасля таго, як тыя ж мадыфікацыі, пра якія я распавядаў вышэй, прымяняюцца да ўсяго радка, пры ўстаўцы шаблона ён падміргвае.
Калі вы хочаце зірнуць на гатовы HTML з афарбоўкай другога радка, вось ён:
Змяніць шырыню мяжы
Цяпер паспрабуем абнавіць не толькі колер мяжы, але і яе шырыню. Паглядзіце яшчэ раз на атрыбут HTML, які замяняе зыходны пры ўстаўцы:
data-set-style="border: 1px solid; border-color:~%WhatToEnter[{dataset:' Набор даных са зніжкамі',column:'Color code'}]">~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title:'Select discount'}] discountГлядзіце <Параметр 1>1px ? Гэта шырыня межаў, якія трэба афарбаваць. Вы можаце ўручную змяніць яго, скажам, на 2, і калі вы яго ўставіце, межы табліцы стануць шырэйшымі.
Аднак я зраблю гэта іншым спосабам. Я абнаўлю свой набор даных і дадам новы слупок з шырынёй межаў. У гэтым выпадку, як толькі я выберу цяперашнюю стаўку для ўстаўкі, будуць і колер, і шырыняабноўлена.
| Зніжка | Код колеру | Шырыня мяжы |
| 10% | #00B0F0 | 2 |
| 15% | #00B050 | 2,5 |
| 20% | #FFC000 | 3 |
| 25% | #4630A0 | 3.5 |
Цяпер давайце зменім другі атрыбут кожнага радка і заменім 1px наступным фрагментам тэксту:
border-width:~%WhatToEnter [{dataset:'Dataset with discounts',column:'Border width'}]Потым я паўтараю гэта для ўсіх трох вочак другога радка і атрымліваю наступны HTML у выніку:
Як толькі гэты шаблон будзе захаваны і ўстаўлены, пашыраныя сінія рамкі з'явяцца ў электронным лісце:
Змяніць стыль межаў у табліцы
У гэтым гл Хацелася б звярнуць вашу ўвагу на яшчэ адзін параметр - стыль. Гэта будзе апрацоўваць знешні выгляд межаў. Перш чым я пакажу вам, як гэта правільна прымяніць, мне трэба будзе вярнуцца да майго набору даных і змяніць яго ў адпаведнасці з маім бягучым выпадкам.
| Зніжка | Мяжастыль |
| 10% | пункцір |
| 15% | падвойны |
| 20% | Пункцір |
| 25% | Рыдж |
Я звязаў кожную стаўку дыскантавання са стылем рамкі і захаваў гэты набор даных на будучыню. Макрас для атрымання стылю майго HTML будзе наступным:
~%WhatToEnter[{dataset:"Dataset with discounts",column:"Border style"}]Цяпер мне трэба абнавіць атрыбуты другога радка, замяніўшы цвёрды (стыль па змаўчанні, які я ўвесь час выкарыстоўваў) макрасам вышэй, каб атрымаць наступны фрагмент кода:
data-set-style="border: 1px #aeabab; border-style: ~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border style'}]Вось канчатковы HTML:
Калі вы скапіруеце гэты HTML і ўставіце да вашых шаблонаў, вынік не прымусіць вас чакаць:
Наладзьце ўмоўнае фарматаванне, каб адначасова змяніць вылучэнне, колер тэксту і шырыню межаў
Мы дасягнулі найбольшай цікавасці ting частка, як я збіраюся паказаць вам, як прымяняць некалькі мадыфікацый адначасова. Па-першае, я абнаўлю набор даных, з якіх я буду здабываць даныя.Так як я вырашыў змяніць падсвятленне вочак, колер тэксту і шырыню межаў, усе гэтыя параметры трэба ўказаць. Такім чынам, мой новы набор даных будзе выглядаць так:
| Зніжка | Колер колеру | Код фону | Шырыня мяжы |
| 10% | #00B0F0 | #DEEBF6 | 2 |
| 15 % | #00B050 | #E2EFD9 | 2,5 |
| 20% | #FFC000 | #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'}] - гэтая частка абнаўляе фонавы колер, прымаючы яго код са слупка Background code набору даных. Не саромейцеся зірнуць на падручнік па вылучэнні ячэек, калі вам патрэбна больш падрабязнае апісанне гэтага выпадку.
- data-set-style="border: solid #aeabab; border-width:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border width'}] – у гэтым радку HTML шырыня межаў будзе зменена на тую, што вызначана ў Шырыня мяжы Я ўжо апісваў гэта раней, вы можаце паглядзець, калі вы нешта прапусцілі.
Калі я ўстаўляю шаблон з дададзенымі гэтымі атрыбутамі, вынік не прымусіць мяне чакаць:
Перад закрыццём гэтай тэмы я хацеў бы зрабіць невялікую заўвагу. Пакуль я тэставаў афарбоўку межаў у табліцах, я сутыкнуўся з даволі неадназначнымі паводзінамі межаў як у інтэрнэт-версіі Outlook, так і ў настольнай. Будучы крыху разгубленым, я звярнуўся да нашых распрацоўшчыкаў па тлумачэнні. Яны выявілі, што розныя кліенты Outlook адлюстроўваюць табліцы па-рознаму, і прычынай такіх паводзін з'яўляецца памылка ў Outlook.
Наша каманда паведаміла аб гэтай праблеме
