---
title: "Tables, Shapes, and Images - Lasernet 9 Form Editor Training"
slug: "tables-shapes-and-images"
description: "With the Image and Shapes tools, you can add images, lines, rectangles and rounded rectangles to your form design. Read for more information."
tags: ["Form Editor", "Images", "Lasernet 9 ", "Shape", "Tables"]
updated: 2026-03-06T08:14:27Z
published: 2026-03-06T08:14:27Z
canonical: "kb.lasernetgroup.com/tables-shapes-and-images"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://kb.lasernetgroup.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tables, Shapes, and Images

**Applies to:** Lasernet 9

With the **Image** and **Shapes** tools, you can add images, lines, rectangles, and rounded rectangles to your form design.

You can also assign multiple images or shapes in a dynamic vertical position to the Conditional Area by dragging the pointer in the input view to a pattern. Thus, a new object can be connected to any pattern meeting the selected pattern criterion. Images or shapes become then visible within the Conditional Area of the form.

To create a dynamic table around a region or a Conditional Area, you can drag the pointer around an item line in the output view to frame the selected columns.

> [!NOTE]
> Note
> 
> This article describes a software version that is no longer supported. Although the software will no longer receive updates or technical support, existing documentation, such as this article, will be retained for reference purposes but will no longer be updated. If you have any questions, contact [Lasernet Support](https://support.lasernetgroup.com/new-ticket).

## Exercise

Download and import the attached configuration called **20. Tables, Shapes and Images in Lasernet Developer 9**. Afterward, navigate to the **Forms** section and open the **Sample** form.

1. On the Developer toolbar, click the **Shapes** tool, and then click **Rectangle**.
2. Draw a rectangle around labels and values in the right-hand corner of the header in the output.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194407CDQSMAZPPQMEDPT0-image.png)

1. Edit the rectangle properties. On the **Position** tab, select the following checkboxes in the **Absolute** group box: **First**, **Middle**, **Last**, and **Single Page**.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-IJGDFH0S.png)

1. On the **Shape** tab, set **Color** to grey in the **Fill** group box
2. Click the **Ok** button to confirm changes.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194409WUEQQVGXUTENDPT0-image.png)

1. Right-click the rectangle you have added, click **Order**, and then click **Send to Back** to move a layer with the rectangle backwards, and thus make the text visible.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194410GCWVVYCEISUCXBL0-image.png)

The rectangle is now in the background.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-9ZNUVG42.png)

The next step is to draw a table around the Conditional Area. To this end, follow these steps:

1. On the Developer toolbar, click **Table**, and then click **Apply to Conditional Area**.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-58HHNJ9Q.png)

1. Move the pointer to the Conditional Area in the output and select columns to define the outer boundaries of the table.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-VW32XKNX.png)

Columns of the Conditional Area are now organized within the table. The number of columns in the table corresponds to the number of outlined rearranges.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-HGZ0U3GB.png)

Let us now change the table layout so it meets our purpose.

1. To edit table properties, right-click a line of the table and then click **Table Properties** on the context menu that appears.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-8N2RYGMX.png)

1. In the **Table Properties** dialog, switch to the **Body** tab.
2. Set **Top Margin** to **7 mm**.
3. Click the **Apply to all pages** button.
4. Click **Ok** to confirm changes.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194416ZLBYTHFEFECUGGX0-image.png)

A top margin has been added between the table header and data of the table body.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-1QY86NKC.png)

1. In the **Table Properties** dialog, switch to the **Header** tab.
2. In the **Fill** group, set **Color** to grey.
3. Click the **Apply to all columns** button. The color is applied to all columns in the header.
4. Select **No Color** for **Border Color** in the **Right Border** group box.
5. Click the **Next Column** button.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194418BVCZSREHCTHMJDG0-image.png)

1. For **Column 2**, specify the same values as it is illustrated. In addition, in the **Fill** group box, use the **Color** drop-down control to select a grey color. Afterward, click the **Next Column** button.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/13-edit-header-properties.png)

