Мазмұны
Осы мақалада Outlook бағдарламасындағы кесте шекараларына шартты пішімдеуді қалай қолдану керектігін көресіз. Мен сізге олардың түсін, енін және стилін қалай өзгерту керектігін көрсетемін. Содан кейін мен сізге бір уақытта бірнеше өзгертулер енгізуді және Outlook кестесін әртүрлі тәсілдермен бояуды үйретемін.
Біріншіден, мен осы блогқа жаңадан келгендер үшін шағын ескерту жасағым келеді. Бүгін біз үлгілердегі шартты пішімдеу туралы айтатын боламыз, мен Outlook бағдарламасына арналған Ортақ электрондық пошта үлгілері қондырмасын пайдаланып оларды қалай дұрыс орнату керектігін көрсетемін. Бұл құрал алдын ала сақталған тамаша пішімделген үлгілерді электрондық пошталарға қоюға және хат алмасу тәртібін бірнеше рет басу арқылы қысқартуға көмектеседі.
Егер сіз Outlook кестелері оқулығындағы менің Шартты пішімдеу туралы оқылған болсаңыз, сіз білесіз. ұяшықтардың мазмұны мен өң түсін өзгерту жолы. Дегенмен, бұл Outlook кестесін жарықтандыру үшін жасай алатын барлық нәрсе емес. Бүгін мен сізге кестенің жиектерін шартты түрде бояу және олардың ені мен стилін өзгерту жолдарын көрсетемін.
Сонымен қатар, соңғы тарауда шағын бонус күтіп тұр, онда мен бірнеше өзгертулерді қалай қолдану керектігін көрсетемін. сол уақытта және үстеліңізді 4 шілдедегі отшашу сияқты түрлі-түсті және жарқын етіңіз ;)
Ұяшық жиектерінің түсін өзгертіңіз
Шектердің қалай жұмыс істейтінін көрсету үшін, Мен өткен аптадағы оқулықтағы бірдей үлгілерді қолданамын. Жағдай келесідей: Мен a қоямынMicrosoft командасы, олардың жауаптарын осы GitHub әңгімесінен қараңыз :)
Қорытынды ескертпе
Мен сізді Outlook бағдарламасындағы кесте қарапайым қара жиектер емес екеніне сендіре алдым деп үміттенемін. мәтін. Жақсарту және шығармашылық үшін көп орын бар :)
Сіз сурет салу бойынша бірнеше тәжірибе жасауды шешсеңіз, Microsoft дүкенінен ортақ электрондық пошта үлгілерін орнатып, ләззат алыңыз!
Егер бар болса. Қалған сұрақтарыңызға Outlook кестелерінде шартты пішімдеу бойынша көмек қажет, Пікірлер бөлімінде бірнеше сөз қалдырсаңыз болғаны, біз оны анықтаймыз ;)
шаблонды таңдап, кестені толтыру үшін жеңілдік мөлшерлемесін таңдаңыз. Менің таңдауыма байланысты ұяшық жиектері белгілі бір түсте боялады.Мен бүгін бояйтын кесте төмендегі кесте болады:
| Үлгі тақырыбы 1 | Үлгі тақырыбы 2 | Үлгі тақырыбы 3 |
| ~%WhatToEnter[ {деректер жинағы:'Жеңілдіктер бар деректер жинағы', баған:' Discount', title:'Select discount'} ] дисконт |
Шартты пішімдеу үлгілердің HTML-де өңделгендіктен, алдымен осы кестенің HTML кодын ашыңыз:
- Қызықты шаблонды ашыңыз және Өңдеу түймесін басыңыз:
- Үлгі құралдар тақтасындағы HTML белгішесін ( ) көру:
- Бірнеше рет өзгертілетін бастапқы HTML-ді қараңыз:
Түстер және олардың жеңілдік мөлшерлемелерімен байланысы туралы қызықтыратын болсаңыз, мен сізге кеңес беремін :) Деректер жинағы! Оның не екенін білмейсіз бе? Содан кейін кішкене үзіліс жасап, алдымен менің толтырылатын Outlook үлгілері туралы оқулықты оқып шығыңыз.
Міне, мен басында қолданатын және бірнеше тарауда аздап жақсартатын түпнұсқа деректер жинағы:
| Жеңілдік | Түс коды |
| 10% | #00B0F0 |
| 15 % | #00B050 |
| 20% | #FFC000 |
| 25% | #4630A0 |
Осы кестеден қажетті түс кодын алу қажет болғанда, мен келесі макросты қолданамын:
~%WhatToEnter[{dataset:'Dataset with discounts',column:'Color code'}]Бізде барлық негізгі мәліметтер бар болғандықтан, түстерді өзгертуді бастайық :)
Бір түстің жиек түсін жаңартыңыз ұяшық
Кестедегі бір ұяшықтың шекараларын бояу үшін алдымен үлгінің 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:'Жеңілдіктер бар деректер жинағы',баған:'Жеңілдік',title:'Жеңілдікті таңдау'}] жеңілдік<қараңыз. 1>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-ді аламын:
Осы үлгі сақталған және қойылған соң, кеңейтілген көк жиектер электрондық поштада пайда болады:
Кестедегі жиектер мәнерін өзгерту
Осы тарауда Мен сіздің назарыңызды басқа параметрге аударғым келеді - стиль. Бұл шекаралардың көрінісін өңдейді. Оны қалай дұрыс қолдану керектігін көрсетпес бұрын, мен деректер жинағыма оралып, оны ағымдағы жағдайға сәйкес өзгертуім керек.
| Жеңілдік | Шекарастиль |
| 10% | Үзілген |
| 15% | Қос |
| 20% | Нүктелі |
| 25% | Жота |
Мен әрбір жеңілдік мөлшерлемесін жиек мәнерімен байланыстырып, бұл деректер жинағын болашаққа сақтап қойдым. Менің HTML үшін мәнерді шығарып алу үшін макрос төмендегідей болады:
~%WhatToEnter[{dataset:"Жеңілдіктер бар деректер жинағы",баған:"Шекара стилі"}]Енді мен келесі код бөлігін алу үшін қатты мәнді (мен бұрыннан қолданып жүрген әдепкі мәнерді) жоғарыдағы макроспен ауыстыру арқылы екінші жолдың атрибуттарын таңдаңыз:
data-set-style="border: 1px #aeabab; border-style: ~%WhatToEnter[{dataset:'Жеңілдіктер бар деректер жинағы',баған:'Шекара стилі'}]Міне, соңғы HTML:
Егер сіз осы HTML-ді көшіріп, қойыңыз үлгілеріңізге сәйкес нәтиже сізді күтпейді:
Бөлектеуді, мәтін түсін және жиектер енін бір уақытта өзгерту үшін шартты пішімдеуді орнатыңыз
Біз ең көп қызығушылыққа жеттік Мен сізге бір уақытта бірнеше өзгертулерді қалай қолдану керектігін көрсеткім келеді. Біріншіден, мен деректерді алатын деректер жинағын жаңартамын.Мен ұяшықтарды бөлектеуді, мәтін түсін және жиектер енін өзгертуді шешкендіктен, барлық осы параметрлерді көрсету керек. Демек, менің жаңа деректер жинағы келесідей болады:
| Жеңілдік | Түс коды | Фон коды | Шекара ені |
| 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[" {деректер жинағы:'Жеңілдіктер бар деректер жинағы',баған:'Фондық код',атауы:'Жеңілдікті таңдау'}] - бұл бөлік деректер жиынының Фондық код бағанынан кодты алып, фондық түсті жаңартады. Егер сізге бұл жағдайдың егжей-тегжейлі сипаттамасы қажет деп ойласаңыз, ұяшықтарды бөлектеу оқулығын қарап шығыңыз.
- data-set-style="border: solid #aeabab; border-width:~%WhatToEnter[{dataset:'Жеңілдіктер бар деректер жинағы',баған:'Шекараның ені'}] – осы HTML жолының жиектерінің ені Шекара ені ішінде көрсетілгенге өзгертіледі. Мен мұны бұрын қарастырдым, бірдеңені жіберіп алған болсаңыз, қарап шығуыңыз мүмкін.
Сол атрибуттары қосылған үлгіні қойғанда, нәтиже мені күтпейді:
Осы тақырыпты жаппас бұрын бір шағын ескертпе айтқым келеді. Мен кестелердегі жиектерді бояуды сынау кезінде мен Outlook бағдарламасының онлайн және жұмыс үстелі нұсқаларында шекаралардың анық емес әрекетіне тап болдым. Сәл шатастырып, мен әзірлеушілерге түсініктеме алу үшін хабарластым. Олар әртүрлі Outlook клиенттері кестелерді әртүрлі тәсілдермен көрсететінін және мұндай әрекеттің себебі Outlook бағдарламасындағы қате екенін анықтады.
Біздің команда бұл мәселені келесіге хабарлады.
