Customizing HTML Tables in ClearPoint – FAQ | ClearPoint Strategy

Customizing HTML Tables in ClearPoint – FAQ

ClearPoint’s HTML fields allow you to create HTML tables. This article walks through a few commonly used aspects of these tables, like adding and changing rows and columns, changing the width of the table, adding borders and background colors, and setting the columns to be even widths.

In This Article

ClearPoint allows users to insert HTML tables and adjust the rows and columns through the HTML editor. Users also have the ability to edit the HTML code to change aspects of the table, like width, colors, and borders.

Inserting tables

Double click on HTML field in ClearPoint where you want to insert a table. Place your mouse where you want the table to go. Click the table icon. Click Insert Table.

Now, you can then enter content into the table cells.

Adding or deleting rows or columns

Double click to edit the HTML field, and click into a cell in the table next to where you want the new row or column. Click the table icon. Select the option you want from the menu that appears.

Editing HTML code

As you can see, you can easily insert the tables and select rows and columns without having to edit any code, but for some further customizations, it is helpful to be familiar with the HTML table structure:

  • Each element has an open tag (e.g. <td>) and a close tag, (which looks like the open tag, plus a slash, e.g. </td>). The content goes in between the tags.
  • Tables are represented by <table> tags.
  • Tags for table rows appear as <tr>
  • Individual cell tags appear as <td> (stands for table data)

So, a three-column, two-row table (as shown) has the following code:
<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>

If you’d like more information, W3Schools covers several more features of HTML tables in addition to those we cover below.

To access the HTML code in ClearPoint, double click to edit the HTML field. Click the bracket icon to view the HTML code.

Making borders visible

To make borders on your table visible, use ctrl+f to search for table. Find the table open tag.

Before the closing bracket, add a space, and the text border=”1″. This will put a thin black border around all cells in the table.

Changing table width

To change the table width, use ctrl+f to search for table. Find the table open tag.

Before the closing bracket, add a space, and the text width=”100%”, replacing 100 with the desired width.

Changing column width

To change the width of a column on your table, use ctrl+f to search for td. Find the td open tags in the first row of your table (after the first tr tag).

Before the closing bracket of each, add a space, and the text widt h=”33%”, replacing 33 with the desired width. Adding widths to the cells in the first row will apply them to the rest of the table.

Changing background color

You can change the background color of specific rows, columns, or cells in an HTML table. Find the open tag of the element whose background color you want to change

Note:

Before the closing bracket, add a space, and the text style=”background-color: #000000″, replacing the zeros with the desired hex code.’

HTML Table Transformation

After making the above edits to our HTML code, our table went from this:

To this: