Need help with formatting output

[Shaguar357]

Would anyone have any advice on how to create the following formatted output?  Thank you in advance!

I need to have the areas in the highlighted orange, added to the output:

This is what I currently have as output:

This is the current flow:

<style>
table {
border-collapse: collapse;
background-color: #EEEEEE;
}
table td {
border: 2px solid #ddd;
padding: 6px 20px;
text-align: left;
font-weight: bold;
}
table th {
display: none;
}
table td:first-child {
}
</style>

[AdrianTorres]

Hi,

I see you’re creating a HTML Table based on the JSON in the Compose action before. However, you can create your table directly in the compose action so it will include the highlighted rows, example:

<table>
<tr>
<td colspan=“2”>First Planned Installation</td>
</tr>
<tr>

<td>Planned Install Date</td>
<td>YourDateExpressionHere</td>

</tr>
</table>

With this, you will no longer need the “Create HTML table” step. Instead, just place the Compose Output into the body of your email, after the <style> Compose output. I hope this helps! 🙂

[Shaguar357]

Hi @AdrianTorres ,

I appreciate you helping me out!  I've started rebuilding the Compose action as suggested.  

Would you know how to get the "First Planned Installation" centered and highlighted in the table?

Thanks again!

[AdrianTorres]

Hi @Shaguar357,

Yes, you can format these rows by giving them some CSS Styling, as you’ve already done in your <style> compose.

To achieve the style from your initial image, add this block to your style:

.highlight {
text-align: center !important;

background-color: #fabd43;

color: #000000;
}

You can then apply this style to any row in your table by assigning it the class as follows:

<table>
<tr>
<td colspan=“2” class=”highlight“>First Planned Installation</td>
</tr>
<tr>

<td>Planned Install Date</td>
<td>YourDateExpressionHere</td>

</tr>
</table>

[Shaguar357]

Hi @AdrianTorres ,

We're getting closer!  Can you tell me how I'd stretch the "First...Second Planned Installation" cells over the second column?  Hope that makes sense! 

[AdrianTorres · Accepted solution]

Hi @Shaguar357,

This should have worked with the colspan attribute we placed in the <td>, however just to be sure let’s do the following:

• Remove the table th block from your <style> as it’s not being used
• Remove the table td:first-child block as it’s also unused
• Check that all your tr tags are properly closed, I noticed from your last image that the last ones are missing a slash. There is also an extra <tr> at the end of your </table> which may be causing this issue.

If you’re still having issues after applying these changes, try changing the highlighted rows from <td> to <th>. I hope this helps 🙂

[Shaguar357]

Hi @AdrianTorres ,

Here's the current output.  Very close.  Somewhere I lost the border around the headers and I'd still like to have the headers highlighted.  Any ideas?  Thanks again!  😊

[Shaguar357]

Hi @AdrianTorres ,

I believe I have it down.  The only thing I'm missing now is the border around each header.  I'll keep working at that.  Thanks for all your help!  I really appreciate it! 🙂