Changer la couleur, la largeur et le style de la bordure dans la table Outlook

Dans cet article, vous verrez comment appliquer la mise en forme conditionnelle aux frontières de la table dans Outlook. Je vais vous montrer comment changer leur couleur, leur largeur et leur style. Ensuite, je vais vous apprendre à apporter plusieurs modifications à la fois et colorer votre table des perspectives de différentes manières.

• Changer la couleur des frontières cellulaires
  • Mettez à jour la couleur de la bordure d'une cellule
  • Paint Borders de toute la rangée
• Changer la largeur des frontières
• Modifier le style des frontières dans une table
• Configurez le formatage conditionnel pour modifier la mise en évidence, la couleur du texte et la largeur des bordures en même temps
• Note finale

Tout d'abord, j'aimerais faire un petit note de tête pour ce blog. Les nouveaux arrivants. Comme aujourd'hui, nous parlerons de la mise en forme conditionnelle dans les modèles, je vais vous montrer comment les configurer correctement en utilisant nos modèles de messagerie partagés pour Outlook. Cet outil peut vous aider à coller des modèles parfaitement formatés à vos e-mails et à réduire votre routine de correspondance à quelques clics.

Si vous avez déjà lu mon didacticiel conditionnel de mise en forme dans Outlook Tables, vous savez comment modifier le contenu des cellules et la couleur d'arrière-plan. Cependant, ce n'est pas tout ce que vous pouvez faire pour égayer votre table Outlook. Aujourd'hui, je vais vous montrer les moyens de colorer conditionnellement les bordures de votre table et de modifier leur largeur et leur style.

De plus, un petit bonus vous attend dans le dernier chapitre où je vais vous montrer comment appliquer plusieurs modifications en même temps et rendre votre table aussi colorée et lumineuse que les feux d'artifice le ⁴ juillet;)

Changer la couleur des frontières des cellules

Pour vous montrer comment fonctionne la peinture des frontières, j'utiliserai les mêmes échantillons du tutoriel de la dernière semaine. L'affaire est la suivante: je colle un modèle et choisis le taux d'actualisation pour remplir le tableau. Selon mon choix, les bordures de la cellule seront colorées dans la couleur particulière.

La table que je colorerai aujourd'hui serait celle ci-dessous:

Échantillon en-tête 1	Échantillon en-tête 2	Échantillon en-tête 3
~% Whatoenter [{ensemble de données: 'ensemble de données avec des remises', colonne: 'rabais', titre: 'select rabais'}] remise

Comme le formatage conditionnel est géré dans HTML des modèles, ouvrons d'abord le code HTML de ce tableau:

1. Ouvrez le modèle d'intérêt et appuyez sur Modifier :

   

2. Recherchez l'icône HTML Afficher ( ) dans la barre d'outils du modèle:

   

3. Voir le HTML d'origine qui sera modifié plusieurs fois:

   

Si vous vous interrogez sur les couleurs et leur connexion avec les taux d'actualisation, je vous donnerai un indice :) ensemble de données! Vous n'avez aucune idée de ce que c'est? Ensuite, prenez une petite pause et lisez d'abord mon didacticiel de modèles Outlook remplissant.

Voici l'ensemble de données d'origine que j'utiliserai au début et que je m'améliore un peu en quelques chapitres:

Rabais	Code couleur
10%	# 00B0F0
15%	# 00B050
20%	# FFC000
25%	# 4630A0

Quand j'ai besoin de récupérer le code couleur nécessaire de ce tableau, j'utiliserai la macro suivante:

~% WhatToenter [{ensemble de données: 'ensemble de données avec des réductions', colonne: 'Color Code'}]

Comme nous avons toutes les bases couvertes, commençons à changer de couleurs :)

Mettez à jour la couleur de la bordure d'une cellule

Pour colorer les bordures d'une seule cellule dans une table, trouvons d'abord sa ligne dans le HTML du modèle et examinons de plus près ses composants:

~% WhatToEnt [{ensemble de données: 'ensemble de données avec remises', colonne: 'Discount', titre: 'Select Discount'}] Discount

• « Style = » représente l'ensemble des paramètres de base d'une cellule.
• «Largeur: 32%; bordure: 1px solide #aabab » sont la largeur, la couleur et le style de la cellule de la cellule.
• «~% WhatToenter [] Remise» est le contenu de la cellule.

Cette ligne de code signifie que je verrai une cellule avec des bordures grises 1px d'un style solide. Si je remplace l'un de ces paramètres, il peut corrompre l'apparence de la table dans mon modèle, c'est-à-dire que les frontières seront invisibles (bien que tout ressemblera parfaitement après le collage).

J'adorerais avoir une table standard dans un modèle et le faire modifier lors du collage. Donc, j'ajoute un nouvel attribut avec les paramètres qui remplaceront ceux d'origine lors de la collation:

