Coloring table rows in Azure Wiki - azure-devops

How can I create colored rows in table in Azure Devops Wiki? I want to create something like below
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped tr:nth-child(even) td {
background-color: #4287f5;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</div>
The main way of creating tables in Azure Wiki is Markdown table, and from what I found is that Markdown does not support color. Maybe there is any trick?
From Azure Wiki Syntax Help I found out that HTML tags and YAML tables are also supported, but everything that I was able to achieve is coloring via span tag inside markdown:
<span style="background-color: red">57065</span>|<span style="background-color: red">4560</span>|<span style="background-color: red">I AM TABLE ROW</span>
and that looks ugly.
Is there a way to achieve full-fledged coloring?

Try with inline styling. Here I made an example:
<table style="border:ridge 4px red">
<tr style="background-color:blue;color:white;" id="ROW1">
<td style="border:ridge 4px red" >Cell 1.1</td>
<td style="border:ridge 4px red">Cell 1.2</td>
<td style="border:ridge 4px red">Cell 1.3</td>
</tr>
<tr style="background-color:yellow;color:green;" id="ROW2">
<td style="border:ridge 4px red">Cell 2.1</td>
<td style="border:ridge 4px red">Cell 2.2</td>
<td style="border:ridge 4px red">Cell 2.3</td>
</tr>
</table>
It looks like that in Azure DevOps Wiki:
I hope it will help you, but.. I strongly encourage to keep markdown simple. Please take a look at this stack discussion: Color in Markdown

Related

Custom Email Template in Campaign Monitor for Outlook

How can I solve the Outlook problem in my custom html template. What I currently have:
<table cellpadding="0" cellspacing="0" width="700" align="center">
<tr>
<td style="width:100%;display:block;" align="left">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:40px;v-text-anchor:middle;width:170px;" strokecolor="#ce162e" fillcolor="#ffffff">
<w:anchorlock/>
<center>
<singleline label='Button Title'>Read More</singleline>
</center>
</v:rect>
<![endif]-->
<a href="https://" style="border:2px solid red;text-decoration:none;">
<singleline label="Button Title">Read More</singleline>
</a></td>
</tr>
</table>
If an outlook mail client opens the mail, I can see the CTA, but if I edit the CTA text in the editor in Campaign Monitor, the changes only apply to non-Outlook mail clients. Is there a way to solve that problem?
Many thanks in advance.
Bests,
Yanick
Since you are using custom email template, you can replace your VML button with the one below. This button will work the same across all email clients. It will eliminate the issue you are facing in campaign monitor as well.
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> Call to action </td>
</tr>
</table>

<hr> tag not working in email template for outlook 2013

I have developed an email template. Everything is working fine in my email template except the hr tag in Outlook 2013.
I have attached images
Result which i am getting:
Result which i want:
Please help me with suitable codes.
The <hr> is inconsistently supported in email clients. It's easier to do a horizontal rule in email by using a <table> tag, something like this:
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="background:black; height:1px;>
<tr>
<td style="font-size:0; line-height:0;">
</td>
</tr>
</table>
It might seem like a lot of code for simple <hr>, but you'll get the best email client coverage by using <table>s.
In my case, the layout showed strange horizontal lines on Outlook 2010-2019.
To avoid that, this code works for me:
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr width="100%">
<td width="100%" style="width: 100%; border-top: 1px solid #ffffff; padding-bottom: 1px;">
</td>
</tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<hr align="left" style="border: 0px; border-top: 1px solid #ffffff; color: #ffffff; background: #ffffff; margin: 0px;"/>
<!--<![endif]-->
An alternative to using <hr> in email clients is the following, which produces a similar effect, i.e., a thin horizontal line:
<div style="background: #d9d9d9; font-size: 1px; line-height: 1px;"> </div>
This has been verified to render properly in Outlook 2016, but should also work in 2013.

HTML emails - do fonts cascade?

If I specify Arial as the font for a table, will that cascade down as the default font for all cells/tables within the table?
E.g would this work consistently among popular email clients?
<table align="left" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
<table width="100%">
<tr>
<td>
Another table - would the text here still be Arial?
</td>
</tr>
</table>
</td>
</tr>
</table>
Have just tested in Outlook 2013 and it fails miserably. Not sure how it fairs in the many other better clients but I guess if you want to support the shockingly bad Outlook the answer is to specify styles on every table cell.
It will work for some clients but not for all.. especially in Outlook 2010 and 2013. (same for the percentage of the width)
The best is always to specify the wanted styles and fonts for each <td>
like in the following:
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100%;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 13px;">
Another table - The text here will be formatted for all clients
</td>
</tr>
</table>
</td>
</tr>
</table>
Specifying the font in every new table tag should be sufficient. I'd just copy the style value from your initial table and reuse it for every child table.
You can specify styles on every TD if you want to, but unless something has gone badly wrong (or a new version of Outlook changes this) font styles will apply to all table cells until you enter a new table.
Something like:
<table align="left" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
<table width="100%" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
Another table - would the text here still be Arial?
</td>
</tr>
</table>
</td>
</tr>
</table>

Right border (pipe) for email menu

On our email there is a menu and we would like a border (pipe) between each of the items. I have tried putting in border-right: 1px solid #ffffff in a couple of different places with no luck. How and or where does the border code go?
this is what the code looks like:
<div block="editable" name="Navigation Link 2" description="Style With - color:#FFFFFF; text-decoration:none;" id="navlink2" key="navlink2" display="link">Help</div>
</td>
<td align="center" valign="top" style="display: inline-block; padding: 5px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; border-right:#FFF>
Your HTML doesn't seem complete, you are missing an end quote on your style attribute, and you should really be doing style within a CSS file.
Other than that, your HTML is using border-right:#FFF - you should be using something like border-right: solid #FFF;
Note the style part (solid), you can also use dashed, double, etc... but the default is none so you'll have to specify something.
Border Style reference
Fiddle Demo
If you are still having an issue, it's probably something wrong with your dom structure and you should post a more complete picture.
smerny is right about your code being messy. If you want html to render even remotely right via email you need to make sure that your html is clean. Validators (http://validator.w3.org/) can help with this. There are lots of pit falls to consider when writing html for an email, more than I can get into here, but to address your specific problem one of these methods should work:
Method 1:
<table>
<tbody>
<tr>
<td style="border-right: solid"> Help </td>
<td style="border-right: solid"> Lorem </td>
<td style="border-right: solid"> Ipsum </td>
</tr>
</tbody>
</table>
Method 2:
<style>
td {
border-right: solid;
}
</style>
<table>
<tbody>
<tr>
<td> Help </td>
<td> Lorem </td>
<td> Ipsum </td>
</tr>
</tbody>
</table>
Fiddle

TinyMCE and table borders

In the latest TinyMCE 3.5.8 it seems there's a slight bug with creating a new table.
Clicking the new table button, setting a border, border color, and background color yields this result:
<table style="border-color: #39f30b; border-width: 4px; background-color: #f30b22; width: 250px; height: 135px;" border="4">
<tbody>
<tr> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> </tr>
</tbody>
</table>
Right clicking on the table, selecting table proeprties, not doing anything else and hitting apply, then changes the markup to this:
<table style="border-color: #39f30b; border-width: 4px; background-color: #f30b22; width: 250px; height: 135px; border-style: solid;" border="4">
<tbody>
<tr> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> </tr>
</tbody>
</table>
The problem is that the first one is missing the border-style: solid; The initial table, missing the border-style: solid; is breaking IE9, and affecting the display in Firefox.
Is there any sort of setting or patch to fix this?