Displaying Tables in Visual Flow

12 Jan
Displaying Tables in Visual Flow

I’m a big sucker for adding things to my Flows that will make them look cooler. Just today I came across an article about using HTML to display information to the user in a table format. Hold the phone! That’s cool!

So I dug into it and here is what I have discovered.

HTML Table Basics

An HTML Table is defined by just a few tags:

  • <table> </table> (specifies the beginning and end of a table)
  • <tr> </tr> (specifies the beginning and end of a table row)
  • <th> </th> (specifies the beginning and end of a table header)
    • table headers are bold by default
  • <td> </td> (specifies the beginning and end of an table entry or table data)
Table Examples

Two Basic Table Examples


The basic structure of the horizontal table is as follows:


<tr> <th>Column 1</th> <th>Column 2</th> </tr>

<tr> <td>Row 1 First Item</td> <td>Row 1 Second Item</td> </tr>

<tr> <td>Row 2 First Item</td> <td>Row 2 Second Item</td> </tr>


And the basic structure of the vertical table is like this:


<tr> <th>Row 1</th> <td>Name</td> </tr>

<tr> <th>Row 2</th> <td>Tristan</td> </tr>

<tr> <th>Row 3</th> <td>The Great</td> </tr>


Adding Attributes to the Tags

Once the basic table is setup it’s time to start adding attributes that will give it the desired look.

Basic <table> Tag Attributes


The first attribute to consider is the ones that defines the table borders. In the examples given the first table has a borders=”5″ attribute, and the second a borders=”1″.

<table borders=”5″>  <table borders=”1″>

The borders attribute will take any whole number where that number is the thickness of the border in pixels.


The width of the table can be expressed in pixels, or as a percentage of the available space:

<table width=”300″>  or  <table width=”70%”>

If the width attribute is omitted the table will occupy the width of its container element.


Cell padding is the space between cell borders and cell content, expressed in pixels.

<table cellpadding=”10″>

Adding a Caption Tag

To add a title to the table, the caption tag can be inserted immediately after the opening table tag:

<table> <caption>This is a Vertical Table</caption> …

Adjusting Font Color, Size and Face

Use the font tag to adjust the color and size of font anywhere in the table:

<font color=”blue” font size=”2″ font face=”arial”>

The font size can be a whole number between 1 and 7.

Adjusting Positioning of Text

For the table data tags, the position of text can be adjusted with the align attribute:

<td align=”center”>  <td align=”right”>

Attributes That Don’t Seem to Work

There appears to be several attributes that do not work as expected. For example, I couldn’t get the following attributes to affect the look of the table the way I wanted:

  • bgcolor, in any of the tags, does not seem to work
  • align, when used in the <th> tag, does not align the table header
    • a workaround may be to use <td> tags combined with the <font> tag to get the look you want
  • rowspan & colspan made the table look funny

I didn’t explore all available attributes, so just be aware that even if you want to do something fancy, the Cloud Flow Designer may not want to play along.

Additional Notes

Although I could not find a reference which states what version of HTML is used in the Cloud Flow Designer, it’s my guess that its version 4.01.




1 Comment

Posted by on January 12, 2016 in Flow Tips & Tricks, Visual Flow


Tags: , ,

One response to “Displaying Tables in Visual Flow

  1. Kimberly Dy

    December 19, 2017 at 8:44 pm

    This was very helpful! Was wondering if there’s a way to show the border for each cell/row? I was able to create a table with the border showing for each cell only if the values have been looped through and I’m adding them. I’m looking to create a table where I’m adding text information on both columns.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: