Innholdsfortegnelse
I denne artikkelen vil du se hvordan du bruker betinget formatering på tabellens kantlinjer i Outlook. Jeg skal vise deg hvordan du endrer farge, bredde og stil. Så skal jeg lære deg hvordan du gjør flere modifikasjoner om gangen og farger Outlook-tabellen din på mange forskjellige måter.
Først og fremst vil jeg lage en liten hodenote for nykommerne på denne bloggen. Siden vi i dag skal snakke om betinget formatering i maler, vil jeg vise deg hvordan du konfigurerer dem riktig ved å bruke vårt Delte e-postmaler-tillegg for Outlook. Dette verktøyet kan hjelpe deg med å lime inn forhåndslagrede perfekt formaterte maler i e-postene dine og krympe korrespondanserutinen til et spørsmål om noen få klikk.
Hvis du allerede har lest veiledningen for betinget formatering i Outlook-tabeller, vet du hvordan endre cellenes innhold og bakgrunnsfarge. Det er imidlertid ikke alt du kan gjøre for å lysne opp Outlook-bordet ditt. I dag skal jeg vise deg måtene å betinget fargelegge bordkantene på og endre bredden og stilen deres.
I tillegg venter en liten bonus på deg i det siste kapittelet hvor jeg viser deg hvordan du bruker flere modifikasjoner på samme tid og gjør bordet ditt like fargerikt og lyst som fyrverkeriet den 4. juli ;)
Endre fargen på cellekanter
For å vise deg hvordan bordermaleriet fungerer, Jeg skal bruke de samme prøvene fra forrige ukes opplæring. Saken er følgende: Jeg limer inn enMicrosoft-teamet, sjekk gjerne svaret deres i denne GitHub-samtalen :)
Siste notat
Jeg håper virkelig jeg klarte å overbevise deg om at en tabell i Outlook ikke bare er svarte kanter med vanlig tekst. Det er rikelig med rom for forbedring og kreativitet :)
Når du bestemmer deg for å ta noen egne maleeksperimenter, er det bare å installere delte e-postmaler fra Microsoft Store og nyte det!
Hvis det finnes eventuelle spørsmål du har igjen trenger litt hjelp med betinget formatering i Outlook-tabeller, bare legg igjen noen ord i kommentarfeltet, så finner vi ut av det ;)
mal og velg diskonteringsrenten for å fylle ut tabellen. Avhengig av valget mitt, vil cellens kantlinjer være farget i den spesielle fargen.Tabellen jeg skal fargelegge i dag vil være den nedenfor:
| Sample header 1 | Eksempeloverskrift 2 | Eksempeloverskrift 3 |
| ~%WhatToEnter[ {datasett:'Datasett med rabatter', kolonne:' Rabatt', tittel:'Velg rabatt'} ] rabatt |
Siden betinget formatering håndteres i malers HTML, la oss åpne denne tabellens HTML-kode først:
- Åpne malen av interesse og trykk Rediger :
- Finn Se HTML-ikonet ( ) på malens verktøylinje:
- Se den originale HTML-koden som vil bli endret flere ganger:
Hvis du lurer på fargene og deres sammenheng med diskonteringsrenter, skal jeg gi deg et hint :) Datasett! Har du ingen anelse om hva det er? Ta deretter en liten pause og les veiledningen for utfyllbare Outlook-maler først.
Her er det originale datasettet jeg skal bruke i begynnelsen og forbedre litt i noen kapitler:
| Rabatt | Fargekode |
| 10 % | #00B0F0 |
| 15 % | #00B050 |
| 20% | #FFC000 |
| 25% | #4630A0 |
Når jeg trenger å hente den nødvendige fargekoden fra denne tabellen, bruker jeg følgende makro:
~%WhatToEnter[{dataset:'Dataset med rabatter',column:'Color code'}]Siden vi har alt det grunnleggende dekket, la oss begynne å endre farger :)
Oppdater kantfargen til en celle
For å fargelegge kantene til en enkelt celle i en tabell, la oss først finne linjen i malens HTML og se nærmere på komponentene:
- “ style= ” representerer settet med grunnleggende parametere for en celle.
- "bredde: 32%; kant: 1px solid #aeabab ” er cellens og kantens bredde, farge og stil.
- “~%WhatToEnter[] rabatt” er cellens innhold.
Denne kodelinjen betyr at jeg vil se en celle med 1px grå kantlinjer av en solid stil. Hvis jeg erstatter noen av disse parameterne, kan det ødelegge utseendet til tabellen i malen min, det vil si at kantene vil være usynlige (selv om alt vil se perfekt ut etter innliming).
Jeg vil gjerne ha en standard tabell i en mal og få den endret når du limer inn. Så jeg legger til ett nytt attributt med parameterne som vil erstatte de originale når jeg limer inn:
La oss undersøke HTML-linjen ovenfor:
- “ style="border : 1px solid #aeabab;" er den første egenskapen. De er cellens originaleegenskaper.
- “ data-set-style= ” er en spesiell parameter som vil hjelpe meg å erstatte attributtet ovenfor med det nødvendige settet med egenskaper under limingen.
- “ border:1px solid; border-color: " er delen av det andre attributtet der vi tar en pause. Se, begynnelsen er identisk med originalen, samme kantbredde og stil. Men når det kommer til fargen (parameteren som jeg vil endre), erstatter jeg den med kantfarge: og limer inn WhatToEnter-makroen. Derfor, avhengig av rullegardinvalget, vil makroen bli erstattet med fargekoden og kantlinjen vil bli malt på nytt.
- “~%WhatToEnter[] rabatt” er fortsatt cellens innhold som krever ingen endringer.
Derfor vil hele HTML-koden med den fremtidige fargede cellen se slik ut:
Når du limer inn denne malen , vil kantlinjen til den oppdaterte cellen farges i den valgte fargen med en gang:
Mal kantene på hele raden
La oss nå male kantene på hele raden i prøvetabellen vår og se hvordan det fungerer. Logikken er helt den samme som iavsnittet ovenfor bortsett fra at du må oppdatere alle cellene i den andre raden. Når de samme endringene som jeg dekket ovenfor er brukt på hele raden, blir den malt i et blunk når du limer inn malen.
Hvis du vil ta en titt på den klare HTML-en med fargelegging på andre rad, her kommer den:
Endre kantlinjebredde
La oss nå prøve å oppdatere ikke bare kantfarge, men også bredden. Ta en titt på HTML-attributtet som erstatter det originale når du limer inn:
data-set-style="border: 1px solid; border-color:~%WhatToEnter[{dataset:' Datasett med rabatter',kolonne:'Fargekode'}]">~%WhatToEnter[{datasett:'Datasett med rabatter',kolonne:'Rabatt',tittel:'Velg rabatt'}] rabattSe
Se <0 1>1px parameter? Dette er bredden på kantene som skal farges. Du kan endre den manuelt til for eksempel 2, og tabellkantene vil bli bredere når du limer den inn.
Men jeg vil gjøre det på en annen måte. Jeg oppdaterer datasettet mitt og legger til en ny kolonne med kantlinjebredde. I dette tilfellet, når jeg velger en nåværende hastighet å lime inn, vil både farge og bredde være detoppdatert.
| Rabatt | Fargekode | Rammebredde |
| 10 % | #00B0F0 | 2 |
| 15 % | #00B050 | 2,5 |
| 20 % | #FFC000 | 3 |
| 25 % | #4630A0 | 3.5 |
La oss nå endre det andre attributtet til hver linje og erstatte 1px med følgende tekst:
border-width:~%WhatToEnter [{datasett:'Datasett med rabatter',kolonne:'Border width'}]Deretter gjentar jeg det for alle de tre cellene i den andre raden og får følgende HTML i resultatet:
Når denne malen er lagret og limt inn, vil de utvidede blå kantene vises i en e-post:
Endre kantlinjer i en tabell
I denne kap etter at jeg vil trekke oppmerksomheten din til en annen parameter – stil. Denne vil håndtere kantlinjers utseende. Før jeg viser deg hvordan du bruker det riktig, må jeg gå tilbake til datasettet mitt og endre det i samsvar med mitt nåværende tilfelle.
| Rabatt | Grensestil |
| 10 % | Strecket |
| 15 % | Dobbel |
| 20% | Prikket |
| 25% | Ridge |
Jeg har knyttet hver diskonteringsrente til en kantstil og lagret dette datasettet for fremtiden. Makroen for å hente stilen for HTML-en min vil være den nedenfor:
~%WhatToEnter[{dataset:"Datasett med rabatter",kolonne:"Border style"}]Nå må jeg oppdatere andre rads attributter ved å erstatte solid (standardstilen jeg har brukt hele tiden) med makroen ovenfor for å få følgende kodebit:
data-set-style="border: 1px #aeabab; border-style: ~%WhatToEnter[{dataset:'Datasett med rabatter',kolonne:'Border style'}]Her kommer den endelige HTML-koden:
Hvis du kopierer denne HTML-en og limer inn til malene dine, resultatet lar deg ikke vente:
Konfigurer betinget formatering for å endre utheving, tekstfarge og kantbredde samtidig
Vi har nådd de fleste interessene ting som jeg skal vise deg hvordan du bruker flere modifikasjoner om gangen. Først og fremst vil jeg oppdatere datasettet jeg skal hente dataene fra.Siden jeg bestemte meg for å endre cellenes utheving, tekstfarge og kantbredde, må alle disse parameterne spesifiseres. Derfor vil det nye datasettet mitt se slik ut:
| Rabatt | Fargekode | Bakgrunnskode | Border width |
| 10 % | #00B0F0 | #DEEBF6 | 2 |
| 15 % | #00B050 | #E2EFD9 | 2,5 |
| 20% | #FFC000 | #FFF2CC | 3 |
| 25 % | #4630A0 | #FBE5D5 | 3,5 |
Så, hvis jeg velger 10 %, vil den nødvendige teksten bli malt i blått (# 00B0F0 ), bakgrunnen til de valgte cellene vil være skyggelagt i en lyseblå tone (# DEEBF6 ) og deres grenser vil bli utvidet to ganger.
Men hvordan kan dette datasettet kobles til en Outlook-tabell slik at det blir formatert? Jeg har forberedt deg på denne oppgaven i 2 artikler :) Her kommer HTML-koden som vil håndtere alle nødvendige modifikasjoner:
La oss nå se på alle modifikasjonene som er brukt:
- Eksempel på overskrift 1 - dette stykket vil male overskriftsteksten i farger fra "Fargekode"-kolonnen. I tilfelle du følersom om du trenger å friske opp hukommelsen på tekstmaleriet, se kapittelet Endre skriftfargen på tekst i tabell i forrige veiledning.
- data-set-style="background-color:~%WhatToEnter[ {datasett:'Datasett med rabatter',kolonne:'Bakgrunnskode',tittel:'Velg rabatt'}] - denne delen oppdaterer bakgrunnsfargen ved å hente koden fra Bakgrunnskode -kolonnen i datasettet. Ta gjerne en titt på Highlight cells-veiledningen hvis du føler at du trenger en mer detaljert beskrivelse av denne saken.
- data-set-style="border: solid #aeabab; border-width:~%WhatToEnter[{dataset:'Datasett med rabatter',column:'Border width'}] – med denne HTML-linjen vil grensebredden endres til den som er spesifisert i Border width Jeg har dekket det tidligere, du kan ta en titt i tilfelle du gikk glipp av noe.
Når jeg limer inn en mal med disse attributtene lagt til, vil resultatet ikke la meg vente:
Det er et lite notat jeg vil gjøre før jeg avslutter dette emnet. Mens jeg testet kantfarging i tabeller, møtte jeg ganske tvetydig oppførsel av grenser i både online- og skrivebordsversjoner av Outlook. Da jeg var litt forvirret, nådde jeg utviklerne våre for å få avklaring. De fant ut at forskjellige Outlook-klienter gjengir tabeller på forskjellige måter, og årsaken til slik oppførsel er en feil i Outlook.
Teamet vårt rapporterte dette problemet til
