Sadržaj
U ovom ćete članku vidjeti kako primijeniti uvjetno oblikovanje na rubove tablice u programu Outlook. Pokazat ću vam kako promijeniti njihovu boju, širinu i stil. Zatim ću vas naučiti kako napraviti nekoliko izmjena odjednom i obojiti svoju Outlook tablicu na mnogo različitih načina.
Prvo, želio bih napraviti malu bilješku za novopridošlice ovog bloga. Budući da ćemo danas govoriti o uvjetnom oblikovanju u predlošcima, pokazat ću vam kako ih ispravno postaviti pomoću našeg dodatka Shared Email Templates za Outlook. Ovaj vam alat može pomoći da zalijepite unaprijed spremljene savršeno oblikovane predloške u svoju e-poštu i smanjite svoju rutinu dopisivanja na nekoliko klikova.
Ako ste već pročitali moj vodič za uvjetno oblikovanje u tablicama programa Outlook, znate kako promijeniti sadržaj ćelija i boju pozadine. Međutim, to nije sve što možete učiniti da uljepšate svoju Outlook tablicu. Danas ću vam pokazati načine uvjetnog bojanja obruba vaše tablice i izmjene njihove širine i stila.
Štoviše, mali bonus čeka vas u zadnjem poglavlju gdje ću vam pokazati kako primijeniti nekoliko izmjena u isto vrijeme i učinite svoj stol šarenim i svijetlim poput vatrometa 4. srpnja ;)
Promijenite boju obruba ćelija
Da bismo vam pokazali kako funkcionira oslikavanje obruba, Koristit ću iste uzorke iz prošlotjednog vodiča. Slučaj je sljedeći: zalijepim aMicrosoftov tim, slobodno pogledajte njihov odgovor u ovom GitHub razgovoru :)
Završna napomena
Stvarno se nadam da sam vas uspio uvjeriti da tablica u Outlooku nije samo crni obrub s ravnim tekst. Ima puno prostora za poboljšanje i kreativnost :)
Kada odlučite poduzeti nekoliko vlastitih slikarskih eksperimenata, samo instalirajte Shared Email Templates iz Microsoftove trgovine i uživajte!
Ako ih ima ako imate još pitanja potrebna vam je pomoć s uvjetnim oblikovanjem u Outlook tablicama, samo ostavite nekoliko riječi u odjeljku Komentari i mi ćemo to riješiti ;)
predložak i odaberite diskontnu stopu za popunjavanje tablice. Ovisno o mom izboru, granice ćelije bit će obojene u određenu boju.Tablica koju ću danas obojiti bila bi ova ispod:
| Uzorak zaglavlja 1 | Uzorak zaglavlja 2 | Uzorak zaglavlja 3 |
| ~%WhatToEnter[ {dataset:'Dataset with discounts', column:' Discount', title:'Select discount'} ] discount |
Kako se uvjetnim oblikovanjem rukuje u HTML-u predložaka, idemo prvo otvorite HTML kod ove tablice:
- Otvorite predložak koji vas zanima i pritisnite Uredi :
- Pronađite Pogledajte HTML ikonu ( ) na alatnoj traci predloška:
- Pogledajte izvorni HTML koji će se mijenjati više puta:
Ako se pitate o bojama i njihovoj povezanosti s diskontnim stopama, dat ću vam savjet :) Skup podataka! Nemate pojma što je to? Zatim napravite malu pauzu i prvo pročitajte moje uputstvo za Outlook predloške koji se mogu ispuniti.
Ovo je izvorni skup podataka koji ću koristiti na početku i malo poboljšati u nekoliko poglavlja:
| Popust | Kod boje |
| 10% | #00B0F0 |
| 15 % | #00B050 |
| 20% | #FFC000 |
| 25% | #4630A0 |
Kada trebam dohvatiti potreban kod boje iz ove tablice, upotrijebit ću sljedeću makronaredbu:
~%WhatToEnter[{dataset:'Dataset with discounts',column:'Color code'}]Kako smo pokrili sve osnove, počnimo mijenjati boje :)
Ažuriraj boju obruba jednog ćelija
Da bismo obojili obrube jedne ćelije u tablici, prvo pronađimo njen redak u HTML-u predloška i pobliže pogledajmo njegove komponente:
- “ style= ” predstavlja skup osnovnih parametara ćelije.
- “širina: 32%; border: 1px solid #aeabab ” su širina, boja i stil ćelije i obruba.
- “~%WhatToEnter[] popust” je sadržaj ćelije.
Ovaj redak koda znači da ću vidjeti ćeliju sa sivim obrubom od 1 px punog stila. Ako zamijenim bilo koji od tih parametara, to može pokvariti izgled tablice u mom predlošku, tj. granice će biti nevidljive (iako će sve izgledati savršeno nakon lijepljenja).
Volio bih imati standard tablicu u predlošku i izmijenite je prilikom lijepljenja. Dakle, dodajem jedan novi atribut s parametrima koji će zamijeniti originalne prilikom lijepljenja:
Ispitajmo gornji HTML redak:
- “ style="border : 1px solid #aeabab;" je prvi atribut. To su izvornici ćelijekarakteristike.
- “ data-set-style= ” je poseban parametar koji će mi pomoći da zamijenim gornji atribut potrebnim skupom svojstava tijekom lijepljenja.
- “ border:1px solid; border-color: ” je dio drugog atributa gdje ćemo napraviti pauzu. Vidite, početak je identičan originalu, ista širina obruba i stil. Međutim, kada je u pitanju boja (parametar koji želim promijeniti), zamijenim je s border-color: i zalijepim makronaredbu WhatToEnter. Dakle, ovisno o izboru padajućeg izbornika, makronaredba će biti zamijenjena kodom boje, a obrub će biti ponovno obojan.
- “~%WhatToEnter[] popust” i dalje je sadržaj ćelije koji ne zahtijeva nikakve izmjene.
Stoga će cijeli HTML s ćelijom u boji budućnosti izgledati ovako:
Kada zalijepite ovaj predložak , obrub ažurirane ćelije odmah će biti obojen u odabranu boju:
Boji obrube cijelog retka
Sada obojajmo obrube na cijeli red naše ogledne tablice i pogledajte kako radi. Logika je apsolutno ista kao uodlomak iznad, osim što ćete morati ažurirati sve ćelije drugog retka. Nakon što se iste izmjene koje sam gore opisao primijene na cijeli red, on se slika u migovima prilikom lijepljenja predloška.
Ako želite pogledati spremni HTML s bojanjem drugog reda, evo ga:
Promijeni širinu obruba
Pokušajmo sada ažurirati ne samo boju obruba već i njegovu širinu. Još jednom pogledajte HTML atribut koji zamjenjuje izvorni prilikom lijepljenja:
data-set-style="border: 1px solid; border-color:~%WhatToEnter[{dataset:' Skup podataka s popustima', stupac:'Color code'}]">~%WhatToEnter[{dataset:'Skup podataka s popustima',column:'Discount',title:'Select discount'}] popustPogledajte 1px parametar? Ovo je širina obruba koje treba obojiti. Možete ga ručno promijeniti na, recimo, 2 i rubovi tablice postat će širi nakon što ga zalijepite.
Međutim, učinit ću to na drugi način. Ažurirat ću svoj skup podataka i dodati novi stupac širine obruba. U ovom slučaju, kada odaberem trenutnu stopu za lijepljenje, bit će i boja i širinaažurirano.
| Popust | Kod boje | Širina obruba |
| 10% | #00B0F0 | 2 |
| 15% | #00B050 | 2,5 |
| 20% | #FFC000 | 3 |
| 25% | #4630A0 | 3.5 |
Izmijenimo sada drugi atribut svakog retka i zamijenimo 1px sljedećim dijelom teksta:
border-width:~%WhatToEnter [{dataset:'Dataset with discounts',column:'Border width'}]Zatim to ponavljam za sve tri ćelije drugog retka i u rezultatu dobivam sljedeći HTML:
Nakon što se ovaj predložak spremi i zalijepi, prošireni plavi obrubi pojavit će se u e-poruci:
Izmijeni stil obruba u tablici
U ovom pogl Nakon toga, želio bih vam skrenuti pozornost na još jedan parametar - stil. Ovaj će se pobrinuti za izgled obruba. Prije nego vam pokažem kako to ispravno primijeniti, morat ću se vratiti na svoj skup podataka i modificirati ga u skladu sa svojim trenutnim slučajem.
| Popust | Granicastil |
| 10% | Iscrtkano |
| 15% | Dvostruko |
| 20% | Točkasto |
| 25% | Ridge |
Svaku diskontnu stopu povezao sam sa stilom obruba i spremio ovaj skup podataka za budućnost. Makro za dohvaćanje stila za moj HTML bio bi ovaj ispod:
~%WhatToEnter[{dataset:"Dataset with discounts",column:"Border style"}]Sada ću morati ažurirati atribute drugog retka zamjenom solida (zadani stil koji sam cijelo vrijeme koristio) s gornjom makronaredbom da dobijem sljedeći dio koda:
data-set-style="border: 1px #aeabab; border-style: ~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border style'}]Evo konačnog HTML-a:
Ako kopirate ovaj HTML i zalijepite na svoje predloške, rezultat vas neće ostaviti čekati:
Postavite uvjetno oblikovanje da biste istovremeno promijenili isticanje, boju teksta i širinu obruba
Postigli smo najveći interes jer ću vam pokazati kako primijeniti više izmjena odjednom. Najprije ću ažurirati skup podataka iz kojeg ću dohvaćati podatke.Budući da sam odlučio promijeniti označavanje ćelija, boju teksta i širinu obruba, potrebno je specificirati sve te parametre. Stoga bi moj novi skup podataka izgledao ovako:
| Popust | Kôd boje | Kôd pozadine | Širina obruba |
| 10% | #00B0F0 | #DEEBF6 | 2 |
| 15 % | #00B050 | #E2EFD9 | 2,5 |
| 20% | #FFC000 | #FFF2CC | 3 |
| 25% | #4630A0 | #FBE5D5 | 3.5 |
Dakle, ako odaberem 10%, potreban tekst bit će obojen u plavo (# 00B0F0 ), pozadina odabranih ćelija bit će osjenčana u svijetloplavi ton (# DEEBF6 ) i njihove granice će se dvaput proširiti.
Ali kako se ovaj skup podataka može povezati s Outlook tablicom tako da se formatira? Pripremao sam vas za ovaj zadatak u 2 članka :) Evo HTML-a koji će obraditi sve potrebne izmjene:
Pogledajmo sada sve primijenjene izmjene:
- Uzorak zaglavlja 1 - ovaj će dio obojiti tekst zaglavlja bojom iz stupca “Color code”. U slučaju da osjećatekao što trebate osvježiti svoje pamćenje o slikanju teksta, pogledajte poglavlje Promjena boje fonta teksta u tablici mog prethodnog vodiča.
- data-set-style="background-color:~%WhatToEnter[ {dataset:'Dataset with discounts',column:'Background code',title:'Select discount'}] - ovaj dio ažurira boju pozadine, uzimajući svoj kod iz stupca Background code skupa podataka. Slobodno pogledajte vodič za označavanje ćelija ako smatrate da vam je potreban detaljniji opis ovog slučaja.
- data-set-style="border: solid #aeabab; border-width:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border width'}] – s ovom HTML linijom širina obruba bit će promijenjena u onu navedenu u Border width Već sam to obradio ranije, možete pogledati u slučaju da ste nešto propustili.
Kada zalijepim predložak s tim dodanim atributima, rezultat me neće ostaviti čekati:
Postoji mala napomena koju bih želio napraviti prije nego što zatvorim ovu temu. Dok sam testirao bojanje obruba u tablicama, suočio sam se s prilično dvosmislenim ponašanjem obruba u online i desktop verzijama Outlooka. Budući da sam bio pomalo zbunjen, obratio sam se našim programerima za pojašnjenje. Otkrili su da različiti Outlook klijenti prikazuju tablice na različite načine, a razlog za takvo ponašanje je pogreška u Outlooku.
Naš tim prijavio je ovaj problem