1. For **Column 3**, specify the same values as it is illustrated. In addition, in the **Fill** group box, use the **Color** drop-down control to select a grey color. Afterward, click the **Next Column** button.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/14-edit-header-properties(1).png)

1. For **Column 4**, specify the same values as it is illustrated. In addition, in the **Fill** group box, use the **Color** drop-down control to select a grey color. Afterward, click the **Next Column** button.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194419AUMAZNJDGHJKXIP0-image.png)

1. For **Column 5**, specify the same values as it is illustrated. In addition, in the **Fill** group box, use the **Color** drop-down control to select a grey color.
2. Click the **Apply to all pages** button to apply the same settings for **First**, **Middle**, **Last**, and **Single** pages.
3. Click **Ok** to confirm changes.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194420YIUJRNEMHLTZINN0-image.png)

The table header is now formatted as illustrated:

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-9JOCCADG.png)

> [!NOTE]
> Note
> 
> You can also change the column width when you move a table border using the cursor. A splitter symbol then appears, and you can now drag the line to the left or to the right to change the column size.

1. In the **Table Properties** dialog, switch to the **Footer** tab.
2. Select the **Hide footer on page** checkbox.
3. To change the table formatting for the middle page, select the **Middle** checkbox in the **Current Page** group box.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194422GKBXYIFIAUHLPST0-image.png)

1. In the **Current Page** group box, select the **Middle** checkbox, and then select the **Hide footer on page** checkbox.
2. Click **Ok** to confirm the changes.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194423ECPXMIWMXBVYXYA0-image.png)

The footer is now hidden on the first and middle pages.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-DUMP7O63.png)

For the last and single pages, we are now going to extend the default size of the table.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-PJZ7UFSJ.png)

1. In the **Table Properties** dialog, switch to the **Footer** tab, and then select the **Last** checkbox in the **Current Page** group box.
2. Select **End of cond. area (Absolute)** from the **Relative** to drop-down list.
3. Set **Height** to **15 mm**.
4. Clear the **Hide footer on page** checkbox
5. Click **Ok** to confirm the changes.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194429TFBINDQSQRVTFZJ0-image.png)

We have now added a footer with an absolute position, relative to the end of the Conditional Area, for the last and single pages only.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-ORBHZZX7.png)

1. Continue formatting the footer for the last and single pages to have the final result as shown. To this end, on the **Footer** tab, select **No Color** for the right border for column 1 and 4, for both right and left borders for column 2, for the left border for column 3 and 5, as well as select grey as a filling color for the two last columns (4-5).

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-FP5H2LGN.png)

Finally, we are going to use the Image tool available on the Developer bar to add an image to the top of the document.

1. On the Developer bar, click **Image**, then click **Local and Remote**, and then click **File...**. When the pointer has a hover effect, click in the header of the output to insert the image.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-QE8OKHS6.png)

37. The **Choose an image file** dialog opens defining the default directory: **[Current Configuration]/Files/Images**. Select an image file and click **Open**.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194434JAYHVGPQUMRZKDQ0-image.png)

By default, the image of its original size is inserted to the output. To control the image size, follow these steps:

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-CA65UN8E.png)

> [!NOTE]
> Note
> 
> When you select an image file from the other folders, not the default one, you are then prompted to copy a selected file to the Images folder located in the current configuration or to use the original file location.

1. On the **Position** tab, select the **First**, **Middle**, **Last**, and **Single** checkboxes in the **Absolute** group box.
2. Set **Size type** to **Auto Width+Height**.
3. Set the **X** position to **129 mm**.
4. Set the **Y** position to **41 mm**.
5. Set **Width** to **78.1 mm** and **Height** to **28 mm**.
6. Click **Ok** to confirm changes.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/4194444TJTWNQMEXYJDYAW0-image.png)

We have now resized the image and moved it to the required position for this particular document.

![](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/image-MT7PUGCV.png)

## Attachments

- [20.-Tables-Shapes-and-Images.lnconfigx](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/20.-Tables-Shapes-and-Images.lnconfigx)