Pada artikel ini Anda akan mempelajari cara memformat tabel bersyarat di Outlook. Saya akan menunjukkan cara memperbarui cat teks sel dan latar belakang dengan warna yang Anda pilih dari daftar dropdown.

Persiapan

Sebelum kita memulai "pelajaran menggambar" dan mempelajari cara memformat tabel secara kondisional di Outlook, saya ingin sedikit memperkenalkan aplikasi kami untuk Outlook yang disebut Template Email Bersama. Dengan alat praktis ini, Anda akan mengelola korespondensi Anda di Outlook secepat dan semudah yang bisa Anda bayangkan sebelumnya.hanya dengan beberapa klik.

Sekarang saatnya untuk kembali ke topik utama kita - pemformatan bersyarat di tabel Outlook. Dengan kata lain, saya akan menunjukkan kepada Anda cara mewarnai sel, batas, dan isinya dengan warna yang diinginkan. Pertama, pastikan Anda ingat cara membuat tabel di Outlook.

Karena saya akan mewarnai sel berdasarkan nada yang saya pilih dari daftar dropdown, saya perlu membuat satu pengaturan awal lagi. Jika Anda ingat tutorial saya tentang cara membuat templat email yang dapat diisi, Anda tahu bahwa daftar dropdown dibuat dengan bantuan dataset. Luangkan waktu sejenak untuk memperbarui pengetahuan Anda tentang topik ini jika Anda merasa lupa cara mengelola dataset dan mari kita lanjutkan.

Sekarang saya perlu menyimpan dataset dengan warna yang akan saya gunakan (saya menyebutnya Dataset dengan diskon ) dan menambahkan WhatToEnter makro dengan pilihan dropdown. Jadi, inilah dataset saya:

Jika Anda bertanya-tanya di mana mendapatkan kode-kode itu, cukup buat tabel kosong, buka Properti Anda akan melihat kodenya di bidang yang sesuai, jangan ragu untuk menyalinnya langsung dari sana.

Saya membuat makro WHAT_TO_ENTER dan menghubungkannya ke dataset ini karena saya akan membutuhkannya nanti:

Makro kecil ini akan membantu saya mendapatkan dropdown diskon untuk dipilih. Setelah saya melakukannya, bagian yang diperlukan dari tabel saya akan dicat.

Saya mengerti betapa tidak jelasnya tampilannya untuk saat ini, jadi saya tidak akan meninggalkanmu dengan kesalahpahaman ini dan mulai menunjukkan cara mengubah warna teks atau menyorot sel. Saya akan menggunakan sampel dasar sehingga kamu bisa mendapatkan ide dan mereproduksi prosedur ini dengan datamu sendiri.

Mari kita mulai.

Mengubah warna font teks dalam tabel

Mari kita mulai dengan mengarsir beberapa teks dalam tabel. Saya sudah menyiapkan templat dengan contoh tabel untuk eksperimen lukisan kita:

Tujuan saya adalah mengecat teks dengan warna yang sesuai tergantung pada pilihan dropdown. Dengan kata lain, saya ingin menempelkan templat, memilih tingkat diskon yang diperlukan dari daftar dropdown dan teks yang ditempelkan ini akan diwarnai. Dalam warna apa? Gulir ke atas ke dataset di bagian persiapan, Anda akan melihat bahwa setiap tingkat diskon memiliki kode warnanya sendiri. Ini adalah warna yang diinginkan yang seharusnyadigunakan.

Karena saya ingin diskon ditambahkan dari daftar dropdown, saya perlu menempelkan makro WhatToEnter di sel ini. Merasa perlu menyegarkan ingatan Anda tentang subjek ini? Luangkan waktu sejenak untuk melihat salah satu tutorial saya sebelumnya ;)

Jadi, tabel yang dihasilkan akan terlihat seperti itu:

Lihat, tingkat diskon akan ditambahkan dari daftar dropdown dan kata "diskon" akan tetap ada di sana.

Tetapi bagaimana saya bisa mengatur templat sehingga teks akan dicat dengan warna yang sesuai? Cukup mudah sebenarnya, saya hanya perlu sedikit memperbarui HTML templat. Mari kita selesaikan bagian teori dan langsung ke praktiknya.

Mewarnai semua teks dalam sel tabel

Pertama, saya membuka kode HTML templat saya dan memeriksanya dengan cermat:

Berikut ini adalah bagaimana templat saya terlihat dalam HTML:

Selanjutnya saya akan memposting semua kode HTML sebagai teks sehingga Anda dapat menyalinnya ke template Anda sendiri dan memodifikasi seperti yang Anda inginkan.

