Taula de continguts
En aquest article veureu com aplicar el format condicional a les vores de la taula a l'Outlook. Us mostraré com canviar-ne el color, l'amplada i l'estil. A continuació, us ensenyaré a fer diverses modificacions alhora i a pintar la vostra taula d'Outlook de moltes maneres diferents.
En primer lloc, m'agradaria fer una petita nota de capçalera per als nouvinguts d'aquest bloc. Com que avui parlarem del format condicional a les plantilles, us mostraré com configurar-les correctament mitjançant el nostre complement de Plantilles de correu electrònic compartit per a Outlook. Aquesta eina us pot ajudar a enganxar plantilles amb un format perfecte desades prèviament als vostres correus electrònics i a reduir la vostra rutina de correspondència amb uns quants clics.
Si ja heu llegit el meu tutorial sobre Format condicional a les taules d'Outlook, ja ho sabeu. com canviar el contingut i el color de fons de les cel·les. Tanmateix, això no és tot el que podeu fer per il·luminar la vostra taula d'Outlook. Avui us mostraré les maneres de pintar condicionalment les vores de la vostra taula i modificar-ne l'amplada i l'estil.
A més, us espera una petita bonificació a l'últim capítol on us mostraré com aplicar diverses modificacions. al mateix temps i fes que la teva taula sigui tan colorida i brillant com els focs artificials del 4 de juliol ;)
Canvia el color de les vores de les cel·les
Per mostrar-te com funciona la pintura de les vores, Faré servir les mateixes mostres del tutorial de la setmana passada. El cas és el següent: enganxo aEquip de Microsoft, no dubteu a consultar la seva resposta en aquesta conversa de GitHub :)
Nota final
Realment espero haver aconseguit convèncer-vos que una taula a Outlook no és només vores negres amb text. Hi ha molt marge de millora i creativitat :)
Quan decidiu fer uns quants experiments de pintura, només cal que instal·leu Plantilles de correu electrònic compartit de Microsoft Store i gaudiu!
Si n'hi ha. Qualsevol pregunta que us quedi necessiteu ajuda amb el format condicional a les taules d'Outlook, només heu de deixar unes quantes paraules a la secció Comentaris i ho descobrirem ;)
plantilla i trieu la taxa de descompte per omplir la taula. Depenent de la meva elecció, les vores de la cel·la tindran un color en concret.La taula que pintaré avui seria la següent:
| Capçalera de mostra 1 | Mostra de capçalera 2 | Mostra de capçalera 3 |
| ~%WhatToEnter[ {dataset:'Conjunt de dades amb descomptes', columna:' Descompte', title:'Selecciona descompte'} ] descompte |
Com que el format condicional es gestiona a l'HTML de les plantilles, anem a primer obriu el codi HTML d'aquesta taula:
- Obre la plantilla d'interès i premeu Edita :
- Cerca el Mostra la icona HTML ( ) a la barra d'eines de la plantilla:
- Consulta l'HTML original que es modificarà diverses vegades:
Si us pregunteu sobre els colors i la seva connexió amb les taxes de descompte, us donaré una pista :) Dataset! No tens ni idea de què és? A continuació, feu una petita pausa i llegiu primer el meu tutorial de plantilles d'Outlook que es poden omplir.
Aquí teniu el conjunt de dades original que faré servir al principi i milloraré una mica en uns quants capítols:
| Descompte | Codi de color |
| 10% | #00B0F0 |
| 15 % | #00B050 |
| 20% | #FFC000 |
| 25% | #4630A0 |
Quan necessito recuperar el codi de color necessari d'aquesta taula, faré servir la macro següent:
~%WhatToEnter[{dataset:'Dataset with discounts',column:'Color code'}]Com que tenim tots els conceptes bàsics, comencem a canviar els colors :)
Actualitzeu el color de la vora d'un cell
Per acolorir les vores d'una sola cel·la en una taula, primer busquem la seva línia a l'HTML de la plantilla i mirem més de prop els seus components:
- “ style= ” representa el conjunt de paràmetres bàsics d'una cel·la.
- “amplada: 32%; border: 1px sòlid #aeabab ” són l'amplada, el color i l'estil de la cel·la i la vora.
- “~%WhatToEnter[] discount” és el contingut de la cel·la.
Aquesta línia de codi significa que veuré una cel·la amb vores grises d'1 px d'estil sòlid. Si substitueixo algun d'aquests paràmetres, pot danyar l'aspecte de la taula a la meva plantilla, és a dir, les vores seran invisibles (tot i que tot quedarà perfectament després d'enganxar-lo).
M'encantaria tenir un estàndard. taula en una plantilla i modificar-la en enganxar-la. Per tant, afegeixo un atribut nou amb els paràmetres que substituiran els originals en enganxar:
Examinem la línia HTML de dalt:
- “ style="border : 1px solid #aeabab;" és el primer atribut. Aquests són els originals de la cèl·lulacaracterístiques.
- “ data-set-style= ” és un paràmetre especial que m'ajudarà a substituir l'atribut anterior amb el conjunt de propietats necessari durant l'enganxament.
- “ bord: 1px sòlid; border-color: ” és la part del segon atribut on farem una pausa. Mira, el principi és idèntic a l'original, la mateixa amplada i estil de la vora. Tanmateix, quan es tracta del color (el paràmetre que vull canviar), el substitueixo per border-color: i enganxo la macro WhatToEnter. Per tant, depenent de l'opció del menú desplegable, la macro es substituirà pel codi de color i la vora es tornarà a pintar.
- “~%WhatToEnter[] discount” és encara el contingut de la cel·la que no requereix cap canvi.
Per tant, l'HTML complet amb la cel·la de color futur tindrà aquest aspecte:
Quan enganxeu aquesta plantilla , la vora de la cel·la actualitzada es pintarà immediatament amb el color escollit:
Pintar vores de la fila sencera
Ara pintem les vores a la fila sencera de la nostra taula de mostra i mireu com funciona. La lògica és absolutament la mateixa que en elparàgraf anterior, tret que haureu d'actualitzar totes les cel·les de la segona fila. Un cop s'apliquen les mateixes modificacions que he comentat anteriorment a tota la fila, es pinta d'un cop d'ullet quan enganxeu la plantilla.
Si voleu fer una ullada a l'HTML llest amb el color de la segona fila, aquí va:
Canvia l'amplada de la vora
Ara provem d'actualitzar no només el color de la vora sinó també l'amplada. Fes una ullada més a l'atribut HTML que substitueix l'original en enganxar:
data-set-style="border: 1px solid; border-color:~%WhatToEnter[{dataset:' Conjunt de dades amb descomptes',column:'Codi de color'}]">~%WhatToEnter[{dataset:'Conjunt de dades amb descomptes',column:'Descompte',title:'Selecciona descompte'}] descompteVegeu el
Paràmetre 1>1px ? Aquesta és l'amplada de les vores a pintar. Podeu canviar-lo manualment a, per exemple, 2 i les vores de la taula s'ampliaran un cop l'enganxeu.
No obstant això, ho faré d'una altra manera. Actualitzaré el meu conjunt de dades i afegiré una nova columna amb una amplada de vores. En aquest cas, un cop trieu una taxa actual per enganxar, seran tant el color com l'ampladaactualitzat.
| Descompte | Codi de color | Amplada de la vora |
| 10% | #00B0F0 | 2 |
| 15% | #00B050 | 2,5 |
| 20% | #FFC000 | 3 |
| 25% | #4630A0 | 3,5 |
Ara modifiquem el segon atribut de cada línia i substituïm 1px amb el següent fragment de text:
border-width:~%WhatToEnter [{dataset:'Dataset with discounts',column:'Border width'}]A continuació, ho repeteixo per a les tres cel·les de la segona fila i obteniu el següent HTML al resultat:
Un cop desada i enganxada aquesta plantilla, apareixeran les vores blaves ampliades en un correu electrònic:
Modifica l'estil de les vores en una taula
En aquest cap Després m'agradaria cridar la vostra atenció sobre un altre paràmetre: l'estil. Aquest s'encarregarà de l'aspecte de les vores. Abans de mostrar-vos com aplicar-lo correctament, hauré de tornar al meu conjunt de dades i modificar-lo d'acord amb el meu cas actual.
| Descompte | Borderestil |
| 10% | Guionat |
| 15% | Doble |
| 20% | Punt |
| 25% | Cresta |
He associat cada tipus de descompte amb un estil de vora i he desat aquest conjunt de dades per al futur. La macro per recuperar l'estil del meu HTML seria la següent:
~%WhatToEnter[{dataset:"Conjunt de dades amb descomptes",column:"Estil de vora"}]Ara hauré d'actualitzar el els atributs de la segona fila substituint el sòlid (l'estil predeterminat que he estat utilitzant sempre) per la macro anterior per obtenir el següent fragment de codi:
data-set-style="border: 1px #aeabab; border-style: ~%WhatToEnter[{dataset:'Conjunt de dades amb descomptes',column:'Estil de vora'}]Aquí va l'HTML final:
Si copieu aquest HTML i enganxeu-lo a les vostres plantilles, el resultat no us farà esperar:
Configureu el format condicional per canviar el ressaltat, el color del text i l'amplada de les vores al mateix temps
Hem assolit el més interès ting part, ja que estic a punt de mostrar-vos com aplicar diverses modificacions alhora. En primer lloc, actualitzaré el conjunt de dades del qual recuperaré les dades.Com que vaig decidir canviar el ressaltat de les cel·les, el color del text i l'amplada de les vores, cal especificar tots aquests paràmetres. Per tant, el meu nou conjunt de dades tindria aquest aspecte:
| Descompte | Codi de color | Codi de fons | Amplada de la vora |
| 10% | #00B0F0 | #DEEBF6 | 2 |
| 15 % | #00B050 | #E2EFD9 | 2,5 |
| 20% | #FFC000 | #FFF2CC | 3 |
| 25% | #4630A0 | #FBE5D5 | 3,5 |
Per tant, si trio 10%, el text necessari es pintarà de blau (# 00B0F0 ), el fons de les cel·les escollides s'ombrejarà en un to blau clar (# DEEBF6 ) i les seves vores s'ampliaran dues vegades.
Però, com es pot connectar aquest conjunt de dades a una taula d'Outlook perquè es formi? Us he estat preparant per a aquesta tasca en 2 articles :) Aquí va l'HTML que gestionarà totes les modificacions necessàries:
Ara fem una ullada a totes les modificacions aplicades:
- Exemple de capçalera 1: aquesta peça pintarà el text de la capçalera amb color de la columna "Codi de color". Per si et sentscom si necessiteu refrescar la memòria a la pintura de text, consulteu el capítol Canviar el color de la font del text a la taula del meu tutorial anterior.
- data-set-style="background-color:~%WhatToEnter[ {dataset:'Dataset with discounts',column:'Background code',title:'Select discount'}]: aquesta part actualitza el color de fons, prenent el seu codi de la columna Background code del conjunt de dades. No dubteu a fer una ullada al tutorial Ressaltar cel·les si creieu que necessiteu una descripció més detallada d'aquest cas.
- data-set-style="border: solid #aeabab; border-width:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border width'}]: amb aquesta línia HTML, l'amplada de les vores es canviarà a l'especificada a Amplada de la vora Ja ho he explicat anteriorment, podeu fer una ullada per si us heu perdut alguna cosa.
Quan enganxo una plantilla amb aquests atributs afegits, el resultat no em farà esperar:
Hi ha una petita nota que m'agradaria fer abans de tancar aquest tema. Mentre estava provant el color de les vores a les taules, em vaig enfrontar a un comportament força ambigu de les vores tant a les versions en línia com a les d'escriptori d'Outlook. Com que estava una mica confós, em vaig posar en contacte amb els nostres desenvolupadors per obtenir un aclariment. Van descobrir que diferents clients d'Outlook mostren taules de diferents maneres i el motiu d'aquest comportament és un error a Outlook.
El nostre equip va informar d'aquest problema a
