Tukar warna, lebar, dan gaya sempadan dalam jadual Outlook

Dalam artikel ini, anda akan melihat cara memohon pemformatan bersyarat ke sempadan Jadual di Outlook. Saya akan menunjukkan kepada anda bagaimana menukar warna, lebar dan gaya mereka. Kemudian saya akan mengajar anda bagaimana membuat beberapa pengubahsuaian pada satu masa dan mewarnai jadual Outlook anda dalam pelbagai cara.

• Tukar warna sempadan sel
  • Kemas kini warna sempadan satu sel
  • Sempadan cat seluruh baris
• Tukar lebar sempadan
• Ubah suai gaya sempadan dalam jadual
• Sediakan pemformatan bersyarat untuk menukar penonjolan, warna teks dan sempadan lebar pada masa yang sama
• Nota akhir

Mula -mula, saya ingin membuat headnote kecil untuk pendatang baru blog ini. Seperti hari ini, kami akan bercakap mengenai pemformatan bersyarat dalam templat, saya akan menunjukkan kepada anda bagaimana untuk menetapkannya dengan betul menggunakan templat e-mel bersama kami untuk Outlook. Alat ini dapat membantu anda menampal templat yang telah diselaraskan dengan sempurna ke e-mel anda dan mengecilkan rutin korespondensi anda kepada beberapa klik.

Jika anda sudah membaca tutorial Formatting Conditional Formatting saya dalam Tutorial Outlook, anda tahu bagaimana untuk menukar kandungan sel dan warna latar belakang. Walau bagaimanapun, itu bukan semua yang boleh anda lakukan untuk mencerahkan jadual Outlook anda. Hari ini saya akan menunjukkan cara untuk mewarnai sempadan meja anda dan mengubah suai lebar dan gaya mereka.

Lebih -lebih lagi, bonus kecil sedang menunggu anda dalam bab terakhir di mana saya akan menunjukkan kepada anda cara memohon beberapa pengubahsuaian pada masa yang sama dan menjadikan meja anda berwarna -warni dan cerah seperti bunga api pada ^4hb Julai;)

Tukar Warna Sel Sempadan

Untuk menunjukkan kepada anda bagaimana lukisan Borders berfungsi, saya akan menggunakan sampel yang sama dari tutorial minggu lepas. Kes ini adalah yang berikut: Saya menyisipkan templat dan pilih kadar diskaun untuk mengisi jadual. Bergantung pada pilihan saya, sempadan sel akan berwarna dalam warna tertentu.

Jadual yang saya pewarna hari ini akan menjadi yang di bawah:

Header Contoh 1	Header Contoh 2	Header Contoh 3
~%Whattoenter [{dataset: 'dataset dengan diskaun', lajur: 'diskaun', tajuk: 'pilih diskaun'}] diskaun

Oleh kerana pemformatan bersyarat dikendalikan dalam HTML templat, mari kita buka kod HTML jadual ini terlebih dahulu:

1. Buka templat minat dan tekan Edit :

   

2. Cari ikon html paparan ( ) pada bar alat templat:

   

3. Lihat HTML asal yang akan diubahsuai beberapa kali:

   

Jika anda tertanya -tanya tentang warna dan sambungan mereka dengan kadar diskaun, saya akan memberi anda petunjuk :) dataset! Tidak tahu apa itu? Kemudian ambil jeda kecil dan baca tutorial Templat Outlook saya terlebih dahulu.

Berikut adalah dataset asal yang saya akan gunakan pada mulanya dan memperbaiki sedikit dalam beberapa bab:

Diskaun	Kod warna
10%	#00B0F0
15%	#00B050
20%	#FFC000
25%	#4630A0

Apabila saya perlu mengambil kod warna yang diperlukan dari jadual ini, saya akan menggunakan makro berikut:

~%Whattoenter [{dataset: 'dataset dengan diskaun', lajur: 'COLOR CODE'}]

Seperti yang kita ada asas yang dilindungi, mari kita mula berubah warna :)

Kemas kini warna sempadan satu sel

Untuk mewarnai sempadan sel tunggal dalam jadual, mari kita mula -mula mencari garisannya di HTML templat dan lihatlah komponennya:

~%whattoenter [{dataset: 'dataset dengan diskaun', lajur: 'diskaun', tajuk: 'pilih diskaun'}] diskaun

• " Gaya = " mewakili set parameter asas sel.
• "Lebar: 32%; Sempadan: 1px Pepejal #Aeabab " adalah lebar, warna dan gaya sempadan.
• "~%Whattoenter [] diskaun" adalah kandungan sel.

Barisan kod ini bermakna saya akan melihat sel dengan sempadan kelabu 1px dengan gaya pepejal. Sekiranya saya menggantikan mana -mana parameter tersebut, ia mungkin merosakkan penampilan meja dalam templat saya, iaitu sempadan akan tidak kelihatan (walaupun semuanya akan kelihatan sempurna selepas menampal).

