सामग्री सारणी
या लेखात तुम्ही Outlook मधील टेबलच्या सीमांवर सशर्त स्वरूपन कसे लागू करायचे ते पाहू शकाल. त्यांचा रंग, रुंदी आणि शैली कशी बदलायची ते मी तुम्हाला दाखवतो. मग मी तुम्हाला एकाच वेळी अनेक बदल कसे करायचे आणि तुमचे Outlook टेबल वेगवेगळ्या प्रकारे कसे रंगवायचे ते शिकवेन.
सर्वप्रथम, मी या ब्लॉगच्या नवोदितांसाठी एक लहानशी हेडनोट करू इच्छितो. आज आम्ही टेम्प्लेट्समधील कंडिशनल फॉरमॅटिंगबद्दल बोलू, मी तुम्हाला आउटलुकसाठी आमचे शेअर केलेले ईमेल टेम्प्लेट्स अॅड-इन वापरून ते योग्यरित्या कसे सेट करायचे ते दाखवीन. हे साधन तुम्हाला तुमच्या ईमेलमध्ये पूर्व-जतन केलेले उत्तम प्रकारे स्वरूपित टेम्पलेट्स पेस्ट करण्यात मदत करू शकते आणि तुमचा पत्रव्यवहार नित्यक्रम काही क्लिकमध्ये कमी करण्यात मदत करू शकते.
तुम्ही आउटलुक टेबल ट्यूटोरियलमध्ये माझे कंडिशनल फॉरमॅटिंग आधीच वाचले असेल, तर तुम्हाला माहिती आहे. सेलची सामग्री आणि पार्श्वभूमीचा रंग कसा बदलायचा. तथापि, तुमची Outlook टेबल उजळ करण्यासाठी तुम्ही जे काही करू शकता तेच नाही. आज मी तुम्हाला तुमच्या टेबलच्या बॉर्डरला सशर्त रंग देण्याचे आणि त्यांची रुंदी आणि शैली सुधारण्याचे मार्ग दाखवणार आहे.
शिवाय, शेवटच्या अध्यायात एक छोटासा बोनस तुमची वाट पाहत आहे जिथे मी तुम्हाला अनेक बदल कसे लागू करायचे ते दाखवेन. त्याच वेळी आणि तुमचे टेबल 4 जुलै रोजी फटाक्यांसारखे रंगीबेरंगी आणि चमकदार बनवा ;)
सेल्सच्या बॉर्डरचा रंग बदला
बॉर्डर्सची पेंटिंग कशी कार्य करते हे दाखवण्यासाठी, मी मागील आठवड्याच्या ट्यूटोरियलमधील तेच नमुने वापरेन. केस खालीलप्रमाणे आहे: मी पेस्ट करा अमायक्रोसॉफ्ट टीम, या गिटहब संभाषणात त्यांचा प्रतिसाद मोकळ्या मनाने पहा :)
अंतिम टीप
मला खरोखर आशा आहे की आउटलुक मधील टेबल फक्त काळ्या किनारी नाही मजकूर सुधारणेसाठी आणि सर्जनशीलतेसाठी भरपूर वाव आहे :)
जेव्हा तुम्ही स्वतःचे काही चित्रकलेचे प्रयोग करण्याचे ठरवले, तेव्हा फक्त Microsoft Store वरून शेअर केलेले ईमेल टेम्पलेट्स स्थापित करा आणि आनंद घ्या!
असल्यास तुमच्यापैकी कोणतेही प्रश्न सोडल्यास आउटलुक सारण्यांमध्ये कंडिशनल फॉरमॅटिंगसाठी काही मदत हवी आहे, फक्त टिप्पण्या विभागात काही शब्द टाका आणि आम्ही ते शोधून काढू ;)
टेम्प्लेट आणि टेबल भरण्यासाठी सवलत दर निवडा. माझ्या आवडीनुसार, सेलच्या सीमा विशिष्ट रंगात रंगल्या जातील.मी आज ज्या टेबलला रंग देत आहे ते खालील असेल:
नमुना शीर्षलेख 1 | नमुना शीर्षलेख 2 | नमुना शीर्षलेख 3 |
~%WhatToEnter[ {dataset:'Dataset with discounts', column:' सवलत', शीर्षक:'सवलत निवडा'} ] सूट |
जसे सशर्त स्वरूपन टेम्पलेट्सच्या HTML मध्ये हाताळले जाते, चला प्रथम या सारणीचा HTML कोड उघडा:
- स्वास्थ्याचा टेम्पलेट उघडा आणि संपादित करा :
- <1 शोधा दाबा>टेम्प्लेटच्या टूलबारवर HTML चिन्ह पहा ( ) 21>
तुम्हाला रंग आणि त्यांच्या सवलतीच्या दरांबद्दल आश्चर्य वाटत असल्यास, मी तुम्हाला एक इशारा देईन :) डेटासेट! ते काय आहे याची कल्पना नाही? नंतर थोडा विराम घ्या आणि प्रथम माझे भरण्यायोग्य आउटलुक टेम्प्लेट्स ट्यूटोरियल वाचा.
हा मूळ डेटासेट आहे जो मी सुरुवातीला वापरेन आणि काही प्रकरणांमध्ये थोडे सुधारेल:
सवलत | रंग कोड |
10% | #00B0F0 |
15 % | #00B050 |
20% | #FFC000 |
25% | #4630A0 |
जेव्हा मला या टेबलमधून आवश्यक रंग कोड पुनर्प्राप्त करायचा असेल, तेव्हा मी खालील मॅक्रो वापरेन:
~%WhatToEnter[{dataset:'Dataset with discounts',column:'color code'}]आम्ही सर्व मूलभूत गोष्टी कव्हर केल्या आहेत, चला रंग बदलण्यास सुरुवात करूया :)
एकाच्या बॉर्डरचा रंग अपडेट करूया सेल
टेबलमधील एका सेलच्या बॉर्डरला रंग देण्यासाठी, आधी टेम्प्लेटच्या एचटीएमएलमध्ये त्याची रेषा शोधू या आणि त्याचे घटक जवळून पाहू:
- “ style= ” सेलच्या मूलभूत पॅरामीटर्सचा संच दर्शवतो.
- “रुंदी: 32%; बॉर्डर: 1px सॉलिड #aeabab ” सेलची आणि बॉर्डरची रुंदी, रंग आणि शैली आहेत.
- “~%WhatToEnter[] सूट” हे सेलची सामग्री आहे.
या कोड लाइनचा अर्थ असा आहे की मला घन शैलीच्या 1px राखाडी किनारी असलेला सेल दिसेल. मी यापैकी कोणतेही पॅरामीटर्स बदलल्यास, ते माझ्या टेम्प्लेटमधील टेबलचे स्वरूप खराब करू शकते, म्हणजे सीमा अदृश्य होतील (जरी पेस्ट केल्यानंतर सर्वकाही उत्तम प्रकारे दिसेल).
मला एक मानक असणे आवडेल. टेम्प्लेटमध्ये टेबल आणि पेस्ट करताना त्यात बदल करा. म्हणून, मी पॅरामीटर्ससह एक नवीन विशेषता जोडतो जी पेस्ट करताना मूळची जागा घेईल:
वरील HTML ओळ तपासूया:
- “ style="border : 1px solid #aeabab;" पहिला गुणधर्म आहे. ते सेलचे मूळ आहेतवैशिष्ट्ये.
- “ डेटा-सेट-शैली= ” हे एक विशेष पॅरामीटर आहे जे मला पेस्ट करताना गुणधर्मांच्या आवश्यक संचासह वरील विशेषता बदलण्यास मदत करेल.
- “ सीमा:1px घन; बॉर्डर-रंग: ” हा दुसऱ्या विशेषताचा भाग आहे जिथे आपण विराम घेऊ. पहा, सुरुवात मूळ सारखीच आहे, समान सीमा रुंदी आणि शैली आहे. तथापि, जेव्हा रंग येतो (मला बदलायचे असलेले पॅरामीटर), मी ते बॉर्डर-रंग: ने बदलतो आणि WhatToEnter मॅक्रो पेस्ट करतो. म्हणून, ड्रॉपडाउन निवडीवर अवलंबून, मॅक्रो रंग कोडसह बदलला जाईल आणि सीमा पुन्हा रंगविली जाईल.
- “~%WhatToEnter[] सूट” अजूनही सेलची सामग्री आहे कोणत्याही बदलांची आवश्यकता नाही.
म्हणून, भविष्यातील रंगीत सेलसह संपूर्ण HTML असे दिसेल:
जेव्हा तुम्ही हा टेम्पलेट पेस्ट करता , अपडेट केलेल्या सेलची बॉर्डर लगेचच निवडलेल्या रंगात रंगवली जाईल:
संपूर्ण पंक्तीच्या बॉर्डर रंगवा
आता बॉर्डर पेंट करूया आमच्या नमुना सारणीची संपूर्ण पंक्ती आणि ते कसे कार्य करते ते पहा. तर्कशास्त्र पूर्णपणे सारखेच आहेवरील परिच्छेद वगळता तुम्हाला दुसऱ्या पंक्तीचे सर्व सेल अपडेट करावे लागतील. एकदा मी वर दिलेले तेच बदल संपूर्ण पंक्तीवर लागू केले की, टेम्पलेट पेस्ट करताना ते डोळे मिचकावून रंगते.
तुम्हाला पहायचे असल्यास दुसऱ्या पंक्तीच्या रंगासह तयार HTML, ते येथे आहे:
बॉर्डरची रुंदी बदला
आता फक्त बॉर्डरचा रंगच नाही तर त्याची रुंदी देखील अपडेट करण्याचा प्रयत्न करूया. पेस्ट करताना मूळ गुणाऐवजी HTML विशेषता पहा:
data-set-style="border: 1px solid; border-color:~%WhatToEnter[{dataset:' सवलतींसह डेटासेट',स्तंभ:'रंग कोड'}]">~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title:'Select discount'}] सूटपहा 1px पॅरामीटर? ही बॉर्डरची रंगीत रुंदी आहे. तुम्ही ते व्यक्तिचलितपणे बदलू शकता, म्हणा, 2 आणि तुम्ही ते पेस्ट केल्यावर टेबलच्या सीमा अधिक रुंद होतील.
तथापि, मी ते दुसर्या मार्गाने करेन. मी माझा डेटासेट अपडेट करेन आणि सीमांच्या रुंदीसह एक नवीन स्तंभ जोडेन. या प्रकरणात, मी पेस्ट करण्यासाठी वर्तमान दर निवडल्यानंतर, रंग आणि रुंदी दोन्ही असेलअपडेट केले.
सवलत | रंग कोड | सीमा रुंदी |
10%<11 | #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"}]आता मला अपडेट करावे लागेल खालील कोडचा तुकडा मिळविण्यासाठी सॉलिड (मी वापरत असलेली डीफॉल्ट शैली) वरील मॅक्रोसह बदलून दुसऱ्या पंक्तीचे गुणधर्म:
data-set-style="border: 1px #aeabab; सीमा शैली: ~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border style'}]येथे अंतिम HTML आहे:
तुम्ही हे HTML कॉपी करून पेस्ट केल्यास तुमच्या टेम्पलेट्सवर, परिणाम तुम्हाला वाट पाहत राहणार नाही:
हायलाइटिंग, मजकूर रंग आणि सीमांची रुंदी एकाच वेळी बदलण्यासाठी सशर्त स्वरूपन सेट करा
आम्ही सर्वाधिक स्वारस्यांपर्यंत पोहोचलो आहोत मी तुम्हाला एका वेळी अनेक बदल कसे लागू करायचे ते दाखवणार आहे. प्रथम, मी डेटासेट अपडेट करेन ज्यावरून मी डेटा पुनर्प्राप्त करणार आहे.मी सेलचे हायलाइटिंग, मजकूर रंग आणि सीमांची रुंदी बदलण्याचे ठरवले असल्याने, ते सर्व पॅरामीटर्स निर्दिष्ट करणे आवश्यक आहे. त्यामुळे, माझा नवीन डेटासेट असा दिसेल:
सवलत | रंग कोड | पार्श्वभूमी कोड | सीमा रुंदी |
10% | #00B0F0 | #DEEBF6 | 2 |
15 % | #00B050 | #E2EFD9 | 2.5 |
20% | #FFC000 | #FFF2CC | 3 |
25% | #4630A0 | #FBE5D5 | 3.5<11 |
म्हणून, मी 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; बॉर्डर-रुंदी:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border width'}] – या HTML रेषेसह बॉर्डरची रुंदी बॉर्डर रुंदी मध्ये निर्दिष्ट केलेल्या प्रमाणे बदलली जाईल. मी ते आधी कव्हर केले आहे, तुमचे काही चुकले असेल तर ते पहा.
जेव्हा मी त्या गुणधर्मांसह टेम्पलेट पेस्ट करतो, तेव्हा परिणाम मला प्रतीक्षा करत नाही:
हा विषय बंद करण्यापूर्वी मला एक छोटीशी नोंद करायची आहे. मी टेबल्समध्ये बॉर्डर कलरिंगची चाचणी करत असताना मला Outlook च्या ऑनलाइन आणि डेस्कटॉप दोन्ही आवृत्त्यांमध्ये बॉर्डरच्या अस्पष्ट वर्तनाचा सामना करावा लागला. थोडासा गोंधळ झाल्यामुळे, मी स्पष्टीकरणासाठी आमच्या विकसकांपर्यंत पोहोचलो. त्यांना आढळून आले की भिन्न Outlook क्लायंट वेगवेगळ्या प्रकारे टेबल्स रेंडर करतात आणि अशा वर्तनाचे कारण Outlook मधील एक बग आहे.
आमच्या टीमने ही समस्या नोंदवली