Tabla de contenido
En este artículo aprenderás a dar formato condicional a las tablas en Outlook. Te mostraré cómo actualizar la pintura del texto de las celdas y fondo con el color que seleccione en la lista desplegable.
Preparación
Antes de empezar nuestra "lección de dibujo" y aprender a dar formato condicional a las tablas en Outlook, me gustaría hacer una pequeña presentación de nuestra aplicación para Outlook llamada Plantillas de correo electrónico compartidas. Con esta práctica herramienta podrás gestionar tu correspondencia en Outlook de una forma tan rápida y sencilla como antes sólo podías imaginar. El complemento te ayudará a evitar los repetitivos copy-pastes y a crear correos electrónicos de aspecto agradable en un abrir y cerrar de ojos.cuestión de unos pocos clics.
Ha llegado el momento de volver a nuestro tema principal: el formato condicional en las tablas de Outlook. En otras palabras, te mostraré cómo colorear las celdas, sus bordes y su contenido con el color deseado. En primer lugar, asegúrate de recordar cómo crear tablas en Outlook.
Como voy a colorear las celdas en función del tono que elija de la lista desplegable, tendré que hacer un arreglo previo más. Si recuerdas mi tutorial sobre cómo crear plantillas de correo electrónico rellenables, sabrás que las listas desplegables se crean con la ayuda de conjuntos de datos. Tómate un momento para actualizar tus conocimientos sobre este tema si crees que has olvidado cómo manejar conjuntos de datos y sigamos adelante.
Ahora necesito guardar previamente un conjunto de datos con los colores que voy a utilizar (lo he llamado Conjunto de datos con descuentos ) y añada el QuéEntrar con la selección desplegable. Éste es mi conjunto de datos:
Descuento | Código de color |
10% | #70AD47 |
15% | #475496 |
20% | #FF0000 |
25% | #2E75B5 |
Si se pregunta dónde obtener esos códigos, basta con crear una tabla vacía, ir a su Propiedades y elige cualquier color. Verás su código en el campo correspondiente, no dudes en copiarlo desde ahí.
Creo la macro WHAT_TO_ENTER y la conecto a este conjunto de datos, ya que la necesitaré más adelante:
~%WhatToEnter[{dataset:'Conjunto de datos con descuentos',column:'Descuento',title: Seleccionar descuento'}]Esta pequeña macro me ayudará a obtener el desplegable de descuentos para elegir. Una vez hecho esto, se pintará la parte necesaria de mi tabla.
Entiendo lo poco claro que puede parecer por ahora, así que no te dejaré con este malentendido y empezaré a mostrar cómo cambiar el color del texto o resaltar una celda. Utilizaré ejemplos básicos para que puedas hacerte una idea y reproducir este procedimiento con tus propios datos.
Empecemos.
Cambiar el color de fuente del texto en la tabla
Empecemos por sombrear algún texto de la tabla. He preparado una plantilla con una tabla de ejemplo para nuestros experimentos de pintura:
Mi objetivo es pintar el texto del color correspondiente en función de la selección desplegable. En otras palabras, quiero pegar una plantilla, elegir el tipo de descuento necesario de la lista desplegable y este texto pegado se coloreará. ¿De qué color? Desplácese hasta el conjunto de datos en la parte de preparación, verá que cada tipo de descuento tiene su propio código de color. Este es el color deseado que debe serusado.
Como quiero que el descuento se añada desde la lista desplegable, tengo que pegar la macro WhatToEnter en esta celda. ¿Sientes que necesitas refrescar la memoria sobre este tema? Tómate un momento para echar un vistazo a uno de mis tutoriales anteriores ;)
Así, la tabla resultante tendrá este aspecto:
Ejemplo de cabecera 1 | Ejemplo de cabecera 2 | Ejemplo de cabecera 3 |
~%WhatToEnter[ {dataset:'Conjunto de datos con descuentos', column:'Descuento', title:'Seleccionar descuento'} ] descuento |
Verás, el tipo de descuento se añadirá desde la lista desplegable y la palabra "descuento" estará ahí de todas formas.
Pero, ¿cómo puedo configurar la plantilla para que el texto se pinte en el color correspondiente? En realidad es bastante fácil, sólo tendré que actualizar un poco el HTML de la plantilla. Terminemos con la parte teórica y pasemos directamente a la práctica.
Colorear todo el texto de la celda de la tabla
En primer lugar, abro el código HTML de mi plantilla y lo compruebo detenidamente:
Así es como se ve mi plantilla en HTML:
Nota. Más adelante publicaré todos los códigos HTML como texto para que puedas copiarlos en tus propias plantillas y modificarlos como quieras.
Echemos un vistazo al HTML de arriba. La primera línea son las propiedades del borde de la tabla (estilo, anchura, color, etc.). Luego va la primera fila
Me interesa el primer elemento de la segunda fila con mi WHAT_TO_ENTER. El coloreado se hará añadiendo el siguiente trozo de código:
TEXTO_A_COLOREARVoy a dividirlo en partes y a aclarar cada una de ellas:
- En COLOR Si lo sustituye por, digamos, "rojo", este texto se volverá rojo. Sin embargo, como mi tarea es elegir un color de la lista desplegable, volveré a la preparación por un segundo y tomaré mi preparado QuéEntrar macro a partir de ahí: ~%WhatToEnter[{dataset:'Conjunto de datos con descuentos',column:'Descuento',title: Seleccionar descuento'}]
- TEXTO_A_COLOREAR es el texto que debe sombrearse. En mi ejemplo particular, sería " ~%WhatToEnter[{dataset:'Conjunto de datos con descuentos',column:'Descuento',title:'Seleccionar descuento'}] descuento "(copie este fragmento directamente del código HTML original para evitar la corrupción de datos).
Aquí está el nuevo trozo de código que insertaré en mi HTML:
Nota. Habrás notado que el parámetro "columna" difiere en esas dos macros. Es porque necesito devolver el valor de diferentes columnas, es decir columna:'Código de color' devolverá el color con el que se pintará el texto mientras que columna:'Descuento' - la tasa de descuento para pegar en una celda.
Surge una nueva pregunta: ¿en qué lugar del HTML debo colocarlo? Hablando en general, este texto debería sustituir a TEXTO_A_COLOREAR. En mi ejemplo, sería la primera columna (
Una vez que guardo los cambios y pego esta plantilla actualizada, una ventana emergente me pide que elija un descuento. Elijo 10% y mi texto se colorea en verde de inmediato.
Sombrear parte del contenido de la celda
La lógica para colorear sólo una parte del contenido de la celda es básicamente la misma - se reemplaza sólo el texto a colorear con el código del capítulo anterior dejando el resto del texto como está.
En este ejemplo, si necesito colorear sólo el porcentaje (sin la palabra "descuento"), abriré el código HTML, seleccionaré la parte que no necesita ser coloreada ("descuento" en nuestro caso) y la moveré fuera de la etiqueta:
En caso de que estés haciendo los preparativos para colorear desde el principio, ten en cuenta que el texto coloreado en el futuro va en lugar de TEXTO_A_COLOREAR Aquí está mi HTML renovado:
¿Ves? He colocado sólo parte del contenido de mi celda dentro de las etiquetas, por lo tanto, sólo esta parte será de color al pegar.
Aplicar formato condicional a las celdas de una tabla
Ahora cambiemos un poco la tarea e intentemos resaltar no el texto sino todo el fondo de las celdas en la misma tabla de ejemplo.
Resaltar una celda
Como estoy modificando la misma tabla, no me repetiré y pegaré también el código HTML de la tabla original en este capítulo. Desplázate un poco hacia arriba o salta directamente al primer ejemplo de este tutorial para ver el código sin modificar de la tabla sin colorear.
Si quiero sombrear el fondo de la celda con el descuento, también tendré que modificar un poco el HTML, pero la modificación diferirá de la coloración del texto. La principal diferencia es que el color no se aplicará al texto, sino a toda la celda.
La celda a resaltar tiene este aspecto en el formato HTML:
Como quiero resaltar una celda, los cambios deben aplicarse al atributo de la celda, no al texto. Dividiré la línea anterior en partes, aclararé cada una de ellas y señalaré las partes que hay que cambiar:
- "style=" significa que la celda de la fila tiene las siguientes propiedades de estilo. Aquí es donde hacemos nuestra primera pausa. Como voy a establecer un color de fondo personalizado, cambio estilo a estilo conjunto de datos .
- "ancho: 32,2925%; borde: 1px negro sólido;" - Esas son las propiedades de estilo por defecto a las que me refería más arriba. Necesito añadir otra para personalizar el fondo de la celda elegida: color de fondo Como mi objetivo es elegir el color a utilizar a partir de una lista desplegable, vuelvo a mi preparación y tomar el WhatToEnter listo a partir de ahí.
Truco. Si quieres que la celda se pinte de un color y no quieres que la lista desplegable te moleste cada vez, basta con sustituir una macro por el nombre del color ("azul", por ejemplo). Quedará así: ~%WhatToEnter[{dataset:'Conjunto de datos con descuentos',column:'Descuento',title:'Seleccionar descuento'}] descuento
- " Descuento ~%WhatToEnter[] "es el contenido de la celda.
Así pues, aquí está el aspecto actualizado del HTML:
El resto de la tabla se queda como está. Aquí va el HTML resultante que resaltará la celda con el porcentaje:
Cuando guarde este cambio y pegue la tabla actualizada en un correo electrónico, obtendré la lista desplegable con los descuentos y la primera celda aparecerá resaltada como estaba previsto.
Colorear toda la fila
Cuando una celda no es suficiente, pinto toda la fila :) Puede que pienses que tendrás que aplicar los pasos de la sección anterior para todas las celdas de una fila. Me apresuro a decepcionarte, el procedimiento diferirá un poco.
En las instrucciones anteriores te he mostrado cómo actualizar el fondo de la celda modificando el trozo de HTML de esta celda. Como ahora voy a repintar toda la fila, necesitaré tomar su línea HTML y aplicarle los cambios directamente.
Ahora está libre de opciones y tiene el aspecto siguiente . Tendré que añadir conjunto-datos-estilo= y pegar mi WHAT_TO_ENTER allí. En el resultado, la línea se verá como la de abajo:
Así, todo el HTML de la tabla con la celda a pintar tendrá este aspecto:
Siéntase libre de copiar este HTML para sus propias plantillas para asegurarse de que funciona de la manera que describo. Alternativamente, confíe en la captura de pantalla a continuación :)
Resumen
Esto es todo lo que quería contarte hoy sobre el formato condicional en las tablas de Outlook. Te he enseñado a cambiar el color del contenido de las celdas y a resaltar su fondo. Espero haber conseguido convencerte de que no hay nada especial y difícil en modificar el HTML de las plantillas y que hagas algunos experimentos de pintura por tu cuenta ;)
Para tu información, la herramienta puede instalarse desde Microsoft Store en tu PC, Mac o tableta Windows y utilizarse en todos tus dispositivos simultáneamente.
Si tienes alguna pregunta o, tal vez, alguna sugerencia sobre el formato de las tablas, házmelo saber en los Comentarios. ¡Me encantará recibir tu respuesta!