Enhavtabelo
En ĉi tiu artikolo vi vidos kiel apliki kondiĉan formatadon al la randoj de tabeloj en Outlook. Mi montros al vi kiel ŝanĝi ilian koloron, larĝecon kaj stilon. Tiam mi instruos vin kiel fari plurajn modifojn samtempe kaj kolorigi vian Outlook-tabelon en multaj malsamaj manieroj.
Unue, mi ŝatus fari malgrandan kapnoton por ĉi tiu blogo novuloj. Ĉar hodiaŭ ni parolos pri kondiĉa formatado en ŝablonoj, mi montros al vi kiel ĝuste agordi ilin uzante nian aldonaĵon kun Komunaj Retpoŝtaj Ŝablonoj por Outlook. Ĉi tiu ilo povas helpi vin alglui antaŭkonservitajn perfekte formatitajn ŝablonojn al viaj retpoŝtoj kaj malpligrandigi vian korespondan rutinon je kelkaj klakoj.
Se vi jam legis mian lernilon pri Kondiĉa formatado en Outlook-tabeloj, vi scias. kiel ŝanĝi la enhavon kaj fonkoloron de la ĉeloj. Tamen tio ne estas ĉio, kion vi povas fari por heligi vian Outlook-tabelon. Hodiaŭ mi montros al vi la manierojn por kondiĉe kolorigi la randojn de via tablo kaj modifi ilian larĝon kaj stilon.
Cetere, malgranda bonuso atendas vin en la lasta ĉapitro kie mi montros al vi kiel apliki plurajn modifojn. samtempe kaj faru vian tablon tiel bunta kaj hela kiel la artfajraĵo en la 4-a de julio ;)
Ŝanĝu la koloron de ĉelaj randoj
Por montri al vi kiel funkcias la pentraĵo de la randoj, Mi uzos la samajn specimenojn de la pasintsemajna lernilo. La kazo estas jena: mi algluas aMicrosoft-teamo, bonvolu kontroli ilian respondon en ĉi tiu GitHub-konversacio :)
Fina noto
Mi vere esperas, ke mi sukcesis konvinki vin, ke tablo en Outlook ne estas nur nigraj randoj kun simplaj. teksto. Estas multe da loko por plibonigo kaj kreemo :)
Kiam vi decidas fari viajn proprajn eksperimentojn pri pentrado, simple instalu Komunajn Retpoŝtajn Ŝablonojn de Microsoft Store kaj ĝuu!
Se ekzistas iuj demandoj restantaj de vi bezonas iom da helpo pri kondiĉa formatado en Outlook-tabeloj, simple lasu kelkajn vortojn en la sekcio de Komentoj kaj ni eltrovos ĝin ;)
ŝablono kaj elektu la rabatan indicon por plenigi la tabelon. Laŭ mia elekto, la randoj de la ĉelo estos kolorigitaj en la aparta koloro.La tabelo, kiun mi koloros hodiaŭ, estus tiu ĉi sube:
Ekzempla kaplinio 1 | Ekzempla kaplinio 2 | Ekzempla kaplinio 3 |
~%WhatToEnter[ {dataset:'Datumaro kun rabatoj', kolumno:' Rabato', title:'Elektu rabaton'} ] rabato |
Ĉar kondiĉa formatado estas pritraktata en HTML de ŝablonoj, ni unue malfermu la HTML-kodon de ĉi tiu tabelo:
- Malfermu la interesan ŝablonon kaj premu Redakti :
- Trovu la Vidi HTML pikonon ( ) sur la ilobreto de la ŝablono:
- Vidu la originalan HTML kiu estos modifita plurfoje:
Se vi scivolas pri la koloroj kaj ilia rilato kun rabataj tarifoj, mi donos al vi indikon :) Datumararo! Ne havas ideon, kio ĝi estas? Poste faru malgrandan paŭzon kaj legu unue mian lernilon pri Plenigeblaj Outlook-ŝablonoj.
Jen la origina datumaro, kiun mi uzos komence kaj iomete plibonigos en kelkaj ĉapitroj:
Rabato | Kolorkodo |
10% | #00B0F0 |
15 % | #00B050 |
20% | #FFC000 |
25% | >#4630A0 |
Kiam mi bezonas preni la necesan kolorkodon de ĉi tiu tabelo, mi uzos la jenan makroon:
~%WhatToEnter[{dataset:'Datumaro kun rabatoj',column:'Kolorkodo'}]Ĉar ni havas ĉiujn bazaĵojn kovritaj, ni komencu ŝanĝi kolorojn :)
Ĝisdatigu la randkoloron de unu ĉelo
Por kolorigi la randojn de ununura ĉelo en tabelo, ni unue trovu ĝian linion en la HTML de la ŝablono kaj rigardu pli detale ĝiajn komponantojn:
- “ style= ” reprezentas la aron de bazaj parametroj de ĉelo.
- “larĝo: 32%; bordo: 1px solida #aeabab ” estas la larĝo, koloro kaj stilo de la ĉelo kaj limo.
- “~%WhatToEnter[] rabato” estas la enhavo de la ĉelo.
Ĉi tiu kodlinio signifas, ke mi vidos ĉelon kun 1px grizaj randoj de solida stilo. Se mi anstataŭigas iun el tiuj parametroj, ĝi povas korupti la aspekton de la tabelo en mia ŝablono, t.e. la randoj estos nevideblaj (kvankam ĉio aspektos perfekte post gluado).
Mi ŝatus havi normon. tabelo en ŝablono kaj modifi ĝin dum algluado. Do, mi aldonas unu novan atributon kun la parametroj, kiuj anstataŭigos la originalajn algluante:
Ni ekzamenu la HTML-linion supre:
- “ style="border : 1px solid #aeabab;" estas la unua eco. Tiuj estas la originalo de la ĉelokarakterizaĵoj.
- “ data-set-style= ” estas speciala parametro, kiu helpos min anstataŭigi la supran atributon per la necesa aro da propraĵoj dum algluado.
- “ bordo:1px solida; border-color: ” estas la parto de la dua eco, kie ni faros paŭzon. Vidu, la komenco estas identa al la originalo, la sama limlarĝo kaj stilo. Tamen, se temas pri la koloro (la parametro, kiun mi volas ŝanĝi), mi anstataŭigas ĝin per border-color: kaj algluas la makroon WhatToEnter. Tial, depende de la menua elekto, la makroo estos anstataŭigita per la kolorkodo kaj la rando estos repentrita.
- “~%WhatToEnter[] rabato” estas ankoraŭ la enhavo de la ĉelo, kiu ne postulas ŝanĝojn.
Sekve, la plena HTML kun la estontekolora ĉelo aspektos jene:
Kiam vi algluas ĉi tiun ŝablonon , la rando de la ĝisdatigita ĉelo tuj estos kolorigita en la elektita koloro:
Pentri randojn de tuta vico
Nun ni pentru la randojn sur la tuta vico de nia specimena tablo kaj vidu kiel ĝi funkcias. La logiko estas absolute la sama kiel en laalineo supre krom ke vi devos ĝisdatigi ĉiujn ĉelojn de la dua vico. Post kiam la samaj modifoj, kiujn mi kovris supre, estas aplikataj al la tuta vico, ĝi fariĝas palpebrumante dum algluado de la ŝablono.
Se vi ŝatus rigardi la preta HTML kun la dua vica kolorigo, jen ĝi iras:
3>
Ŝanĝi randan larĝon
Nun ni provu ĝisdatigi ne nur randkoloron sed ankaŭ ĝian larĝon. Rigardu ankoraŭ la HTML-atributon, kiu anstataŭigas la originalan algluante:
data-set-style="border: 1 px solid; border-color:~%WhatToEnter[{dataset:' Datumaro kun rabatoj',column:'Kolorkodo'}]">~%WhatToEnter[{dataset:'Datumaro kun rabatoj',column:'Rabato',title:'Elektu rabaton'}] rabatoVidu la 1px parametro? Ĉi tio estas la larĝo de la kolorbordoj. Vi povas mane ŝanĝi ĝin al, ekzemple, 2 kaj la tabelbordoj fariĝos pli larĝaj post kiam vi algluos ĝin.
Tamen, mi faros ĝin alimaniere. Mi ĝisdatigos mian datumaron kaj aldonos novan kolumnon kun larĝeco de randoj. En ĉi tiu kazo, kiam mi elektos nunan indicon por alglui, ambaŭ koloroj kaj larĝo estosĝisdatigita.
Rabato | Kolorkodo | Larĝo de la bordo |
10% | #00B0F0 | 2 |
15% | #00B050 | 2.5 |
20% | #FFC000 | 3 |
25% | #4630A0 | 3.5 |
Nun ni modifi la duan atributon de ĉiu linio kaj anstataŭigu 1px per la sekva teksto:
border-width:~%WhatToEnter [{dataset:'Dataserio kun rabatoj',column:'Bordolarĝo'}]Tiam mi ripetas ĝin por ĉiuj tri ĉeloj de la dua vico kaj ricevas la jenan HTML en la rezulto:
Post kiam ĉi tiu ŝablono estas konservita kaj algluita, la plilarĝigitaj bluaj randoj aperos en retpoŝto:
Modifu randman stilon en tabelo
En ĉi tiu ĉ Apter mi ŝatus atentigi vin pri alia parametro - stilo. Ĉi tiu pritraktos la liman aspekton. Antaŭ ol mi montros al vi kiel ĝuste apliki ĝin, mi devos reveni al mia datumaro kaj modifi ĝin laŭ mia nuna kazo.
Rabato | Limo.stilo |
10% | Disstrekita |
15% | Duobla |
20% | Punktita |
25% | Kresto |
Mi asociis ĉiun rabatan indicon kun limstilo kaj konservis ĉi tiun datumaron por la estonteco. La makroo por retrovi la stilon por mia HTML estus tiu ĉi sube:
~%WhatToEnter[{dataset:"Dataserio kun rabatoj",column:"Borda stilo"}]Nun mi devos ĝisdatigi la la atributojn de la dua vico anstataŭigante solidan (la defaŭltan stilon, kiun mi ĉiam uzis) per la supra makroo por akiri la sekvan kodon:
data-set-style="border: 1px #aeabab; border-style: ~%WhatToEnter[{dataset:'Datumaro kun rabatoj',column:'Borda stilo'}]Jen la fina HTML:
Se vi kopias ĉi tiun HTML kaj algluas al viaj ŝablonoj, la rezulto ne atendos vin:
Agordu kondiĉan formatadon por ŝanĝi samtempe reliefigon, tekstkoloron kaj larĝon de randoj
Ni atingis la plej intereson ting parto ĉar mi tuj montros al vi kiel apliki plurajn modifojn samtempe. Unue, mi ĝisdatigos la datumaron, el kiu mi prenos la datumojn.Ĉar mi decidis ŝanĝi la reliefigon de la ĉeloj, tekstkoloron kaj larĝon de randoj, ĉiuj tiuj parametroj devas esti specifitaj. Tial mia nova datumaro aspektus tiel:
Rabato | Kolorkodo | Fona kodo | Bordolarĝo |
10% | #00B0F0 | #DEEBF6 | 2 |
15 % | #00B050 | #E2EFD9 | 2.5 |
20% | #FFC000 | #FFF2CC | 3 |
25% | #4630A0 | #FBE5D5 | 3.5 |
Do, se mi elektas 10%, la necesa teksto estos blue pentrita (# 00B0F0 ), la fono de la elektitaj ĉeloj estos ombrita en helblua tono (# DEEBF6 ) kaj iliaj randoj estos larĝigitaj dufoje.
Sed kiel ĉi tiu datumaro povas esti konektita al Outlook-tabelo por ke ĝi estu formatita? Mi preparis vin por ĉi tiu tasko en 2 artikoloj :) Jen la HTML, kiu pritraktos ĉiujn necesajn modifojn:
Nun ni rigardu ĉiujn aplikatajn modifojn:
- Ekzempla kaplinio 1 - ĉi tiu peco pentros la kaptekston en koloro el la kolumno “Kolorkodo”. Se vi sentaskiel vi bezonas refreŝigi vian memoron pri la teksta pentraĵo, raportu al la Ŝanĝi la tiparkoloron de teksto en la tabelĉapitro de mia antaŭa lernilo.
- data-set-style="background-color:~%WhatToEnter[ {dataset:'Datumaro kun rabatoj',column:'Fona kodo',title:'Elektu rabaton'}] - ĉi tiu parto ĝisdatigas la fonkoloron, prenante sian kodon el la kolumno Fonkodo de la datumaro. Bonvolu rigardi la lernilon Highlight cells se vi sentas, ke vi bezonas pli detalan priskribon de ĉi tiu kazo.
- data-set-style="border: solid #aeabab; border-width:~%WhatToEnter[{dataset:'Datumaro kun rabatoj',column:'Bordolarĝo'}] – kun ĉi tiu HTML-linio la larĝo de randoj estos ŝanĝita al tiu specifita en la Bordolarĝo Mi pli frue pritraktis ĝin, vi eble rigardos, se vi maltrafis ion.
Kiam mi algluas ŝablonon kun tiuj atributoj aldonitaj, la rezulto ne atendos min:
Estas eta noto, kiun mi ŝatus fari antaŭ ol fermi ĉi tiun temon. Dum mi provis kolorigon de randoj en tabeloj, mi alfrontis sufiĉe ambiguan konduton de limoj en ambaŭ interreta kaj labortabla versioj de Outlook. Estante iomete konfuzita, mi atingis niajn programistojn por klarigo. Ili eksciis, ke malsamaj Outlook-klientoj prezentas tabelojn en malsamaj manieroj kaj la kialo de tia konduto estas cimo en Outlook.
Nia teamo raportis ĉi tiun problemon al