CODEWITHSUNDEEP
htmlvbaoutlookhtml-email
Shaves
Shaves

Reputation: 930

Formatting cells in an HTML table for an Outlook email

My macro sends an Outlook email using Excel and VBA. The email contains a table with details for the recipient. It works well but the next step is to make it look more professional. As I've mentioned before, I haven't done much with HTML yet, so this is part of my learning curve.

I have a couple of questions about the code I'm using and am could use some help with formatting the table.

Following is the code to create the table detail:

DataRow = DataRow & "<tr>"
DataRow = DataRow & "<td ""col width=10%"">" & Worksheets("Macro").Cells(vStartRow, 4) & "</td>"
DataRow = DataRow & "<td ""col width=10%"">" & Worksheets("Macro").Cells(vStartRow, 5) & "</td>"
DataRow = DataRow & "<td ""col width=10%"">" & Format(Worksheets("Macro").Cells(vStartRow, 6), "mm/dd/yy") & "</td>"
DataRow = DataRow & "<td ""col width=10%"">" & Format(Worksheets("Macro").Cells(vStartRow, 7), "#,##0.00") & "</td>"
strRows = strRows & "</tr>"

I've attached a picture of some sample data so you can see what I'm looking at. Any suggestions of links to other solutions would be greatly appreciated. Thanks in advance for staking the time to share your knowledge and experience with me........

enter image description here

Upvotes: 0

Views: 2673

Answers (1)

Nathan
Nathan

Reputation: 5204

I'm curious about the 60% and what it refers to? The email page width? "<table style=""width:60%"">"

This table will be 60% width of the parent (the tag before it).

This line sets up a detail row. What does the 10% refer to? The table width? DataRow = DataRow & "<td ""col width=10%"">" & Worksheets("Macro").Cells(vStartRow, 4) & ""

Since the width is on the <td> then it's going to refer to the width of that specific column.

I'm having trouble aligning data. I'm not sure how to add a 2nd property (?) to specific cells. I'd like to center align the data in the first 3 columns (Customer #, RA #, and Date) and then right align the Amounts (like you would typically see in Excel).

To align text, you can use CSS, and contrary to @braX, you will need to specify this 'inline', i.e. style="text-align: center", not using <style>...</style>. This is because some email clients remove <style>...</style> sections.

Therefore you can write DataRow = DataRow & "<td width='10%' style='text-align:center;'>"

Watch out You will also find difficulties viewing this on mobiles, because the table is lengthy. Consider a 'card' format, e.g. https://medium.com/@nathankeenmelb/responsive-datatables-through-card-ui-design-for-email-aca6f3c395a2

Upvotes: 1

Related Questions