Saya suka mempunyai jadual standard dalam templat dan memodifikasi ketika menampal. Oleh itu, saya menambah satu atribut baru dengan parameter yang akan menggantikan yang asal semasa menampal:

~%whattoenter [{dataset: 'dataset dengan diskaun', lajur: 'diskaun', tajuk: 'pilih diskaun'}] diskaun

Mari kita periksa garis HTML di atas:

• " Adalah atribut pertama. Ini adalah ciri -ciri asal sel.
• " Data-set-style = " adalah parameter khas yang akan membantu saya menggantikan atribut di atas dengan set sifat yang diperlukan semasa penampakan.
• " Sempadan: 1px pepejal; Border-color: " adalah bahagian atribut kedua di mana kita akan mengambil jeda. Lihat, permulaan adalah sama dengan yang asal, lebar dan gaya sempadan yang sama. Walau bagaimanapun, apabila ia datang kepada warna (parameter yang saya mahu ubah), saya menggantikannya dengan warna sempadan: dan tampal makro Whattoenter. Oleh itu, bergantung kepada pilihan dropdown, makro akan digantikan dengan kod warna dan sempadan akan dicat semula.
• "~%Whattoenter [] diskaun" masih kandungan sel yang tidak memerlukan sebarang perubahan.

Oleh itu, HTML penuh dengan sel berwarna masa depan akan kelihatan seperti ini:

header sampel 1

header sampel 2

Header Contoh 3

~%whattoenter [{dataset: 'dataset dengan diskaun', lajur: 'diskaun', tajuk: 'pilih diskaun'}] diskaun

& nbsp;

& nbsp;

Apabila anda menampal templat ini, sempadan sel yang dikemas kini akan berwarna dalam warna yang dipilih dengan segera:

Sempadan cat seluruh baris

Sekarang mari kita cat sempadan di seluruh barisan meja sampel kami dan lihat bagaimana ia berfungsi. Logik sama sekali sama seperti dalam perenggan di atas kecuali bahawa anda perlu mengemas kini semua sel baris kedua. Sebaik sahaja pengubahsuaian yang sama yang saya tutupi di atas digunakan untuk keseluruhan baris, ia akan dicat dengan mengedipkan mata apabila menampal templat.

Sekiranya anda ingin melihat HTML yang siap dengan pewarna baris kedua, di sini ia pergi:

header sampel 1

header sampel 2

Header Contoh 3

~%whattoenter [{dataset: 'dataset dengan diskaun', lajur: 'diskaun', tajuk: 'pilih diskaun'}] diskaun

& nbsp;

& nbsp;

Tukar lebar sempadan

Sekarang mari kita cuba mengemas kini bukan sahaja warna sempadan tetapi juga lebarnya. Ambil satu lagi melihat atribut HTML yang menggantikan yang asal semasa menampal:

data-set-> ~%whattoenter [{dataset: 'dataset dengan diskaun', lajur: 'diskaun', tajuk: 'pilih diskaun'}] diskaun

Lihat parameter 1px ? Ini adalah lebar sempadan yang akan berwarna. Anda boleh mengubahnya secara manual, katakan, 2 dan sempadan meja akan menjadi lebih luas apabila anda menampalnya.

Walau bagaimanapun, saya akan melakukannya dengan cara lain. Saya akan mengemas kini dataset saya dan menambah lajur baru dengan lebar sempadan. Dalam kes ini, sebaik sahaja saya memilih kadar semasa untuk menampal, kedua -dua warna dan lebar akan dikemas kini.

Diskaun	Kod warna	Lebar sempadan
10%	#00B0F0	2
15%	#00B050	2.5
20%	#FFC000	3
25%	#4630A0	3.5

Sekarang mari kita mengubah suai atribut kedua setiap baris dan ganti 1px dengan sekeping teks berikut:

lebar sempadan: ~%whattoenter [{dataset: 'dataset dengan diskaun', lajur: 'lebar sempadan'}]

Kemudian saya mengulanginya untuk semua tiga sel baris kedua dan dapatkan HTML berikut dalam hasilnya:

header sampel 1

header sampel 2

Header Contoh 3

~%whattoenter [{dataset: 'dataset dengan diskaun', lajur: 'diskaun', tajuk: 'pilih diskaun'}] diskaun

& nbsp;

& nbsp;

Sebaik sahaja templat ini disimpan dan disisipkan, sempadan biru melebar akan muncul dalam e -mel:

Ubah suai gaya sempadan dalam jadual

Dalam bab ini saya ingin menarik perhatian anda kepada parameter lain - gaya. Ini akan mengendalikan penampilan sempadan. Sebelum saya menunjukkan kepada anda bagaimana untuk menerapkannya dengan betul, saya perlu kembali ke dataset saya dan mengubahnya mengikut kes saya sekarang.

Diskaun	Gaya sempadan
10%	Putus -putus
15%	Ganda
20%	Dotted
25%	Ridge

Saya telah mengaitkan setiap kadar diskaun dengan gaya sempadan dan menyimpan dataset ini untuk masa depan. Makro untuk mengambil gaya untuk HTML saya akan menjadi yang di bawah:

