यस लेखमा तपाईंले Outlook मा तालिकाको सीमानाहरूमा सशर्त ढाँचा कसरी लागू गर्ने भनेर देख्नुहुनेछ। तिनीहरूको रंग, चौडाइ र शैली कसरी परिवर्तन गर्ने भनेर म तपाईंलाई देखाउनेछु। त्यसोभए म तपाईंलाई सिकाउनेछु कि कसरी एक पटकमा धेरै परिमार्जनहरू गर्ने र तपाईंको आउटलुक तालिकालाई धेरै फरक तरिकामा रङ गर्ने।

सबैभन्दा पहिले, म यो ब्लगका नयाँ आउनेहरूका लागि एउटा सानो हेडनोट बनाउन चाहन्छु। आज हामी टेम्प्लेटहरूमा सशर्त ढाँचाको बारेमा कुरा गर्नेछौं, म तपाईंलाई Outlook को लागि हाम्रो साझा इमेल टेम्प्लेटहरू एड-इन प्रयोग गरेर तिनीहरूलाई कसरी सही रूपमा सेट अप गर्ने भनेर देखाउनेछु। यो उपकरणले तपाइँलाई तपाइँको इमेलहरूमा पूर्व-सुरक्षित पूर्ण रूपमा ढाँचा गरिएका टेम्प्लेटहरू टाँस्न र तपाइँको पत्राचार दिनचर्यालाई केहि क्लिकहरूमा संकुचित गर्न मद्दत गर्न सक्छ।

यदि तपाइँले Outlook तालिका ट्यूटोरियलमा मेरो सशर्त ढाँचा पढ्नुभएको छ भने, तपाइँलाई थाहा छ। कक्षहरूको सामग्री र पृष्ठभूमि रङ कसरी परिवर्तन गर्ने। यद्यपि, तपाईको आउटलुक तालिका उज्यालो गर्न तपाईले गर्न सक्ने सबै कुरा होइन। आज म तपाईंलाई सशर्त रूपमा तपाईंको तालिकाको किनाराहरू रङ र तिनीहरूको चौडाइ र शैली परिमार्जन गर्ने तरिकाहरू देखाउनेछु।

यसबाहेक, अन्तिम अध्यायमा एउटा सानो बोनस तपाईंलाई पर्खिरहेको छ जहाँ म तपाईंलाई धेरै परिमार्जनहरू कसरी लागू गर्ने भनेर देखाउनेछु। एकै समयमा र तपाईंको टेबललाई 4 जुलाईको आतिशबाजी जस्तै रंगीन र उज्यालो बनाउनुहोस् ;)

सेल बोर्डरहरूको रङ परिवर्तन गर्नुहोस्

बोर्डरको चित्रकलाले कसरी काम गर्छ भनेर देखाउनको लागि, म गत हप्ताको ट्यूटोरियलबाट उही नमूनाहरू प्रयोग गर्नेछु। मामला निम्न हो: मैले टाँसें एमाइक्रोसफ्ट टोली, यस GitHub कुराकानीमा उनीहरूको प्रतिक्रिया जाँच गर्न स्वतन्त्र महसुस गर्नुहोस् :)

अन्तिम नोट

म साँच्चै आशा गर्दछु कि मैले तपाईलाई विश्वस्त पार्न सफल भएको छु कि आउटलुकमा टेबल सादाको साथ कालो किनारा मात्र होइन पाठ। त्यहाँ सुधार र रचनात्मकताको लागि प्रशस्त ठाउँहरू छन् :)

जब तपाईंले आफ्नै केही चित्रकला प्रयोगहरू लिने निर्णय गर्नुहुन्छ, केवल Microsoft Store बाट साझा इमेल टेम्प्लेटहरू स्थापना गर्नुहोस् र आनन्द लिनुहोस्!

यदि त्यहाँ छन् भने तपाईंबाट बाँकी रहेका कुनै पनि प्रश्नहरूलाई आउटलुक तालिकाहरूमा सशर्त ढाँचामा केही मद्दत चाहिन्छ, केवल टिप्पणी सेक्सनमा केही शब्दहरू छोड्नुहोस् र हामी यसलाई पत्ता लगाउनेछौं ;)

टेम्प्लेट र तालिका भर्न छुट दर छनौट गर्नुहोस्। मेरो छनोटमा निर्भर गर्दै, सेलको किनाराहरू विशेष रङमा रंगिनेछन्।

