# HTML Certificate Page Layout

* [Set Background Image](#set-background-image)
* [Create a Base Layout using a Table](#create-a-base-layout-using-a-table)
* [Customize the Border](#customize-the-border)
* [Create a Header](#create-a-header)
* [Create Rows and Columns in the Base Table](#create-rows-and-columns-in-the-base-table)
* [Create Tables for Main Content and Layout](#create-tables-for-main-content-and-layout)
* [Removing Borders](#removing-borders)
* [Create a Footer](#create-a-footer)
* [Inserting Images](#undefined)

### Set Background Image

<mark style="color:blue;">**Step 1:**</mark>  Optionally set Background Image.

{% content-ref url="/pages/LkvaQImUk8QFSf5312uX" %}
[HTML Certificate Background](/nexport-user-documentation/administrator-documentation/administrator-reference/campus-management/organization-tools/certificates/html-certificate-background.md)
{% endcontent-ref %}

### Create a Base Layout using a Table

<mark style="color:blue;">**Step 2:**</mark>  Create a layout for content and template properties using tables.&#x20;

<mark style="color:blue;">**Step 3:**</mark>  Create a base layout to contain all custom layout options. Select the <mark style="color:blue;">**Table Icon**</mark> and select a <mark style="color:blue;">**1x1**</mark>.

![](/files/9cMCghBDr38Dfz583OWW)

<mark style="color:blue;">**Step 4:**</mark>  Open <mark style="color:blue;">**Table Properties**</mark> by selecting the inserted 1x1 table and selecting the <mark style="color:blue;">**Properties Icon.**</mark>

![](/files/NjK031ApXiKKMvktrw2l)

<mark style="color:blue;">**Step 5:**</mark>  Set Width and Height to 100%.

![](/files/nqRncpgAJL6fLsSgQRLQ)

### Customize the Border

<mark style="color:blue;">**Step 6:**</mark>  Optionally remove or customize the <mark style="color:blue;">**Border**</mark>. To remove the border set the Border Width to 0. To customize the border select <mark style="color:blue;">**Advanced**</mark> and make changes according to your requirements.

&#x20;&#x20;

![](/files/gGCMv6t8ERd8tLGjOUns)

### Create a Header

<mark style="color:blue;">**Step 7:**</mark>  Optionally create a <mark style="color:blue;">**header**</mark> by Inserting a Row to the base layout table. <mark style="color:blue;">**Select**</mark> the table and <mark style="color:blue;">**Click**</mark> the <mark style="color:blue;">**Insert row before the Icon.**</mark>

![Create a Header](/files/T3MiksrwWfGD5FHsfCUL)

<mark style="color:blue;">**Step 8:**</mark>  Select the <mark style="color:blue;">**Row**</mark> and Drag it up.

![](/files/mlBSTxzYWdVnaKakE9oG)

<mark style="color:blue;">**Step 9:**</mark>  Enter your header title. <mark style="color:blue;">**Align Center**</mark> and set Font from <mark style="color:blue;">**Paragraph**</mark> to <mark style="color:blue;">**Header 1.**</mark>

![](/files/9QFZMMWUSinc5fmoF68B)

<mark style="color:blue;">**Step 10:**</mark>  Reset the base layout table to height 100% by repeating <mark style="color:blue;">**Steps 4 - 5**</mark> whenever you make changes to the base table (ie. adding rows and columns).

### Create Rows and Columns in the Base Table

<mark style="color:blue;">**Step 11:**</mark>  Optionally create <mark style="color:blue;">**rows and columns**</mark> within the base table created in <mark style="color:blue;">**Steps 3 - 6**</mark> for customizing the layout.

![Example of adding rows and columns within the base table. Border is removed (dashed lines means there is no border)](/files/KqKjXVplNm1Fjg6icEAQ)

### Create Tables for Main Content and Layout

<mark style="color:blue;">**Step 12:**</mark>  Optionally create sub <mark style="color:blue;">**tables**</mark> within the base table created in <mark style="color:blue;">**Steps 3 - 6**</mark> for all content you want centered in the template.

{% hint style="info" %}
You can set the table width to 25% to close the gap between column content.

To <mark style="color:blue;">**re-center the table**</mark>, select from outside the table and highlight it from bottom right to top left.&#x20;

If it just centers the cells instead of the table, then go a little higher when you select to the top left. Then select the <mark style="color:blue;">**Align center icon**</mark> in the editor.
{% endhint %}

![](/files/BFoL4PfwbkMyhhYUU1R3)

<mark style="color:blue;">**Step 13:**</mark>  Optionally <mark style="color:blue;">**Align Contents**</mark> by selecting <mark style="color:blue;">**within**</mark> the table and dragging to select the table cells.&#x20;

![](/files/2EpiI2GHgAx2HkrgoLid)

### Removing Borders

<mark style="color:blue;">**Step 14:**</mark>  Optionally <mark style="color:blue;">**remove borders**</mark> for tables used to set up the template layout by going to table properties and setting the border to 0.

![](/files/xEnhLHIy6HWJ96EokDja)

### Create a Footer

<mark style="color:blue;">**Step 15:**</mark>  Optionally create a <mark style="color:blue;">**footer**</mark> by inserting a row after the center content.

![Creating a footer](/files/las4VJ4WnQWzI14SJ014)

![Example footer](/files/CWXytAy4dp7BJ6BC1mqy)

### Inserting Images <a href="#insert-images" id="insert-images"></a>

<mark style="color:blue;">**Step 16:**</mark>  Optionally insert images by selecting the <mark style="color:blue;">**Image Icon.**</mark>

![](/files/3Rnd0u97Cm8uuloTrgHb)

<mark style="color:blue;">**Step 17:**</mark>  Click the <mark style="color:blue;">**Source Icon**</mark> and navigate to the file location on your computer. Click <mark style="color:blue;">**Open**</mark> and the Source field will propagate<mark style="color:blue;">.</mark> Click <mark style="color:blue;">**Save**</mark> and the image will be inserted.

![](/files/g3nDxHpRJznSNp0kLEFR)

<mark style="color:blue;">**Step 18:**</mark>  <mark style="color:blue;">**Resize**</mark> the <mark style="color:blue;">**Image**</mark> by using the blue square nodes.

![](/files/6XxnHfEQydm0krfJUYSs)

{% hint style="info" %}
Reset the base layout table to height 100% by repeating <mark style="color:blue;">**Steps 4 - 5**</mark> whenever you make changes to the base table (ie. adding rows or columns, inserting images).
{% endhint %}

<mark style="color:blue;">**Step 18:**</mark>  Click <mark style="color:blue;">**Save**</mark> and your <mark style="color:blue;">**Page**</mark> is saved.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nexportsolutions.com/nexport-user-documentation/administrator-documentation/administrator-reference/campus-management/organization-tools/certificates/html-certificate-page-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.