ClearPoint allows users to insert HTML tables into HTML Text custom fields and customize rows, columns, and styling. Using the built-in text editor and HTML editor, users can adjust table structure and appearance, including width, borders, and colors.
Pre-requisites
Before adding an HTML table, you must create a Custom Field with an HTML Text field type.
Create a Custom Field
The following steps guide you through creating a Custom Field for HTML tables.
Click the Settings in the top-right navigation.
Select Customizations.
Navigate to the Custom Fields tab.
Click the ➕ Add Custom Field button.
Enter a Custom Field Name (for example, Custom HTML Tables).
Select Measure as the Element Type.
Select HTML Text as the field type.
Click Save.
Add the Custom Field to an Element Detail Page
Next, add the custom field to a Measure detail page layout.
Navigate to Elements from the left-hand navigation.
Select Measures.
Click the measure you want to update (for example, Expenses).
Click the kebab menu (⋮) and select Edit Layout.
Locate the custom field in the layout drawer (for example, Custom HTML Tables).
Drag and drop the field into the desired location on the page.
Click Save.
💡 The custom field will now appear on the Measure detail page moving forward.
Add a Table
Open the measure you are working with (for example, Expenses).
Double-click the custom field to enable inline editing.
Click the Insert Table icon.
By default a 3 columns x 3 rows table will be added.
Adding or Deleting Rows or Columns
Click the option menu next to the Table icon to display many options
Insert Row Above, Below or Delete Row.
Insert Column Before, After or Delete Column.
Delete the entire Table.
Editing HTML Code
Most table edits can be done without writing HTML, but additional customization is possible by editing the HTML directly.
HTML Table Basics
Tables are wrapped in
<table>tagsRows are defined using
<tr>Cells are defined using
<td>Each tag has an opening and closing tag
Example of a three-column, two-row table:
<table>
<tr>
<td>Top left</td>
<td>Top middle</td>
<td>Top right</td>
</tr>
<tr>
<td>Bottom left</td>
<td>Bottom middle</td>
<td>Bottom right</td>
</tr>
</table>
💡 For more advanced examples, see W3Schools HTML Tables
Edit the HTML Directly
Open the Measure detail page (e.g., Expenses).
Double-click the custom field.
Paste or edit the HTML code.
In this example, we are going to use the code above.
Click Save.
Making Borders Visible
To display borders around your table:
Locate the opening
<table>tag.Add
border="3"before the closing bracket.Save your changes to apply the border styling.
Example:
<table border="3">
<tr>
<td>Top left</td>
<td>Top middle</td>
<td>Top right</td>
</tr>
<tr>
<td>Bottom left</td>
<td>Bottom middle</td>
<td>Bottom right</td>
</tr>
</table>
Changing Table Width
To adjust the table width:
Locate the
<table>tag.Add
width="50%"(or another value) before the closing bracket.
Example:
<table width="50%">
💡 This sets the table width relative to the container.
Changing Column Width
To control column widths:
Locate the
<td>tags in the first row of the table.Add a width attribute to each cell.
Example:
<table>
<tr>
<td width="33%">Top left</td>
<td width="33%">Top middle</td>
<td width="33%">Top right</td>
</tr>
<tr>
<td>Bottom left</td>
<td>Bottom middle</td>
<td>Bottom right</td>
</tr>
</table>
💡 Column widths defined in the first row apply to the entire table.
Changing Background Color
You can change the background color of rows, columns, or individual cells using inline styles.
Locate the opening tag of the element you want to style.
Add
style="background-color: #XXXXXX"using a hex color code.
Example:
<table border="1">
<tr>
<td style="background-color:#008000">Top left</td>
<td style="background-color:#FFFF00">Top middle</td>
<td style="background-color:#FF0000">Top right</td>
</tr>
<tr>
<td>Bottom left</td>
<td>Bottom middle</td>
<td>Bottom right</td>
</tr>
</table>
💡 Save your changes to apply the background colors.