आज मैले रङ गर्ने तालिका तलको हुनेछ:

नमूना हेडर 1	नमूना हेडर 2	नमूना हेडर 3
~%WhatToEnter[ {dataset:'Dataset with discounts', column:' छुट', शीर्षक: 'छूट चयन गर्नुहोस्'} ] छुट

सशर्त ढाँचा टेम्प्लेटको HTML मा ह्यान्डल गरिएको छ, आउनुहोस् यस तालिकाको HTML कोड पहिले खोल्नुहोस्:

1. रुचिको टेम्प्लेट खोल्नुहोस् र सम्पादन गर्नुहोस् :

   

2. <1 खोज्नुहोस् टेम्प्लेटको उपकरणपट्टीमा HTML प्रतिमा ( ) हेर्नुहोस्:

   

3. धेरै पटक परिमार्जन गरिने मूल HTML हेर्नुहोस्:

   

यदि तपाइँ रङ्ग र छुट दर संग तिनीहरुको जडान बारे सोच्नुहुन्छ भने, म तपाइँलाई एक संकेत दिनेछु :) डाटासेट! थाहा छैन यो के हो? त्यसपछि एक सानो पज लिनुहोस् र पहिले मेरो Fillable Outlook टेम्प्लेट ट्यूटोरियल पढ्नुहोस्।

यहाँ मूल डेटासेट छ जुन मैले सुरुमा प्रयोग गर्नेछु र केही अध्यायहरूमा थोरै सुधार गर्नेछु:

छूट	रङ कोड
10%	#00B0F0
15 %	#00B050
20%	#FFC000
25%	#4630A0

जब मैले यो तालिकाबाट आवश्यक रङ कोड पुन: प्राप्त गर्न आवश्यक हुन्छ, म निम्न म्याक्रो प्रयोग गर्नेछु:

~%WhatToEnter[{dataset:'Dataset with discounts',column:'color code'}]

हामीले सबै आधारभूत कुराहरू कभर गरेका छौं, रङहरू परिवर्तन गर्न सुरु गरौं :)

एउटाको किनाराको रंग अपडेट गर्नुहोस्। कक्ष

तालिकामा एउटै कक्षको किनाराहरू रङ गर्न, पहिले टेम्प्लेटको HTML मा यसको रेखा फेला पारौं र यसको कम्पोनेन्टहरू नजिकबाट हेरौं:

~%WhatToEnter[{dataset: 'Dataset with discounts', column:'Discount',title:'select discount'}] discount

• “ style= ” ले सेलको आधारभूत प्यारामिटरहरूको सेट प्रतिनिधित्व गर्दछ।
• “चौडाइ: ३२%; 1 19>

यो कोड लाइनको अर्थ हो कि म ठोस शैलीको 1px खैरो किनारा भएको सेल देख्नेछु। यदि मैले ती मापदण्डहरू मध्ये कुनै पनि प्रतिस्थापन गरेमा, यसले मेरो टेम्प्लेटमा तालिकाको उपस्थितिलाई भ्रष्ट पार्न सक्छ, अर्थात् किनाराहरू अदृश्य हुनेछन् (यद्यपि सबै टाँसिएपछि पूर्ण रूपमा देखिनेछ)।

मलाई एउटा मानक प्राप्त गर्न मन लाग्छ। टेम्प्लेटमा तालिका र टाँस्दा यसलाई परिमार्जन गर्नुहोस्। त्यसोभए, मैले प्यारामिटरहरूसँग एउटा नयाँ विशेषता थप्छु जसले टाँस्ने क्रममा मूललाई ​​बदल्नेछ:

~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title:'select discounts '}] छुट

माथिको HTML लाइन जाँच गरौं:

• “ style="border : 1px solid #aeabab;" पहिलो विशेषता हो। ती सेलका मूल हुन्विशेषताहरू।
• “ डेटा-सेट-शैली= ” एउटा विशेष प्यारामिटर हो जसले मलाई टाँस्ने क्रममा गुणहरूको आवश्यक सेटसँग माथिको विशेषता प्रतिस्थापन गर्न मद्दत गर्दछ।
• “ सीमा: 1px ठोस; Border-color: ” दोस्रो विशेषताको अंश हो जहाँ हामी पज गर्नेछौं। हेर्नुहोस्, सुरुवात मौलिकसँग मिल्दोजुल्दो छ, उही किनारा चौडाइ र शैली। यद्यपि, जब यो रङको कुरा आउँछ (मैले परिवर्तन गर्न चाहेको प्यारामिटर), म यसलाई border-color: ले बदल्छु र WhatToEnter म्याक्रो टाँस्छु। तसर्थ, ड्रपडाउन छनोटको आधारमा, म्याक्रोलाई रङ कोडले प्रतिस्थापन गरिनेछ र किनारालाई पुन: पेन्ट गरिनेछ।
• “~%WhatToEnter[] छूट” अझै पनि सेलको सामग्री हो। कुनै पनि परिवर्तनको आवश्यकता पर्दैन।