~%Whattoenter [{dataset: "dataset dengan diskaun", lajur: "gaya sempadan"}]

Sekarang saya perlu mengemas kini atribut baris kedua dengan menggantikan pepejal (gaya lalai yang saya gunakan sepanjang masa) dengan makro di atas untuk mendapatkan sekeping kod berikut:

Data-set lebar: 100%; Sempadan-keruntuhan: runtuh; gaya sempadan: pepejal; Border-color: #aeabab; "Border =" 1px ">

header sampel 1

header sampel 2

Header Contoh 3

~%whattoenter [{dataset: 'dataset dengan diskaun', lajur: 'diskaun', tajuk: 'pilih diskaun'}] diskaun

& nbsp;

& nbsp;

Jika anda menyalin HTML dan tampal ini ke templat anda, hasilnya tidak akan membuat anda menunggu:

Sediakan pemformatan bersyarat untuk menukar penonjolan, warna teks, dan lebar sempadan pada masa yang sama

Kami telah mencapai bahagian yang paling menarik kerana saya akan menunjukkan kepada anda cara memohon pelbagai pengubahsuaian pada satu masa. Mula -mula, saya akan mengemas kini dataset saya akan mengambil data dari. Oleh kerana saya memutuskan untuk menukar sel -sel, warna teks dan sempadan lebar, semua parameter tersebut perlu ditentukan. Oleh itu, dataset baru saya akan kelihatan seperti itu:

Diskaun	Kod warna	Kod latar belakang	Lebar sempadan
10%	#00B0F0	#Deebf6	2
15%	#00B050	#E2efd9	2.5
20%	#FFC000	#Fff2cc	3
25%	#4630A0	#Fbe5d5	3.5

Jadi, jika saya memilih 10%, teks yang diperlukan akan dicat dengan warna biru (# 00B0F0 ), latar belakang sel -sel yang dipilih akan diwarnai dalam nada biru muda (# Deebf6 ) dan sempadan mereka akan diperluaskan dua kali.

Tetapi bagaimana dataset ini boleh disambungkan ke jadual Outlook supaya ia diformat? Saya telah mempersiapkan anda untuk tugas ini dalam 2 artikel :) di sini pergi HTML yang akan mengendalikan semua pengubahsuaian yang diperlukan:

Data-siet->

Sekarang mari kita lihat semua pengubahsuaian yang digunakan:

• Header Sample 1 -Sekeping ini akan melukis teks header dalam warna dari lajur "Color Code". Sekiranya anda merasa seperti anda perlu menyegarkan ingatan anda pada lukisan teks, rujuk kepada perubahan warna fon teks dalam bab jadual tutorial terdahulu saya.
• Data-set-warna: Ungu; "> Data-set" Decoding = "Async" Title = "Beberapa pengubahsuaian yang digunakan pada jadual dan kandungannya dalam satu klik." src = "https://cdn.abebits.com/_img-blog/table-borders/multiple-formatting.png" alt = "beberapa pengubahsuaian yang digunakan untuk jadual dan kandungannya dalam satu klik." lebar = "640" ketinggian = "566" /> Terdapat nota kecil yang saya ingin buat sebelum menutup topik ini. Semasa saya menguji sempadan mewarna dalam jadual saya menghadapi kelakuan sempadan yang agak samar -samar di kedua -dua versi Outlook dalam talian dan desktop. Menjadi sedikit keliru, saya sampai ke pemaju kami untuk penjelasan. Mereka mendapati bahawa pelanggan Outlook yang berbeza menjadikan jadual dengan cara yang berbeza dan sebab tingkah laku sedemikian adalah pepijat dalam Outlook.

  Pasukan kami melaporkan isu ini kepada pasukan Microsoft, jangan ragu untuk menyemak respons mereka dalam perbualan GitHub ini :)

  Nota akhir

  Saya sangat berharap saya dapat meyakinkan anda bahawa meja di Outlook bukan hanya sempadan hitam dengan teks biasa. Terdapat banyak ruang untuk penambahbaikan dan kreativiti :)

  Apabila anda membuat keputusan untuk mengambil beberapa eksperimen lukisan anda sendiri, hanya memasang templat e -mel yang dikongsi dari Microsoft AppSource dan nikmati!

  Sekiranya terdapat sebarang soalan yang tersisa daripada anda memerlukan bantuan dengan pemformatan bersyarat dalam jadual Outlook, tinggalkan beberapa perkataan di bahagian komen dan kami akan memikirkannya;)

span data-siet-> header sampel 1	span data-siet-> header sampel 2	span data-siet-> header sampel 3
data-siet-> ~%whattoenter [{dataset: 'dataset dengan diskaun', lajur: 'diskaun', tajuk: 'pilih diskaun'}] diskaun	data-set-> & nbsp;	data-set-> & nbsp;

Atas ialah kandungan terperinci Tukar warna, lebar, dan gaya sempadan dalam jadual Outlook. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!