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)
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.
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.
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.