# Create a Table

This article explains how to create a table and add images to the table. We will also cover how to add text and links in the table like in the example below.

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/b1022eae-c383-4276-a8fd-b5566bbfdd74/table-with-images.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=28a273dc18ea4e8518e002895c11241929a8dda7698bcb9db56196efbfb7fb4e&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =735x183")

To get an idea of how tables work, you may want to first read about HTML Tables: 

* <http://www.w3schools.com/html/html_tables.asp>
* <http://www.htmlgoodies.com/tutorials/tables/article.php/3479851>

# Step-by-step guide

If this is a table that will hold images, it is a good idea to upload the images first, then add them to the table.


:::info
We recommend you resize or "crop" your images to the size you are wanting before uploading them. So if all images need to be the same size / dimensions, do that before uploading the images.

GIMP is a free image editing tool: <http://www.gimp.org/>

:::

## Upload your images:

* In your [RescueGroups.org](https://rescuegroups.org) account, click on Website > Images
* Click Upload an Image
* Do this for all of the images that will be added to the table.

## Edit the web page you are wanting to add the table to:

* * In your [RescueGroups.org](https://rescuegroups.org) account, click on Website > Web Page List
* Click the edit icon next to the web page you want to add the table ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/4f04611d-ff58-4625-9e1c-9bad77feafee/application_form_edit.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=8cf4eb318e4fd268e21e254713b886eeee3fa455e371689ef4ae3373fd0a1305&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =16x16")
* Click on the **table icon** in the page editor. ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/e62a556f-435d-4aa5-8ea8-bcc4103a2401/table-icon.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=99f119ce07ea81c03ad7b46f9b56addebf3026b47d32f95b7c8cc7098a47a98a&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =111x49")
* This will bring up the **Table Properties.**


:::info
In this example we are creating a table with 2 rows, and 4 columns. The **width is set to 100%**. Don't forget to add the percent symbol. There is **no border (0), no cell spacing (0)** (space between the table's cells) and **no cell padding (0)** (that is the padding for the content inside of the cell). The **alignment is set to center.**

:::

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/42e98568-7464-42b7-af51-6ea48757960d/table-properties.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=cd362d2bdadd6f8a00e1d7646c54c2c6192245ea1deaaf47def5f7475001f9e8&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =337x396")

* Click **OK**

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/9fb50161-8658-4093-b741-e02e2d57aa78/table-blank.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=76709b65de3fd91065317a4fe2e60949b60142ef11e7706147998f8797ebe6fc&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =872x187")

* This is your **blank table.**

## Now to let's add some content.

* Put your **cursor** in the **first cell, top row.**
* Click on the **Image icon.**

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/106d7025-c8d4-4f66-95c1-e20938b87ee7/table-add-image1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=48f0b6a8c125d1e944750eed81c0a6167e4e8e555fff7db4dd5af8ed29ce3704&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =874x220")

* In the image properties, at the bottom use the **Image List Pull down** to select your image you want to place.
* Add in **Alternative Text.** A short title of what the image is.
* Add in a **border of 0** if you will be adding a link. This will prevent border appearing around each of your images when links are added.
* Click **Ok.**

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/4072a524-a7fa-4007-ab97-217c07de6e44/table-image1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=6e7f5b431532316a89fbd85b47593f0e22a0cb846de0dff9a4c21d5138291a4d&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =452x484")

* Do this for each cell in the 4 columns to add the rest of your images.

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/975ddd77-162e-4cb8-89a7-073f262c83ec/table-images-allfour.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=5929fa14eb66f566bdcd840b18a1aa2a8eded6fee1eb2cb71aaef1403f3330bb&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =871x342")

## Next add text and then add links to the text.

* Add in **text below each image.**
* Use your cursor to **select the text "Kittens"**.
* Click on the **link icon**.

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/60840d4d-3b7a-4f8c-a597-1c053d95ffbb/table-text-link.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=93c1285b3e68a18b7699d5f1710a5f17f5fe4394d675c8a9595880ac89b9f752&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =866x386")

* Under **Link List,** use the **Pull Down List** to select a web page on your site. You can also use this to link to a file or form on your site as well.
* In this example, I selected **Web Page - Animal Browse: Kittens.** This **automatically placed** the correct url to my web page - highlighted in yellow.
* Click **OK**

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/18a910a2-5fe1-49f2-a6f3-7b63114e8055/text-link-dropdown.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=42ed0e2e2e022224f1cc1b327a01dd530c06f4d7301bf6c173d0fa8253ff133a&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =557x356")

* Repeat this for all of the text links in your table.

## Next add links to the images in your table.

* **Select the first image** in your table.
* With the image selected, click on the **link icon.**

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/a95c8011-2fec-4b98-aae3-5a22bc72404e/table-link-image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=67a13b2586e25facd56e0769581dc28c592c7bacf49461a2fb2cae3c2df98b67&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =883x441")

* Under **Link List,** use the **Pull Down List** to select a web page on your site. You can also use this to link to a file or form on your site as well.
* In this example, I selected **Web Page - Animal Browse: Kittens.** This **automatically placed** the correct url to my web page - highlighted in yellow.
* Click **OK**

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/5e50dba8-56af-4b6f-af1e-6f1a808bda88/table-image-link-list.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=67a88199794a6898189dcf13dd01ff4d8c03afd29e5e8d2b0170837717fe0ef6&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =549x351")

* Repeat this for all of the images in your table you want to have links.
* Click **Save.**  Note: You may also want to save earlier and more often.
* On this next screen you can **click Preview** to view your web page with the table in your browser.

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/41b8b87e-f0e8-4748-b29a-b123dab604de/page-preview.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=a2a235c4e2c2f1c32b6d2db25cd2ae0e00def470698435e3a63be29b0342c3b5&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =260x83")

## Adjust Alignment

You may find that you need to adjust the alignment of the text or images in the table.

* Do do that, **edit your page again.**
* **Select the cell** with one of the images, **right mouse-click on the cel**l to bring up the pop up dialog to edit the cell, or table properties.
* In this example, we will edit the **Cell Properties**

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/9d8b8c8b-347b-4dab-ab95-976be92af624/table-cell-properties-popup.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=88cd66360f9ee822d62552f918fb72039b48468cf61d03082a9520ec0bda32af&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =592x489")

* This will open the Cell Properties.
* Because we have 4 images and the table is set to be 100% wide, we want the **cell width for each cell to be 25%** each.
* We also want the **horizontal alignment to be center** and **vertical alignment to be top**.
* Click **OK.**

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/f955cc1b-e9c8-452d-bb7a-7f811b448081/table-cell-properties.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=09a45284803131768ccb878b507590cb94c6d1d101ebd5d698d5477c7583c124&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =440x326")

* Repeat this for each cell in your table.


:::info
Depending on how wide you want your table to be and how many images you have, you may need to use a little math to adjust everything properly.

If you had two images and one was wider than the other, and your table was set to be 100%, you may want the wider cell to be 60% and the smaller cell to be 40%; the total needs to equal 100%.

You could also do this using pixels and set the widths to be a specific size like 250 px. Keep in mind, if you do that, you need to also account for any cell padding or cell spacing. That will affect the math and the overall size.

:::

## Troubleshoot

Q: I see blue borders around my images after I added the links.

A: Be sure you set the border to 0 for each of the images. Select the image, click on the image icon, make sure the **border is set to 0.**

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/b4da2a8f-7451-4040-b29b-d2e51940ea25/table-image1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=acb20ef4fde04147642d2c7720cb511817f49b0a55a0ce7460dba0f4c0f51fa6&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =452x484")