Scenario

OptiCloud, a mid-size SaaS company offering customizable cloud analytics, handles complex proposals with multiple SKUs, implementation services, and region-specific legal clauses. Their Sales Ops team was struggling with:

• Inconsistent formatting in output documents
• Manual insertion of legal clauses and billing tables
• Lack of dynamic fields (e.g., product-specific T&Cs, pricing tables, renewal dates)
• Inability to quickly preview or adjust order forms on a per-client basis

To address this, they standardized on DealHub’s Document and Sub-Document Templates functionality to automate and professionalize document generation.

Their most important need right now is to create a custom table in their output document with custom borders. They want to utilize DealHub’s HTML capabilities to achieve this.They also want to be able to add horizontal lines across their document.

Solution

Step 1: Adding a basic table in Output Documents

1. Click on Add Element, then select Text Section

2. Insert a table by selecting the desired number of columns and rows 

3. Once the table has been created, right click anywhere inside the table and select “Table Properties.”

4. In the Table Properties section, you will see a “Border Size” section defaulting to 1. By changing the 1 to a 0, you can “erase” all of the borders. Click OK to go back to the main text section.

5. In the top bar, click on “Source” to view the HTML code for the section and add in the following inputs depending on which border sides you want to show.

Step 2: Re-adding cell borders via HTML

1.  Add these HTMLs after the “Style” section in the Source code, within the “ “ of Style, such as:

• Marking top border only: border-top: 1px solid rgb(86, 91, 109);

• Marking bottom border only: border-bottom: 1px solid rgb(86, 91, 109);

• Marking right border only: border-right: 1px solid rgb(86, 91, 109); 

• Marking left border only: border-left: 1px solid rgb(86, 91, 109);

• Marking all borders back: border-top: 1px solid rgb(86, 91, 109); border-bottom: 1px solid rgb(86, 91, 109); border-left: 1px solid rgb(86, 91, 109); border-right: 1px solid rgb(86, 91, 109);

3. Adding horizontals line via HTML

First option: Click the following button in your elements toolbar:

Second option: Add the code <hr> in your source at the location of the desired horizontal line. It will look like this: