Outlookテーブルの境界色、幅、スタイルを変更します

この記事では、OutlookのTableの境界線に条件付きフォーマットを適用する方法を確認します。色、幅、スタイルを変更する方法をお見せします。次に、一度にいくつかの変更を加えて、さまざまな方法でOutlookテーブルを色付けする方法をお勧めします。

• 細胞境界の色を変更します
  • 1つのセルの境界色を更新します
  • 列全体の塗装境界
• 境界幅を変更します
• テーブルの境界スタイルを変更します
• 強調表示、テキストの色、境界幅を同時に変更するための条件付き書式設定
• 最終メモ

まず、このブログの新人のために小さなヘッドノートを作りたいと思います。今日のように、テンプレートでの条件付きのフォーマットについて説明します。Outlookの共有電子メールテンプレートアドインを使用して、それらを正しくセットアップする方法を紹介します。このツールは、事前に保存された完全にフォーマットされたテンプレートをメールに貼り付け、通信ルーチンを数回クリックするのに役立ちます。

Outlookテーブルチュートリアルで条件付きフォーマットを既に読んでいる場合は、セルの内容と背景色を変更する方法を知っています。しかし、それはあなたがあなたの見通しテーブルを明るくするためにできることすべてではありません。今日は、テーブルの境界線を条件付けて幅とスタイルを変更する方法を紹介します。

さらに、最後の章では小さなボーナスがあなたを待っています。この章では、7月4^日に花火と同じくらいカラフルで明るいテーブルを同時に適用する方法を示します。）

セルの境界の色を変更します

国境の絵画の仕組みを示すために、先週のチュートリアルから同じサンプルを使用します。ケースは次のとおりです。テンプレートを貼り付けて、テーブルに記入する割引率を選択します。私の選択に応じて、セルの境界線は特定の色で色付けされます。

私が今日着色するテーブルは以下のものになります：

サンプルヘッダー1	サンプルヘッダー2	サンプルヘッダー3
〜％whattoenter [{dataset： 'Dataset with Discounts'、column： '割引'、タイトル： 'Select割引'}]割引

条件付きフォーマットはテンプレートのHTMLで処理されるため、最初にこのテーブルのHTMLコードを開いてみましょう。

1. 関心のあるテンプレートを開き、編集をヒットします。

   

2. テンプレートのツールバーでビューHTMLアイコン（ ）を見つけます：

   

3. 複数回変更される元のHTMLを参照してください。

   

色とそれらの割引率との接続について疑問に思うなら、私はあなたにヒントを与えます:)データセット！それが何であるか分かりませんか？次に、少し一時停止して、最初に私の埋め立て可能なOutlookテンプレートのチュートリアルを読んでください。

最初に使用して、いくつかの章で少し改善する元のデータセットは次のとおりです。

割引	カラーコード
10％	＃00B0F0
15％	＃00B050
20％	＃ffc000
25％	＃4630A0

このテーブルから必要なカラーコードを取得する必要がある場合は、次のマクロを使用します。

〜％whattoenter [{dataset： '割引付きのデータセット'、列： 'カラーコード'}]

すべての基本がカバーされているので、色を変え始めましょう:)

1つのセルの境界色を更新します

テーブル内の単一のセルの境界線を着色するには、まずテンプレートのHTMLでそのラインを見つけて、そのコンポーネントを詳しく見てみましょう。

〜％whattoenter [{dataset： 'Dataset with dataset with discests'、column： '割引'、タイトル： 'select distence'}]割引

• 「 style = 」は、セルの基本パラメーターのセットを表します。
• 「幅：32％、境界線：1px Solid #Aeabab 」は、セルと境界線の幅、色、スタイルです。
• 「〜％whattoenter []割引」はセルのコンテンツです。

このコードラインは、固体スタイルの1pxグレーの境界を持つセルが表示されることを意味します。これらのパラメーターのいずれかを置き換えると、テンプレート内のテーブルの外観が破損する可能性があります。つまり、境界線は目に見えません（すべてが貼り付けられた後に完全に見えます）。

