HTML Reports - Center Align Table Cells and Add Additional Spacing Between Images

[Matt_AM]

Hey Fancy Folk,

TLDR;

I am making an HTML report and I have a table that is 3 columns by 7 rows that I'd like to center align the text in the cells. Additionally, I'd like to add more spacing between 2 images "control images" on the same line (making it easier to parse with your eyes).  Apparently my Google-Fu is lacking because I haven't found info related to this with the LV HTML report generation and I was hoping someone could provide resources so I can learn.

Verbose;

I am making an HTML report for a test after it has been ran.  I have the data I want being used in the HTML report I am creating and I am at the "make things pretty" part of my report.  I would like to center align the text in the "CW" and "CCW" columns and add some additional spacing between the images on the same line, reference image below for what my report currently looks like.

My code that is generating this data is seen in the image below.  Note, the orange double line running to the for loop is to force my graphs - which are updated in a flat sequence struct with said double inside - to update before saving the image to the report.

I've tried googling around and searching the LV examples for report generations, but I haven't been able to find much info specifically about LV's HTML report generation and I am at a bit of a loss.  I tried adding a for loop around the "Apprent report text" to append several tab constants to the HTML report, but that kept the horizontal spacing the same between the graphs on the same line.  

Can anyone provide me resources about LV's report generation specific to HTML?  Am I being too specific with my scope to find resources I need (IE, just search around for HTML stuff or "Office parameters" controls for the "Append X to report")?  Basically I am looking for someone to point me in a direction so I can make my stuff look pretty.

Thanks,

Matt

[cstorey]

What you are asking for is pretty easy, but there are multiple ways to do it.  You should be able to add a custom CSS or a few style properties to the report to pretty things up.  

Can you attach a dummy HTML report (data sanatized)?  A simple example VI that generates the report might help too.  

Craig

[Matt_AM]

@cstorey,

 
Thanks for the response! Attached is a zip file that contains the report generation portion of my code with dummy data along with the the HTML report that is created from the faux code. 

Going back through the report generation HTML only subpalette, I see "Append User Formatted HTML to report.Vi".  I am assuming I can do the markup to center align my text via formatted HTML Vi and not the "Append Report Text.Vi".

[cstorey · Accepted solution]

Attached zip?

>> Going back through the report generation HTML only subpalette, I see "Append User Formatted HTML to report.Vi".  I am assuming I can do the markup to center align my text via formatted HTML Vi and not the "Append Report Text.Vi".

Exactly.  You would want to inserta style block like..

<style>
body {
background-color: linen;
}

h2 {
color: maroon;
margin-left: 40px;
}
img {
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
margin: 20px;
width: 400px;
}

img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

table, th, td {
  border: 1px solid;
}

td {

  text-align: center;

}

th {
  text-align: left;
}

</style>

Lots more styling you can do!  If you don't know CSS then https://www.w3schools.com/Css/ is your friend.

But styling gets a bit dicy when the report tool kit uses multiple tables and you don't want them all styled the same.  You might have to give your data table an id then style the id.th, id.td.

Craig

[Matt_AM]

---

@cstorey wrote:

Attached zip?

---

Oops, my bad 😅.  Attached zip here.

[cstorey · Accepted solution]

Try the attached.

Styles can be modified as required.  I use a DIV tag to enclose the table and to apply the style to only the table within that contains your statistics and not the header+title.

Craig

[Matt_AM]

@cstorey, 

Thank you for your help, this looks super slick!

Thank you for the CSS link as well, I am not familiar with formatting this way and I really appreciate you providing me a solid example that looks beautiful.  I am going to mess with it a bit so I can learn more and gain a new tool in my toolbelt.