Mari kita lihat HTML di atas dengan sangat dekat. Baris pertama adalah properti batas tabel (gaya, lebar, warna, dll.). Kemudian baris pertama (3 elemen sel data tabel untuk 3 kolom) dengan atribut-atributnya. Kemudian kita melihat kode baris kedua.

Saya tertarik pada elemen pertama dari baris kedua dengan WHAT_TO_ENTER saya. Pewarnaan akan dilakukan dengan menambahkan potongan kode berikut:

Saya akan memecahnya menjadi beberapa bagian untuk Anda dan menjelaskan masing-masingnya:

• The WARNA Jika Anda menggantinya dengan, katakanlah, "merah", teks ini akan menjadi merah. Namun, karena tugas saya adalah memilih warna dari daftar dropdown, saya akan kembali ke persiapan sejenak dan mengambil persiapan saya WhatToEnter makro dari sana: ~%WhatToEnter[{dataset:'Dataset dengan diskon', kolom:'Diskon', judul: Pilih diskon'}]
• TEXT_TO_BE_COLORED adalah teks yang perlu diarsir. Dalam contoh khusus saya, teks tersebut adalah " ~%WhatToEnter[{dataset:'Dataset dengan diskon', kolom:'Diskon', judul:'Pilih diskon'}] diskon " (salin bagian ini langsung dari kode HTML asli untuk menghindari kerusakan data).

Berikut ini adalah potongan kode baru yang akan saya sisipkan dalam HTML saya:

Catatan. Anda mungkin telah memperhatikan bahwa parameter "kolom" berbeda dalam dua makro tersebut. Ini karena saya perlu mengembalikan nilai dari kolom yang berbeda, yaitu kolom:'Kode warna' akan mengembalikan warna yang akan mengecat teks sementara kolom:'Diskon' - tingkat diskonto untuk menempelkan dalam sel.

Sebuah pertanyaan baru muncul - di tempat mana dari HTML saya harus menempatkannya? Berbicara secara umum, teks ini harus menggantikan TEXT_TO_BE_COLORED. Dalam contoh saya, itu akan menjadi kolom pertama ( ) dari baris (kolom) kedua. Jadi, saya mengganti makro WTE dan kata "diskon" dengan kode di atas dan mendapatkan HTML berikut:

Contoh header 1

Contoh header 2

Contoh header 3

~%WhatToEnter[{dataset:'Dataset dengan diskon', kolom:'Diskon', judul:'Pilih diskon'}] diskon

Setelah saya menyimpan perubahan dan menempelkan templat yang telah diperbarui ini, jendela pop-up akan meminta saya untuk memilih diskon. Saya memilih 10% dan teks saya langsung diwarnai hijau.

Menaungi bagian dari isi sel

Logika untuk mewarnai hanya sebagian dari isi sel pada dasarnya sama - Anda hanya mengganti teks yang akan diwarnai dengan kode dari bab sebelumnya, membiarkan sisa teks apa adanya.

Dalam contoh ini, jika saya hanya perlu mewarnai persentasenya saja (tanpa kata "diskon"), saya akan membuka kode HTML, memilih bagian yang tidak perlu diwarnai ("diskon" dalam kasus kita) dan memindahkannya keluar dari tag:

Jika Anda melakukan persiapan pewarnaan sejak awal, ingatlah bahwa teks berwarna masa depan menggantikan TEXT_TO_BE_COLORED Sisanya tetap setelah akhir. Berikut ini adalah HTML saya yang telah diperbarui:

Contoh header 1

Contoh header 2

Contoh header 3

~%WhatToEnter[{dataset:'Dataset dengan diskon', kolom:'Diskon', judul:'Pilih diskon'}] diskon

Lihat? Saya telah menempatkan hanya sebagian dari konten sel saya di dalam tag, sehingga hanya bagian ini yang akan diwarnai saat menempel.

Menerapkan pemformatan bersyarat ke sel tabel

Sekarang mari kita ubah sedikit tugasnya dan mencoba menyorot bukan teks tetapi seluruh latar belakang sel dalam tabel sampel yang sama.

Sorot satu sel

Karena saya memodifikasi tabel yang sama, saya tidak akan mengulanginya lagi dan menempelkan kode HTML dari tabel asli di bab ini juga. Gulir ke atas sedikit atau lompat langsung ke contoh pertama tutorial ini untuk melihat kode tabel yang tidak berubah dari tabel yang tidak berwarna.

Jika saya ingin menaungi latar belakang sel dengan diskon, saya juga perlu sedikit memodifikasi HTML, tetapi modifikasinya akan berbeda dari pewarnaan teks. Perbedaan utamanya adalah bahwa warna harus diterapkan bukan pada teks tetapi ke seluruh sel.

Sel yang akan disorot terlihat seperti itu dalam format HTML:

Karena saya ingin menyorot sel, perubahan harus diterapkan pada atribut sel, bukan pada teks. Saya akan memecah baris di atas menjadi beberapa bagian, mengklarifikasi masing-masing dan menunjuk ke bagian yang perlu diubah:

• "style=" berarti bahwa sel baris memiliki properti gaya berikut. Di sinilah kita mengambil jeda pertama. Karena saya akan mengatur warna latar belakang kustom, saya mengubah gaya untuk gaya set-data .
• "lebar: 32.2925%; perbatasan: 1px hitam pekat;" - Itu adalah properti gaya default yang saya maksud di atas. Saya perlu menambahkan satu lagi untuk menyesuaikan latar belakang sel yang dipilih: warna latar belakang Karena tujuan saya adalah memilih warna yang akan digunakan dari daftar dropdown, saya kembali ke persiapan saya dan mengambil WhatToEnter yang sudah siap dari sana.

Tip. Jika Anda ingin sel dicat dalam satu warna dan tidak ingin daftar dropdown mengganggu Anda setiap saat, cukup ganti makro dengan nama warna ("biru", misalnya). Ini akan terlihat seperti itu: ~%WhatToEnter[{dataset:'Dataset dengan diskon', kolom:'Diskon', judul:'Pilih diskon'}] diskon

• " ~%WhatToEnter[] diskon " adalah isi sel.

Jadi, inilah tampilan HTML yang diperbarui:

Sisa tabel lainnya tetap seperti apa adanya. Ini dia HTML yang dihasilkan yang akan menyorot sel dengan tingkat persentase:

Contoh header 1

Contoh header 2

Contoh header 3

~%WhatToEnter[{dataset:'Dataset dengan diskon', kolom:'Diskon', judul:'Pilih diskon'}] diskon

Ketika saya menyimpan perubahan ini dan menempelkan tabel yang diperbarui di email, saya akan mendapatkan daftar dropdown dengan diskon dan sel pertama akan disorot sesuai rencana.

Warna seluruh baris

Ketika satu sel tidak cukup, saya mengecat seluruh baris :) Anda mungkin berpikir bahwa Anda harus menerapkan langkah-langkah dari bagian di atas untuk semua sel dalam satu baris. Saya akan buru-buru mengecewakan Anda, prosedurnya akan sedikit berbeda.

Dalam instruksi di atas, saya telah menunjukkan kepada Anda cara memperbarui latar belakang sel dengan memodifikasi bagian HTML sel ini. Karena sekarang saya akan mengecat ulang seluruh baris, saya harus mengambil baris HTML-nya dan menerapkan perubahan langsung ke sana.

Sekarang bebas opsi dan terlihat seperti . Saya harus menambahkan data-set-style= dan tempelkan WHAT_TO_ENTER saya di sana. Hasilnya, baris akan terlihat seperti di bawah ini:

Dengan demikian, seluruh HTML tabel dengan sel yang akan dicat akan terlihat seperti ini:

Contoh header 1

Contoh header 2

Contoh header 3

~%WhatToEnter[{dataset:'Dataset dengan diskon', kolom:'Diskon', judul:'Pilih diskon'}] diskon

Jangan ragu untuk menyalin HTML ini untuk templat Anda sendiri untuk memastikannya berfungsi seperti yang saya jelaskan. Atau, percayalah pada tangkapan layar di bawah ini :)

Simpulkan

Itu saja yang ingin saya ceritakan tentang pemformatan bersyarat di tabel Outlook hari ini. Saya menunjukkan kepada Anda cara mengubah warna konten sel dan menyorot latar belakangnya. Semoga saya berhasil meyakinkan Anda bahwa tidak ada yang istimewa dan sulit dalam memodifikasi HTML templat dan Anda akan menjalankan beberapa eksperimen lukisan Anda sendiri;)

FYI, alat ini dapat diinstal dari Microsoft Store pada PC, Mac atau tablet Windows Anda dan digunakan pada semua perangkat Anda secara bersamaan.

Jika Anda memiliki pertanyaan atau, mungkin, saran tentang format tabel, silakan beritahu saya di Komentar. Saya akan senang mendengar kembali dari Anda!