त्यसैले, भविष्यको रंगीन कक्षको साथ पूर्ण HTML यस्तो देखिनेछ:

नमूना हेडर 1

नमूना हेडर 2

नमूना हेडर 3

~%WhatToEnter[{dataset:'Dataset with discounts',column:' छुट', शीर्षक:'छूट चयन गर्नुहोस्'}] छुट

जब तपाईंले यो टेम्प्लेट टाँस्नुहुन्छ , अद्यावधिक गरिएको कक्षको किनारा छनोट गरिएको रंगमा तुरुन्तै रंगिनेछ:

सम्पूर्ण पङ्क्तिको किनाराहरू पेन्ट गर्नुहोस्

अब सीमानाहरू पेन्ट गरौं। हाम्रो नमूना तालिकाको सम्पूर्ण पङ्क्ति र यो कसरी काम गर्दछ हेर्नुहोस्। तर्क बिल्कुल जस्तै छमाथिको अनुच्छेद बाहेक तपाईंले दोस्रो पङ्क्तिका सबै कक्षहरू अद्यावधिक गर्न आवश्यक छ। एक पटक मैले माथि कभर गरेको समान परिमार्जनहरू सम्पूर्ण पङ्क्तिमा लागू गरेपछि, टेम्प्लेट टाँस्दा यो एक झलकमा चित्रित हुन्छ।

यदि तपाईं हेर्न चाहनुहुन्छ भने दोस्रो पङ्क्ति रङको साथ तयार एचटीएमएल, यहाँ यो जान्छ:

नमूना हेडर 1

नमूना हेडर 2

नमूना हेडर 3

~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title:'select discount'}] छुट

बर्डर चौडाइ परिवर्तन गर्नुहोस्

अब सीमाको रङ मात्र होइन यसको चौडाइ पनि अपडेट गर्ने प्रयास गरौं। HTML विशेषतामा थप हेर्नुहोस् जुन टाँस्ने क्रममा मूललाई ​​प्रतिस्थापन गर्दछ:

data-set-style="border: 1px solid; Border-color:~%WhatToEnter[{dataset:' छुटको साथ डेटासेट',स्तम्भ:'रङ कोड'}]">~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title:'select discount'}] छुट

हेर्नुहोस् 1>1px प्यारामिटर? यो रंगीन हुने किनाराहरूको चौडाइ हो। तपाईंले यसलाई म्यानुअल रूपमा परिवर्तन गर्न सक्नुहुन्छ, भन्नुहोस्, 2 र तपाईंले यसलाई टाँस्नुभएपछि तालिकाको किनाराहरू फराकिलो हुनेछन्।

यद्यपि, म यसलाई अर्को तरिकाले गर्नेछु। म मेरो डेटासेट अपडेट गर्नेछु र किनारा चौडाइको साथ नयाँ स्तम्भ थप्नेछु। यस अवस्थामा, एकपटक मैले टाँस्न वर्तमान दर रोजें, रङ र चौडाइ दुवै हुनेछअद्यावधिक गरियो।

<9

छूट	रङ कोड	सीमा चौडाइ
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 प्राप्त गर्छु:

नमूना हेडर 1

नमूना हेडर 2

नमूना हेडर 3

~%WhatToEnter[{ dataset:'Dataset with discount',column:'Discount',title:'select discount'}] discount

एक पटक यो टेम्प्लेट बचत र टाँसिएपछि, फराकिलो नीलो किनाराहरू इमेलमा देखा पर्नेछ:

तालिकामा सीमाना शैली परिमार्जन गर्नुहोस्

