Custom Forms – Working with Tables

Updated 9 months ago by Sloan

Introduction
Insert a Table
- Table Borders
HTML Source Code
Table Content
Rows and Columns

Introduction

Using tables in the LoanPro custom forms editor is an easy way to format text in an organized way. There are many options available, and this article will cover your table options in the custom forms editor.

Insert a Table

To insert a table into your custom form, you can either click Table > Table to select the size of the grid or you can click Insert > Table to create a new table.

Mouse over the grid to select the number of rows and columns you want. Once enough rows and columns are highlighted, click to insert the table.

Table Borders

It is important to know that cell spacing, the space between different cells in a table, can affect the way your border looks. If you want to change the cell spacing value for a table, you can change it by navigating to Table > Table Properties. Enter a numeric value in the field for cell spacing.

You can use the table properties to give all the cells in the table a uniform border. Access the table properties again, but enter a numeric value for the border width property this time.

Once you have a border, you can use the merge cells option to customize the border around cells. To merge cells, highlight the cells you want to merge and navigate to Table > Cell > Merge Cells from the Table menu.

You can also change the borders for individual cells. To change any property for a single table cell, put your cursor in that cell and navigate to Table > Cell > Cell Properties. To change the border, select the Advanced tab inside of cell properties.

Here, you will have four options: border width, border style, border color and background color. Using these fields allows you to create a custom border for each individual cell or group of cells. For the color fields, you can enter in color names or a color value.

HTML Source Code

The border for an individual cell is different than the border for the table as a whole in HTML. To customize the border for individual cells, you also have the option to work with CSS styles. This option may be beneficial if you need to update a lot of cell borders within a form, but this will require some knowledge of HTML. These properties can be entered in the source code HTML of a form. Here are the relevant styles:

Property	Description
border-color	Value can be any simple color name (e.g. blue) or a hexadecimal color value (e.g. #e5e5e5).
border-width	Value should be a number and a unit of measure (e.g. px).
border-style	Value should be solid, dashed, or dotted.

You can either change the color of the entire table or an individual cell. If you want to make specific changes to only one cell border, you can use top, bottom, left, or right as part of the style to specify which of the 4 borders you want to change (e.g. border-left-color). To specify a change to a border, enter the property, followed by a colon (:), then the value, followed by a semicolon (;).

HTML source code example:

border-style: solid;

For example, if we want to make a simple black border on a cell, we can enter the following into the Style field:

border-color: black; border-width: 1px; border-style: solid;

The result will look something like this:

To simplify, you can also enter all of the styles at once like this:

border: 1px solid black;

The complete bordered cell in the HTML of the form would look something like this:

You may make a similar cell but with a dashed border that is 2 pixels (px) thick by entering:

border: 2px dashed black;

It may be that you want an irregular border pattern. For this, you will have to enter the border instructions for each cell, one at a time.

To accomplish this, the following styles have to be entered for the cells:

Cell TR – border: 1px solid black; border-right: none; border-bottom: none;

Cell TL – border: 1px solid black; border-left: none;

Cell BR – border: 1px solid black; border-top: none;

Table Content

Table columns will automatically resize when you enter content into any one cell. The table columns have widths that are dynamically calculated based on the content of the table. You may choose to set the column widths yourself by navigating to Table > Cell > Cell Properties > Width.

Enter a width value and then click 'Save'. Make sure that you include a % sign at the end of the width value. For a specific pixel length, enter a numeric value.

You will also notice that the content entered into table cells is left-aligned and is right against the table border. You can set a property for cells that will determine the space between the border and the content. To set this for an individual cell, you may edit this in the HTML source code by entering the following property in the specific cell element:

padding: 30px;

In the example, 30px is used, but you can change the numeric value to provide more or less space.

You also have the ability to change the position of the table. To do this, navigate to Table > Table Properties > Width. Enter a width value and then click 'Save'.

Rows and Columns

You can add or delete columns or rows from your table. You can also edit table rows. If you click inside of a cell, you will see a pop-up of quick cell options

The options are as follows:

Editing Options	Descriptions
Table properties	This will open the Table Properties window for the table of the cell selected.
Delete Table	This will delete the table of the cell selected.
Insert row before	This inserts a row before the row where the cursor is located.
Insert row after	This inserts a row after the row where the cursor is located.
Delete row	This deletes the row where the cursor is located.
Insert column before	This inserts a column before the column where the cursor is located.
Insert column after	This inserts a column after the column where the cursor is located.
Delete column	This deletes the row where the cursor is located.

The row menu found in Table > Row gives you the options to add and delete, but also provides options that modify all the cells in a row.

The row properties let you update the row. The row options are:

Field	Description
Insert row before	This inserts a row before the row where the cursor is located.
Insert row after	This inserts a row after the row where the cursor is located.
Delete row	This deletes the row where the cursor is located.
Row properties	This gives you access to properties that can be changed for all the cells in the row.
Cut row	This will remove the row, but make it available to insert with one of the paste options.
Copy row	This will copy the row and make the copy available to be inserted into the table using one of the paste options.
Paste row before	This will paste a cut or copied row above the row where the cursor is located.
Paste row after	This will paste a cut or copied row below the row where the cursor is located.

The following general options are available:

Field	Description
Row type	You can choose if a row should be a Body (typical) table row or a header row.
Alignment	This option lets you choose the text alignment (left, center, right) for text in the cells of the row.
Height	Input a numeric value for the height of the row.
Advanced Options	You also have these advanced options: Border style – You can select a border style for the row. Border color – Enter a text color (e.g. blue) or a hexadecimal color code (e.g. #e5e5e5) to change the color of the borders of the cells in the row, or select the checkered icon to see more color options. Background color – Enter a text color (e.g. blue) or a hexadecimal color code (e.g. #e5e5e5) to change the color of the background of the cells in the row, or select the checkered icon to see more color options.