テンプレートに標準のテーブルを持ち、貼り付けたときに変更してもらいたいです。そこで、貼り付けたときに元の属性を置き換えるパラメーターに1つの新しい属性を追加します。

〜％whattoenter [{dataset： 'dataset with discounts with discests'、column： '割引'、タイトル： 'select distence'}]割引

上記のHTML行を調べてみましょう。

• 「最初の属性です。これらはセルの元の特性です。
• 「 Data-Set-Style = 」は、貼り付け中に上記の属性を必要なプロパティセットに置き換えるのに役立つ特別なパラメーターです。
• 「ボーダー：1pxソリッド、ボーダーカラー： 」は、一時停止する2番目の属性の一部です。ほら、始まりはオリジナルの境界幅とスタイルと同じです。ただし、色（変更したいパラメーター）に関しては、ボーダーカラーに置き換えます。したがって、ドロップダウンの選択に応じて、マクロはカラーコードに置き換えられ、境界線は塗り直されます。
• 「〜％whattoenter []割引」は、変更を必要としないセルのコンテンツです。

したがって、将来のセルを使用した完全なHTMLは次のようになります。

サンプルヘッダー1

サンプルヘッダー2

サンプルヘッダー3

〜％whattoenter [{dataset： 'dataset with discounts with discests'、column： '割引'、タイトル： 'select distence'}]割引

＆nbsp;

＆nbsp;

このテンプレートを貼り付けると、更新されたセルの境界線は、すぐに選択した色で色付けされます。

列全体の塗装境界

それでは、サンプルテーブルの列全体に境界を塗り、それがどのように機能するかを見てみましょう。ロジックは、2行目のすべてのセルを更新する必要があることを除いて、上記の段落とまったく同じです。上記の同じ変更が行全体に適用されると、テンプレートを貼り付けるとウィンクに塗装されます。

2列目の着色で準備が整ったHTMLをご覧になりたい場合は、次のようになります。

サンプルヘッダー1

サンプルヘッダー2

サンプルヘッダー3

〜％whattoenter [{dataset： 'dataset with dataset with dataset'、column： '割引'、タイトル： 'Select割引'}]割引

＆nbsp;

＆nbsp;

境界幅を変更します

ここで、境界線の色だけでなく幅も更新してみましょう。貼り付けたときに元の属性を置き換えるHTML属性をもう一度見てみましょう。

data-set->〜％whattoenter [{dataset： 'Dataset with Discounts'、列： '割引'、タイトル： 'Select Distence'}]割引

1pxパラメーターが表示されますか？これは、色にされる境界の幅です。たとえば、2に手動で変更することができ、テーブルの境界線は貼り付けると広くなります。

しかし、私はそれを別の方法でやります。データセットを更新し、境界幅の新しい列を追加します。この場合、現在のレートを選択すると、色と幅の両方が更新されます。

割引	カラーコード	境界幅
10％	＃00B0F0	2
15％	＃00B050	2.5
20％	＃ffc000	3
25％	＃4630A0	3.5

次に、各行の2番目の属性を変更し、 1pxを次のテキストに置き換えましょう。

境界線：〜％whattoenter [{dataset： '割引付きのデータセット'、列： 'border width'}]

次に、2行目の3つのセルすべてについて繰り返し、結果に次のHTMLを取得します。

サンプルヘッダー1

サンプルヘッダー2

サンプルヘッダー3

〜％whattoenter [{dataset： 'dataset with dataset with dataset'、column： '割引'、タイトル： 'Select割引'}]割引

＆nbsp;

＆nbsp;

このテンプレートが保存され、貼り付けされると、広い青い境界線が電子メールに表示されます。

テーブルの境界スタイルを変更します

この章では、別のパラメーターであるスタイルに注意を向けたいと思います。これは、境界の外観を処理します。正しく適用する方法を示す前に、現在のケースに従ってデータセットに戻って変更する必要があります。

割引	ボーダースタイル
10％	ダッシュした
15％	ダブル
20％	点在
25％	リッジ

各割引率を国境スタイルに関連付け、将来のためにこのデータセットを保存しました。私のHTMLのスタイルを取得するマクロは、以下のものです。

〜％whattoenter [{dataset： "割引付きのデータセット"、列： "border style"}]

次に、次のコードを取得するために、SOLID（私がずっと使用してきたデフォルトスタイル）を上のマクロに置き換えることで、2番目の行の属性を更新する必要があります。

データセット幅：100％;国境崩壊：崩壊;ボーダースタイル：ソリッド;境界線：#aeabab; "border =" 1px ">

サンプルヘッダー1

サンプルヘッダー2

サンプルヘッダー3

〜％whattoenter [{dataset： 'dataset with dataset with dataset'、column： '割引'、タイトル： 'Select割引'}]割引

＆nbsp;

＆nbsp;

このHTMLをコピーしてテンプレートに貼り付けた場合、結果はあなたを待ち続けません。

強調表示、テキストの色、境界幅を同時に変更するための条件付きフォーマットを設定する

一度に複数の変更を適用する方法を示しようとしているので、私たちは最も興味深い部分に到達しました。まず、データを取得するデータセットを更新します。セルの強調表示、テキストの色、境界幅を変更することにしたため、これらすべてのパラメーターを指定する必要があります。したがって、私の新しいデータセットは次のようになります。

割引	カラーコード	背景コード	境界幅
10％	＃00B0F0	＃DEEBF6	2
15％	＃00B050	＃e2efd9	2.5
20％	＃ffc000	＃fff2cc	3
25％	＃4630A0	＃fbe5d5	3.5

したがって、10％を選択すると、必要なテキストが青（＃ 00B0F0 ）で塗装され、選択したセルの背景が水色のトーン（＃ DEEBF6 ）で覆われ、それらの境界線が2回拡張されます。

しかし、このデータセットをどのようにOutlookテーブルに接続してフォーマットされるのでしょうか？私はこのタスクの準備を2つの記事で準備してきました:)ここに必要なすべての変更を処理するHTMLがあります：

SPAN DATA-SET->サンプルヘッダー1

SPAN DATA-SET->サンプルヘッダー2

SPAN DATA-SET->サンプルヘッダー3

data-set->

data-set->〜％whattoenter [{dataset： 'dataset with discounts with discests'、column： '割引'、タイトル： 'select distence'}]割引

データセット - >＆nbsp;

データセット - >＆nbsp;

それでは、適用されたすべての変更を見てみましょう。

• サンプルヘッダー1 - このピースは、「カラーコード」列からヘッダーテキストを色でペイントします。テキストペイントでメモリを更新する必要があると感じた場合は、以前のチュートリアルの表の章でテキストのフォント色の変更を参照してください。
• データセットカラー：紫色; ">データセット=レイジー"デコード= "async" title = "テーブルとそのコンテンツにワンクリックで適用されるいくつかの変更。" src = "https://cdn.ablebits.com/_img-blog/table-borders/multiple-formatting.png" alt = "テーブルとそのコンテンツにワンクリックで適用されるいくつかの変更。" width = "640" height = "566" />このトピックを閉じる前に、私がしたい小さなメモがあります。テーブルの境界色の色をテストしている間、Outlookのオンラインバージョンとデスクトップバージョンの両方で、境界線の非常にあいまいな行動に直面しました。少し混乱しているので、私は説明のために開発者に連絡しました。彼らは、異なるOutlookクライアントがさまざまな方法でテーブルをレンダリングし、そのような動作の理由はOutlookのバグであることを発見しました。

  私たちのチームはこの問題をMicrosoftチームに報告しました。このGitHubの会話で彼らの応答を自由にチェックしてください:)

  最終メモ

  Outlookのテーブルは、単純なテキストのある黒人の境界だけではないことをあなたに納得させることができたことを本当に願っています。改善と創造性のための十分なスペースがあります:)

  独自の絵画実験をいくつか撮影する場合は、Microsoft AppSourceから共有電子メールテンプレートをインストールして楽しんでください！

  残りの質問がある場合は、Outlookテーブルの条件付きフォーマットに関する助けが必要な場合は、コメントセクションにいくつかの単語を残してください。

以上がOutlookテーブルの境界色、幅、スタイルを変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。