यस ch मा apter म तपाईंको ध्यान अर्को प्यारामिटर - शैलीमा खिच्न चाहन्छु। यो एक सीमाना उपस्थिति ह्यान्डल गर्नेछ। मैले यसलाई सही तरिकाले कसरी लागू गर्ने भनेर देखाउनु अघि, मैले मेरो डेटासेटमा फर्केर यसलाई मेरो हालको केस अनुसार परिमार्जन गर्न आवश्यक हुनेछ।

छूट	सीमाशैली
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 जान्छ:

नमूना हेडर 1

नमूना हेडर 2

नमूना हेडर 3

~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount' ,title:'select discount'}] discount

यदि तपाइँ यो HTML प्रतिलिपि गरेर टाँस्नुहोस् तपाईंको टेम्प्लेटहरूमा, परिणामले तपाईंलाई पर्खिरहने छैन:

एकै समयमा हाइलाइटिङ, पाठ रङ, र किनारा चौडाइ परिवर्तन गर्न सशर्त ढाँचा सेट अप गर्नुहोस्

हामी सबैभन्दा चासोमा पुगेका छौं एक पटकमा धेरै परिमार्जनहरू कसरी लागू गर्ने भनेर म तपाईंलाई देखाउन लागिरहेको छु। सुरुमा, म डेटासेट अद्यावधिक गर्नेछु जुन मैले डाटा पुन: प्राप्त गर्नेछु।मैले कक्षहरूको हाइलाइटिङ, पाठ रङ र किनारा चौडाइ परिवर्तन गर्ने निर्णय गरेकोले, ती सबै प्यारामिटरहरू निर्दिष्ट गर्न आवश्यक छ। तसर्थ, मेरो नयाँ डेटासेट यस्तो देखिनेछ:

छूट	रङ कोड	पृष्ठभूमि कोड	सीमा चौडाई
10%	#00B0F0	#DEEBF6	2
15 %	#00B050	#E2EFD9	2.5
20%	#FFC000	#FFF2CC	3
25%	#4630A0	#FBE5D5	3.5

त्यसोभए, यदि मैले 10% छनोट गरें भने, आवश्यक पाठ नीलो (# 00B0F0 ) मा रंगिनेछ, छनोट गरिएका कक्षहरूको पृष्ठभूमिलाई छायांकन गरिनेछ। हल्का नीलो टोन (# DEEBF6 ) र तिनीहरूको किनाराहरू दुई पटक फराकिलो हुनेछन्।

तर यो डेटासेट कसरी आउटलुक तालिकामा जडान गर्न सकिन्छ ताकि यसलाई ढाँचा मिल्छ? मैले तपाईलाई २ लेखमा यस कार्यको लागि तयारी गरिरहेको छु :) यहाँ HTML जान्छ जसले सबै आवश्यक परिमार्जनहरू ह्यान्डल गर्नेछ:

नमूना हेडर 1

< नमूना हेडर 2

नमूना हेडर 3

~%WhatToEnter[{dataset:' छुटको साथ डाटासेट', स्तम्भ: 'छूट', शीर्षक: 'छूट चयन गर्नुहोस्'}] छुट

अब लागू गरिएका सबै परिमार्जनहरू हेरौं:

• नमूना हेडर 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 लाइनको सीमानाको चौडाइ Border width मा निर्दिष्ट गरिएकोमा परिवर्तन गरिनेछ। मैले यसलाई पहिले नै कभर गरेको छु, तपाईंले केहि छुटेको अवस्थामा हेर्न सक्नुहुन्छ।

जब मैले ती विशेषताहरू थपिएको टेम्प्लेट टाँसें, परिणामले मलाई पर्खिरहने छैन:

त्यहाँ एउटा सानो टिप्पणी छ जुन म यो विषय बन्द गर्नु अघि बनाउन चाहन्छु। जब मैले तालिकाहरूमा बोर्डर रङ परीक्षण गरिरहेको थिएँ, मैले Outlook को अनलाइन र डेस्कटप संस्करणहरूमा सीमानाहरूको एकदमै अस्पष्ट व्यवहारको सामना गरें। थोरै भ्रममा परेकोले, म स्पष्टीकरणको लागि हाम्रा विकासकर्ताहरूमा पुगें। तिनीहरूले पत्ता लगाए कि विभिन्न आउटलुक क्लाइन्टहरूले विभिन्न तरिकामा तालिकाहरू प्रस्तुत गर्छन् र यस्तो व्यवहारको कारण Outlook मा बग हो।

हाम्रो टोलीले यो मुद्दालाई रिपोर्ट गर्यो।