~% WhatToenter [{ensemble de données: 'ensemble de données avec remises', colonne: 'Discount', titre: 'Sélectionner la remise'}] Discount

Examinons la ligne HTML ci-dessus:

• « Est le premier attribut. Ce sont les caractéristiques originales de la cellule.
• « Data-Set-Style = » est un paramètre spécial qui m'aidera à remplacer l'attribut ci-dessus par l'ensemble des propriétés nécessaire pendant le collage.
• « Border: 1px solide; bordure de bordure: » est la partie du deuxième attribut où nous allons faire une pause. Vous voyez, le début est identique à l'original, la même largeur et style de bordure. Cependant, en ce qui concerne la couleur (le paramètre que je veux changer), je le remplace par la bordure de la bordure: et je colle la macro WhatToenter. Par conséquent, selon le choix déroulant, la macro sera remplacée par le code couleur et la bordure sera repeinte.
• «~% WhatToenter [] Discount» est toujours le contenu de la cellule qui ne nécessite aucun changement.

Par conséquent, le HTML complet avec la cellule de couleur future ressemblera à ceci:

table>

Lorsque vous collez ce modèle, la bordure de la cellule mise à jour sera colorée immédiatement dans la couleur choisie:

Paint Borders de toute la rangée

Maintenant, peignons les bordures de toute la rangée de notre table d'échantillons et voyons comment cela fonctionne. La logique est absolument la même que dans le paragraphe ci-dessus, sauf que vous devrez mettre à jour toutes les cellules de la deuxième ligne. Une fois que les mêmes modifications que j'ai couvertes ci-dessus sont appliquées à toute la ligne, elle est peinte en un clin d'œil lors de la collation du modèle.

Si vous souhaitez jeter un œil au HTML prêt avec la coloration de la deuxième ligne, voilà:

En-tête d'échantillonnage 1	En-tête d'échantillonnage 2	En-tête d'échantillonnage 3
~% WhatToenter [{ensemble de données: 'ensemble de données avec remises', colonne: 'Discount', titre: 'Sélectionner la remise'}] Discount	& nbsp;	& nbsp;

table>

Changer la largeur des frontières

Essayons maintenant de mettre à jour non seulement la couleur de la bordure mais aussi sa largeur. Jetez un coup d'œil à l'attribut HTML qui remplace celui d'origine lors de la collation:

ensemble de données-> ~% WhatToenter [{ensemble de données: 'ensemble de données avec remises', colonne: 'remise', titre: 'SELECT DISLE'}] Discount

Voir le paramètre 1PX ? C'est la largeur des frontières à colorer. Vous pouvez le changer manuellement en, disons, 2 et les frontières de la table deviendront plus larges une fois que vous le collez.

Cependant, je vais le faire d'une autre manière. Je vais mettre à jour mon ensemble de données et ajouter une nouvelle colonne avec la largeur des frontières. Dans ce cas, une fois que j'ai choisi un taux actuel pour coller, la couleur et la largeur seront mises à jour.

En-tête d'échantillonnage 1	En-tête d'échantillonnage 2	En-tête d'échantillonnage 3
~% WhatToenter [{ensemble de données: 'ensemble de données avec remises', colonne: 'Discount', titre: 'Select Discount'}] Discount	& nbsp;	& nbsp;

Rabais	Code couleur	Largeur des frontières
10%	# 00B0F0	2
15%	# 00B050	2.5
20%	# FFC000	3
25%	# 4630A0	3.5

Modifions maintenant le deuxième attribut de chaque ligne et remplaçons 1PX par le texte suivant:

largeur de bordure: ~% WhatToenter [{ensemble de données: 'ensemble de données avec remises', colonne: 'Largeur de bordure'}]

Ensuite, je le répète pour les trois cellules de la deuxième ligne et j'obtiens le HTML suivant dans le résultat:

table>

Une fois ce modèle enregistré et collé, les bordures bleues élargis apparaîtront dans un e-mail:

Modifier le style des frontières dans une table

Dans ce chapitre, je voudrais attirer votre attention sur un autre paramètre - style. Celui-ci gérera l'apparence des frontières. Avant de vous montrer comment l'appliquer correctement, je devrai revenir à mon ensemble de données et le modifier conformément à mon cas actuel.

En-tête d'échantillonnage 1	En-tête d'échantillonnage 2	En-tête d'échantillonnage 3
~% WhatToenter [{ensemble de données: 'ensemble de données avec remises', colonne: 'Discount', titre: 'Select Discount'}] Discount	& nbsp;	& nbsp;

Rabais	Style de bordure
10%	En pointillé
15%	Double
20%	Pointé
25%	Crête

J'ai associé chaque taux d'actualisation à un style de bordure et enregistré cet ensemble de données pour l'avenir. La macro pour récupérer le style de mon HTML serait celle ci-dessous:

~% WhatToenter [{ensemble de données: "ensemble de données avec remises", colonne: "style de bordure"}]

Maintenant, je devrai mettre à jour les attributs de la deuxième ligne en remplaçant Solid (le style par défaut que j'utilise depuis le début) par la macro ci-dessus pour obtenir le morceau de code suivant:

largeur de données: 100%; Border-Collapse: s'effondrer; Style de la frontière: solide; Border-Color: #AABAB; "Border =" 1PX ">

En-tête d'échantillonnage 1

En-tête d'échantillonnage 2

En-tête d'échantillonnage 3

~% WhatToenter [{ensemble de données: 'ensemble de données avec remises', colonne: 'Discount', titre: 'Select Discount'}] Discount

& nbsp;

& nbsp;

table>

Si vous copiez ce HTML et collez sur vos modèles, le résultat ne vous fera pas attendre:

Configurez le formatage conditionnel pour modifier la mise en évidence, la couleur du texte et la largeur des bordures en même temps

Nous avons atteint la partie la plus intéressante car je suis sur le point de vous montrer comment appliquer plusieurs modifications à la fois. Tout d'abord, je vais mettre à jour l'ensemble de données, je vais récupérer les données. Étant donné que j'ai décidé de modifier la mise en évidence des cellules, la couleur du texte et la largeur des bordures, tous ces paramètres doivent être spécifiés. Par conséquent, mon nouvel ensemble de données ressemblerait à ça:

Rabais	Code couleur	Code d'arrière-plan	Largeur des frontières
10%	# 00B0F0	# Deebf6	2
15%	# 00B050	# E2efd9	2.5
20%	# FFC000	# Fff2cc	3
25%	# 4630A0	# Fbe5d5	3.5

Donc, si je choisis 10%, le texte nécessaire sera peint en bleu (# 00b0f0 ), l'arrière-plan des cellules choisi sera ombragée dans un ton bleu clair (# DEEBF6 ) et leurs frontières seront élargies deux fois.

Mais comment cet ensemble de données peut être connecté à une table Outlook afin qu'elle soit formatée? Je vous ai préparé à cette tâche dans 2 articles :) Voici le HTML qui gérera toutes les modifications nécessaires:

data-set->

table>

Voyons maintenant toutes les modifications appliquées:

• Exemple d'en-tête 1 - Cette pièce peindra le texte de l'en-tête en couleur à partir de la colonne «Color Code». Dans le cas où vous avez l'impression d'avoir besoin de rafraîchir votre mémoire sur la peinture de texte, reportez-vous à la couleur de la police de la police dans le chapitre du tableau de mon tutoriel précédent.
• Data-Set-Color: Purple; "> Data-Set-Lazy" Decoding = "async" title = "Plusieurs modifications appliquées à une table et son contenu en un seul clic." src = "https://cdn.ablebits.com/_img-blog/table-borders/multiple-formatting.png" alt = "Plusieurs modifications appliquées à une table et son contenu en un seul clic." width = "640" height = "566" /> Il y a une petite note que j'aimerais faire avant de fermer ce sujet. Pendant que je testais des frontières colorant dans des tables, j'ai fait face à un comportement assez ambigu des frontières dans les versions en ligne et sur bureau d'Outlook. Étant un peu confus, j'ai atteint nos développeurs pour clarifier. Ils ont découvert que différents clients Outlook rendent les tables de différentes manières et la raison d'un tel comportement est un bogue dans Outlook.

  Notre équipe a signalé ce problème à l'équipe Microsoft, n'hésitez pas à consulter sa réponse dans cette conversation GitHub :)

  Note finale

  J'espère vraiment que j'ai réussi à vous convaincre qu'une table dans Outlook n'est pas seulement des bordures noires avec du texte brut. Il y a beaucoup de place à l'amélioration et à la créativité :)

  Lorsque vous décidez de prendre vos propres expériences de peinture, installez simplement des modèles de messagerie partagés de Microsoft Appsource et profitez-en!

  S'il reste des questions, vous avez besoin d'aide avec le formatage conditionnel dans les tables Outlook, laissez quelques mots dans la section des commentaires et nous le découvrirons;)

Span Data-Set-> En-tête d'échantillonnage 1	Span Data-Set-> En-tête d'échantillonnage 2	Span Data-Set-> En-tête d'échantillonnage 3
Data-Set-> ~% WhatToenter [{ensemble de données: 'ensemble de données avec remises', colonne: 'Discount', titre: 'Sélectionner la remise'}] Discount	Data-Set -> & nbsp;	Data-Set -> & nbsp;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!