Customizing HTML Tables
This article explains how to add and manage HTML tables in ClearPoint.
Fernando Montenegro
17 steps
34 seconds
Clearpointstrategy
1
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
2
Before adding an HTML table, you must create a Custom Field with an HTML Text field type.
Create a Custom Field
3
The following steps guide you through creating a Custom Field for HTML tables. 1. Click the **Settings** in the top-right navigation. 2. Select **Customizations**.
4
1. Navigate to the **Custom Fields** tab. 2. Click the **➕ Add Custom Field** button. 3. Enter a **Custom Field Name** (for example, *Custom HTML Tables*). 4. Select Measure as the **Element Type**. 5. Select **HTML Text** as the field type. 6. Click **Save**.
Add the Custom Field to an Element Detail Page
5
Next, add the custom field to a Measure detail page layout. 1. Navigate to **Elements** from the left-hand navigation. 2. Select **Measures**. 3. Click the measure you want to update (for example, *Expenses*). 4. Click the **kebab menu (⋮)** on the detail page. 5. Select **Edit Layout**.
6
1. Click the **kebab menu (⋮)** and select **Edit Layout**.
7
1. Locate the custom field in the layout drawer (for example, *Custom HTML Tables*). 2. Drag and drop the field into the desired location on the page. 3. Click **Save**. 💡 The custom field will now appear on the Measure detail page moving forward.
8
## Add a Table 1. Open the measure you are working with (for example, *Expenses*). 2. Double-click the custom field to enable **inline editing**. 3. Click the **Insert Table** icon. 1. By default a 3 columns x 3 rows table will be added.
9
## Adding or Deleting Rows or Columns 1. Click the option menu next to the Table icon to display many options 1. Insert Row Above, Below or Delete Row. 2. Insert Column Before, After or Delete Column. 3. Delete the entire Table.
Editing HTML Code
10
Most table edits can be done without writing HTML, but additional customization is possible by editing the HTML directly.
11
## HTML Table Basics - Tables are wrapped in `<table>` tags - Rows 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**](https://www.w3schools.com/html/html_tables.asp)
12
## Edit the HTML Directly 1. Open the Measure detail page (e.g., **Expenses**). 2. Double-click the custom field. 3. Paste or edit the HTML code. 1. In this example, we are going to use the code above. 4. Click **Save**.
13
## Making Borders Visible To display borders around your table: 1. Locate the opening `<table>` tag. 2. Add `border="3"` before the closing bracket. 3. **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> ```
14
## Changing Table Width To adjust the table width: 1. Locate the `<table>` tag. 2. Add `width="50%"` (or another value) before the closing bracket. Example: ``` <table width="50%"> ``` 💡 This sets the table width relative to the container.
15
## Changing Column Width To control column widths: 1. Locate the `<td>` tags in the **first row** of the table. 2. 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.
16
## Changing Background Color You can change the background color of rows, columns, or individual cells using inline styles. 1. Locate the opening tag of the element you want to style. 2. 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> ```
17
💡 Save your changes to apply the background colors.
Customizing HTML Tables
This article explains how to add and manage HTML tables in ClearPoint.
Fernando Montenegro
17 steps
34 seconds
Clearpointstrategy
1
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
2
Before adding an HTML table, you must create a Custom Field with an HTML Text field type.
Create a Custom Field
3
The following steps guide you through creating a Custom Field for HTML tables. 1. Click the **Settings** in the top-right navigation. 2. Select **Customizations**.
4
1. Navigate to the **Custom Fields** tab. 2. Click the **➕ Add Custom Field** button. 3. Enter a **Custom Field Name** (for example, *Custom HTML Tables*). 4. Select Measure as the **Element Type**. 5. Select **HTML Text** as the field type. 6. Click **Save**.
Add the Custom Field to an Element Detail Page
5
Next, add the custom field to a Measure detail page layout. 1. Navigate to **Elements** from the left-hand navigation. 2. Select **Measures**. 3. Click the measure you want to update (for example, *Expenses*). 4. Click the **kebab menu (⋮)** on the detail page. 5. Select **Edit Layout**.
6
1. Click the **kebab menu (⋮)** and select **Edit Layout**.
7
1. Locate the custom field in the layout drawer (for example, *Custom HTML Tables*). 2. Drag and drop the field into the desired location on the page. 3. Click **Save**. 💡 The custom field will now appear on the Measure detail page moving forward.
8
## Add a Table 1. Open the measure you are working with (for example, *Expenses*). 2. Double-click the custom field to enable **inline editing**. 3. Click the **Insert Table** icon. 1. By default a 3 columns x 3 rows table will be added.
9
## Adding or Deleting Rows or Columns 1. Click the option menu next to the Table icon to display many options 1. Insert Row Above, Below or Delete Row. 2. Insert Column Before, After or Delete Column. 3. Delete the entire Table.
Editing HTML Code
10
Most table edits can be done without writing HTML, but additional customization is possible by editing the HTML directly.
11
## HTML Table Basics - Tables are wrapped in `<table>` tags - Rows 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**](https://www.w3schools.com/html/html_tables.asp)
12
## Edit the HTML Directly 1. Open the Measure detail page (e.g., **Expenses**). 2. Double-click the custom field. 3. Paste or edit the HTML code. 1. In this example, we are going to use the code above. 4. Click **Save**.
13
## Making Borders Visible To display borders around your table: 1. Locate the opening `<table>` tag. 2. Add `border="3"` before the closing bracket. 3. **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> ```
14
## Changing Table Width To adjust the table width: 1. Locate the `<table>` tag. 2. Add `width="50%"` (or another value) before the closing bracket. Example: ``` <table width="50%"> ``` 💡 This sets the table width relative to the container.
15
## Changing Column Width To control column widths: 1. Locate the `<td>` tags in the **first row** of the table. 2. 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.
16
## Changing Background Color You can change the background color of rows, columns, or individual cells using inline styles. 1. Locate the opening tag of the element you want to style. 2. 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> ```
17
💡 Save your changes to apply the background colors.
