> For the complete documentation index, see [llms.txt](https://docs.nexportsolutions.com/nexport-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nexportsolutions.com/nexport-user-documentation/administrator-documentation/administrator-reference/campus-management/organization-tools/certificates/html-certificate-page-layout.md).

# 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.