> 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

Tables are the best way to setup content and table properties in Certificate Templates

* [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.

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

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FoZq74k8gYRa1WmBXCc76%2Fimage.png?alt=media\&token=9e7c47e9-7bec-439d-8901-ebc78be6acfc)

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

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FfMrzUZv00bIQ4Q7bfrJr%2Fimage.png?alt=media\&token=7e3fa4b8-e385-4941-96da-746574548368)

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

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FSswokBtWOgfcrApvgY0t%2Fimage.png?alt=media\&token=125e216a-e8be-499a-b0c3-75a6c79a529e)

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

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FylQFLjfBO4Ly3PDBa0Ew%2Fimage.png?alt=media\&token=66672e3b-38ff-4b43-80ac-bf1b38c20add)

### 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](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FS6CFdHtEBzS4lFJq6R9l%2Fimage.png?alt=media\&token=d6aa82bb-265b-49f2-a8bf-18082cec320e)

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

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FtHNQPjdPpchQviPXQoDl%2Fimage.png?alt=media\&token=7f4c589d-4c8d-45a8-97a9-e70f684b7299)

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

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FzsuixGvA6cJulprnXHG5%2Fimage.png?alt=media\&token=fd58f34d-90a9-41b7-a3b2-3327ed449357)

<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)](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FUcNWVpDO8bloZZnMQMXF%2Fimage.png?alt=media\&token=2c68b360-0f43-482d-9062-c726505d695e)

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

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 %}

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FtUFpb5V3wvREjwlfVEph%2Fimage.png?alt=media\&token=c5216067-cc49-42c2-ac9e-f1d8414bc771)

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

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FG9sQncI4vpE6FdmqkloT%2Fimage.png?alt=media\&token=adefae81-8892-48b1-a184-649a548dbc07)

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

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FwAONEMr9WToxpbpJHHoe%2Fimage.png?alt=media\&token=ff613121-4d79-4061-919e-5ec5f218d2cd)

### 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](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FV3b8Z0FNY2NZe0hUu9JG%2Fimage.png?alt=media\&token=6770fb3b-21f8-40d4-8982-4a7796aae256)

![Example footer](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2F84XYXhtG819fVU8lkAkt%2Fimage.png?alt=media\&token=23c1ebe0-8b20-46f9-8585-46637a37eb83)

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

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FKcsJctVNzPjmutz2aprO%2Fimage.png?alt=media\&token=ec6511eb-eaf7-4161-875e-6eb139e614dc)

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

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FBTKHtpT8ArqvOkoCMUpT%2Fimage.png?alt=media\&token=6a594569-55be-4c1b-8607-d290f717d92c)

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

![](https://4166026515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkUUsnoCFHCrXLAM3d7e%2Fuploads%2FyKJGvRiDOdUMYa6DPB0P%2Fimage.png?alt=media\&token=f755b111-fe14-4929-b416-021b0bc42e8b)

{% 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.