Tables let you arrange fields in rows and columns. This article covers building a multi-column table, adding items to it, applying borders, and making a field span more than one column.

New to Form Builder? Start with Building Your First Form.

Create the table

1. Drag the table icon onto your form view.

2. In the table's View Item Properties, scroll down to the Table area.
3. Click the (+) icon to add a column. Tables always start with one column.

4. Click the text field for each column and enter its width.

Caution: Set a width on every column, or on none of them. If some columns have a width and others are blank, the blank ones will be badly compressed in the PDF version of the form — even though they look fine online.

Tip: Your column widths should add up to 100. If you leave every width blank, columns divide the space evenly — four columns each behave as though 25 were entered, even though the fields stay empty.

Add items to the table

Items fill a table from left to right. When a row is full, the next item starts a new row.

• To add an item after an existing item, place it underneath that item.
• To add an item before an existing item, place it above that item.

Start with your table headings, using Text/Heading fields, then add your data fields underneath them.

If you're adding a radio button or checkbox and want each option to occupy its own column, select Options in separate cells.

Note: If your changes don't appear, click Refresh in the Form Builder. Do not refresh your browser — that closes the form.

Click Preview on desktop to check your column widths, then click Back to return to the Form Builder.

Note: The preview is slightly narrower than the real form, so columns may look tighter than they will be. Keep that in mind before adjusting widths.

Add borders

Border settings live in the Colors, Borders, Font area of an item's View Item Properties.

Note: A border only appears if that side has both a style and a width. Setting one without the other does nothing.

The lock icon

Each border square has a lock icon that controls how your change is applied.

• Locked — the change applies to all four sides.
• Unlocked — the change applies only to the sides you select.

Add a border to an item

1. Select the item.
2. Scroll to Colors, Borders, Font and click anywhere in the Border Style square except the lock icon.

3. Click the top line option in the menu. This adds a border to all four sides.

4. Click anywhere in the Border Width square except the lock icon.
5. Type 1 and click away from the text box to save it.

Edit several items at once

• Click the first item, then hold Shift and click the last. Everything between them is selected.
• For items that aren't next to each other, click the first, then hold Ctrl and click each additional one.

Once selected, apply border style and width the same way as a single item.

Best practice: Don't let borders overlap. Where two items each have a border on the same edge, that line renders thicker than the rest. So if your headings already have bottom borders, don't add top borders to the fields beneath them. Those fields usually only need a right and bottom border.

Control individual sides

1. Click the lock icon to unlock it.
2. Click one of the four sides of the square to apply a border to just that side.
3. To remove a border, click the white space above the first line in the border menu.

Click Refresh if your changes don't appear, then Preview on desktop to check your work.

Make a field span multiple columns

1. Place the item in your table and assign its borders and border width.
2. Under the Basic heading, click Column span. It defaults to 1.
3. Enter the number of columns the field should occupy and click OK.

This works for data fields as well as headings.

Tip: When a text box spans several columns, increase its Field size to Large as well. Otherwise the field stays small inside a wide cell and users have less room to type than it looks like they do.

If you've already added a Text/Heading above the field, you can hide its label by setting Label position to Hide.

Click Preview on desktop and check the column span of both the heading and the field, along with the text box size.

Related articles

• Building Your First Form
• Form Builder: Node Types
• Form Builder: Menus & Options
• Form Builder: Dataflow and Form Logic
• Form Builder: Editing Published Forms