Spis treści
W tym artykule dowiesz się jak warunkowo formatować tabele w Outlooku. Pokażę Ci jak aktualizować malowanie tekstu komórek i tło z kolorem, który wybierzesz z listy rozwijanej.
Przygotowanie
Zanim rozpoczniemy naszą "lekcję rysunku" i dowiemy się jak warunkowo formatować tabele w Outlooku, chciałbym zrobić małe wprowadzenie do naszej aplikacji dla Outlooka o nazwie Shared Email Templates. Dzięki temu poręcznemu narzędziu będziesz zarządzać swoją korespondencją w Outlooku tak szybko i łatwo, jak wcześniej mogłeś sobie tylko wyobrazić. Dodatek pomoże Ci uniknąć powtarzających się copy-pastes i tworzyć ładnie wyglądające maile wkwestia kilku kliknięć.
Teraz najwyższy czas wrócić do naszego głównego tematu - formatowania warunkowego w tabelach Outlooka. Innymi słowy, pokażę Ci jak pokolorować komórki, ich obramowania i zawartość na pożądany kolor. Na początek upewnij się, że pamiętasz jak tworzyć tabele w Outlooku.
Ponieważ będę kolorował komórki w oparciu o tonację, którą wybiorę z listy rozwijanej, będę musiał dokonać jeszcze jednego wstępnego ustalenia. Jeśli przypominasz sobie mój tutorial o tym, jak tworzyć wypełnialne szablony wiadomości e-mail, wiesz, że listy rozwijane tworzy się za pomocą zbiorów danych. Poświęć chwilę na zaktualizowanie swojej wiedzy na ten temat, jeśli masz wrażenie, że zapomniałeś, jak zarządzać zbiorami danych, i przejdźmy dalej.
Teraz muszę wstępnie zapisać zbiór danych z kolorami, których zamierzam użyć (nazwałem go Zbiór danych z rabatami ) i dodać WhatToEnter makro z wyborem rozwijanym, więc oto mój zbiór danych:
Rabat | Kod koloru |
10% | #70AD47 |
15% | #475496 |
20% | #FF0000 |
25% | #2E75B5 |
Jeśli zastanawiasz się, skąd wziąć te kody, po prostu utwórz pustą tabelę, przejdź do jej Właściwości Zobaczysz jego kod w odpowiednim polu, możesz go skopiować stamtąd.
Tworzę makro WHAT_TO_ENTER i podłączam je do tego zbioru danych, ponieważ będę go potrzebował później:
~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title: Select discount'}]To małe makro pomoże mi uzyskać rozwijanie rabatów do wyboru. Gdy to zrobię, niezbędna część mojej tabeli zostanie pomalowana.
Rozumiem, jak niejasno może to wyglądać na razie, więc nie zostawię cię z tym nieporozumieniem i zacznę pokazywać, jak zmienić kolor tekstu lub podświetlić komórkę. Będę używał podstawowych próbek, abyś mógł złapać pomysł i odtworzyć tę procedurę z własnymi danymi.
Zaczynajmy.
Zmiana koloru czcionki tekstu w tabeli
Zacznijmy od cieniowania jakiegoś tekstu w tabeli. Przygotowałem szablon z przykładową tabelą do naszych malarskich eksperymentów:
Moim celem jest pomalowanie tekstu na odpowiedni kolor w zależności od wyboru z listy rozwijanej.Innymi słowy, chcę wkleić szablon, wybrać z listy rozwijanej odpowiednią stawkę rabatową i ten wklejony tekst zostanie pokolorowany.Na jaki kolor? Przewiń do zbioru danych w części przygotowawczej, zobaczysz, że każda stawka rabatowa ma swój własny kod kolorystyczny.To jest pożądany kolor, który powinien byćużywane.
Ponieważ chciałbym, aby rabat był dodawany z listy rozwijanej, muszę w tej komórce wkleić makro WhatToEnter. Czujesz, że potrzebujesz odświeżyć sobie pamięć w tym temacie? Poświęć chwilę na sprawdzenie jednego z moich poprzednich tutoriali ;)
Tak więc, wynikowa tabela będzie wyglądać tak:
Przykładowy nagłówek 1 | Przykładowy nagłówek 2 | Przykładowy nagłówek 3 |
~%WhatToEnter[ {dataset:'Dataset with discounts', column:'Discount', title:'Select discount'} ] discount |
Zobacz, że rabat zostanie dodany z listy rozwijanej, a słowo "rabat" i tak tam będzie.
Ale jak ustawić szablon tak, aby tekst był malowany na odpowiedni kolor? To całkiem proste, muszę tylko trochę zaktualizować HTML szablonu. Zakończmy część teoretyczną i przejdźmy do praktyki.
Pokoloruj cały tekst w komórce tabeli
Na początek otwieram kod HTML mojego szablonu i sprawdzam go dokładnie:
Oto jak wygląda mój szablon w HTML-u:
Uwaga. Dalej zamieszczę wszystkie kody HTML jako tekst, abyś mógł je skopiować do własnych szablonów i zmodyfikować tak, jak chcesz.
Przyjrzyjmy się dokładnie powyższemu HTML'owi. Pierwszy wiersz to właściwości obramowania tabeli (styl, szerokość, kolor, itd.). Następnie pierwszy wiersz
Interesuje mnie pierwszy element drugiego wiersza z moim WHAT_TO_ENTER. Kolorowanie odbędzie się poprzez dodanie następującego fragmentu kodu:
TEXT_TO_BE_COLOREDRozbijam go dla Ciebie na części i wyjaśniam każdą z nich:
- Na stronie KOLOR parametr obsługuje obraz. Jeśli zastąpisz go, powiedzmy, "czerwonym", ten tekst stanie się czerwony. Ponieważ jednak moim zadaniem jest wybranie koloru z listy rozwijanej, wrócę na chwilę do przygotowań i wezmę mój przygotowany WhatToEnter makro z tego miejsca: ~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title: Wybierz rabat'}]
- TEXT_TO_BE_COLORED to tekst, który ma być zacieniony. W moim konkretnym przykładzie będzie to " ~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title:'Select discount'}] discount " (skopiuj ten fragment bezpośrednio z oryginalnego kodu HTML, aby uniknąć uszkodzenia danych).
Oto nowy fragment kodu, który wstawię do mojego HTML:
Uwaga. Być może zauważyłeś, że parametr "kolumny" różni się w tych dwóch makrach. To dlatego, że muszę zwrócić wartość z różnych kolumn, tj. kolumna: "Kod koloru zwróci kolor, którym zostanie pomalowany tekst, natomiast kolumna: "Rabat - stopa dyskontowa do wklejenia w komórce.
Pojawia się nowe pytanie - w którym miejscu HTML-a powinienem go umieścić? Mówiąc ogólnie, ten tekst powinien zastąpić TEXT_TO_BE_COLORED. W mojej próbce byłaby to pierwsza kolumna (.
Gdy zapiszę zmiany i wkleję ten zaktualizowany szablon, pojawi się okienko z prośbą o wybranie rabatu. Wybieram 10% i mój tekst od razu zostaje pokolorowany na zielono.
Zacieniowanie części zawartości komórki
Logika kolorowania tylko części zawartości komórki jest w zasadzie taka sama - zastępujesz tylko tekst, który ma być zabarwiony, kodem z poprzedniego rozdziału, pozostawiając resztę tekstu bez zmian.
W tym przykładzie, jeśli potrzebuję pokolorować tylko procent (bez słowa "rabat"), otworzę kod HTML, zaznaczę część, która nie musi być pokolorowana ("rabat" w naszym przypadku) i przeniosę ją poza znacznik:
Jeśli przygotowujesz się do kolorowania od samego początku, pamiętaj, że przyszły kolorowy tekst wchodzi w miejsce TEXT_TO_BE_COLORED , reszta zostaje po zakończeniu .Oto mój odnowiony HTML:
Zobacz, że umieściłem tylko część zawartości mojej komórki w obrębie znaczników, stąd tylko ta część będzie kolorowana przy wklejaniu.
Zastosuj formatowanie warunkowe do komórek tabeli
Teraz zmieńmy nieco zadanie i spróbujmy w tej samej przykładowej tabeli podświetlić nie tekst, ale całe tło komórek.
Podświetlić jedną komórkę
Ponieważ modyfikuję tę samą tabelę, nie będę się powtarzał i wkleję w tym rozdziale również kod HTML oryginalnej tabeli. Przewiń trochę w górę lub skocz od razu do pierwszego przykładu tego samouczka, aby zobaczyć niezmieniony kod niekolorowanej tabeli.
Jeśli będę chciał zaciemnić tło komórki z rabatem, to również będę musiał nieco zmodyfikować HTML, ale modyfikacja będzie się różniła od kolorowania tekstu. Główna różnica polega na tym, że kolor należy zastosować nie do tekstu, ale do całej komórki.
Podświetlana komórka wygląda tak w formacie HTML:
Ponieważ chcę podświetlić komórkę, zmiany powinny dotyczyć atrybutu komórki, a nie tekstu. Rozbiję powyższy wiersz na części, wyjaśnię każdą z nich i wskażę części, które wymagają zmiany:
- "style=" oznacza, że komórka wiersza ma następujące właściwości stylu. Tutaj robimy pierwszą przerwę. Ponieważ mam zamiar ustawić niestandardowy kolor tła, zmieniam styl do w stylu zbioru danych .
- "width: 32.2925%; border: 1px solid black;" - to są domyślne właściwości stylu, które miałem na myśli powyżej. Muszę dodać kolejny, aby dostosować tło wybranej komórki: background-color . Ponieważ moim celem jest wybór koloru do użycia z listy rozwijanej, wracam do mojego przygotowania i biorę gotowe WhatToEnter stamtąd.
Wskazówka. jeśli chcesz, aby komórka była pomalowana na jeden kolor i nie chcesz, aby lista rozwijana za każdym razem przeszkadzała Ci w pracy, po prostu zastąp makro nazwą koloru ("niebieski", na przykład). Będzie to wyglądać tak: ~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title:'Select discount'}] discount
- " ~%WhatToEnter[] discount " to zawartość komórki.
Tak więc, tutaj jest zaktualizowany wygląd HTML:
Reszta tabeli pozostaje bez zmian. Oto wynikowy HTML, który podświetli komórkę ze wskaźnikiem procentowym:
Kiedy zapiszę tę zmianę i wkleję zaktualizowaną tabelę w mailu, otrzymam rozwijaną listę z rabatami, a pierwsza komórka zostanie podświetlona zgodnie z planem.
Pokoloruj cały rząd
Gdy jedna komórka to za mało, maluję cały rząd :) Może się Wam wydawać, że kroki z punktu powyżej trzeba będzie zastosować do wszystkich komórek w rzędzie. Spieszę Was rozczarować, procedura będzie się nieco różnić.
W powyższych instrukcjach pokazałem Ci jak zaktualizować tło komórki modyfikując fragment HTML tej komórki. Ponieważ teraz mam zamiar przemalować cały wiersz, będę musiał wziąć jego wiersz HTML i zastosować zmiany właśnie w nim.
Teraz jest bez opcji i wygląda jak . Będę musiał dodać data-set-style= i wkleić tam mój WHAT_TO_ENTER. W wyniku linia będzie wyglądała jak ta poniżej:
W ten sposób cały HTML tabeli z zamalowaną komórką będzie wyglądał tak:
Możesz skopiować ten HTML do swoich własnych szablonów, aby upewnić się, że działa tak, jak opisuję. Alternatywnie, zaufaj poniższemu zrzutowi ekranu :)
Podsumuj
To wszystko co chciałem Ci dzisiaj powiedzieć o formatowaniu warunkowym w tabelach Outlooka. Pokazałem Ci jak zmienić kolor komórek 'zawartości' i podświetlić ich tło. Mam nadzieję, że udało mi się przekonać Cię, że w modyfikowaniu HTML szablonu nie ma nic szczególnego i trudnego i przeprowadzisz kilka własnych eksperymentów malarskich ;)
FYI, narzędzie można zainstalować z Microsoft Store na komputerze PC, Mac lub tablecie z systemem Windows i używać go na wszystkich urządzeniach jednocześnie.
Jeśli macie jakieś pytania, a może sugestie dotyczące formatowania tabel, dajcie znać w Komentarzach, będzie mi miło!