Aligning Multiple Images on Your Website Page Using a Table With DSS

Using multiple images on your website page can be beneficial if you have a series of photos you want to be displayed, or you want to present a sequence of photos that shows progression. For example, you may want to show the successful changes of someone’s facelift or before and after pictures of a breast augmentation. You’re likely to want these pictures arranged in a certain order, and you may also want them to have a uniform appearance.

When you add multiple images to your website using DSS, you may experience challenges lining them up to create that consistent look. The following instructions explain how to use tables to line up photos to produce the appearance you want.

How to Align Multiple Images on Your Website Page Using a Table

Overview: These instructions show how to use DSS to place the following three photos so they’re aligned evenly on a website page.

Sometimes you will want multiple images perfectly aligned on the page Sometimes you will want multiple images perfectly aligned on the page Sometimes you will want multiple images perfectly aligned on the page

Step 1: Be sure the images you want to place on your website page are exactly the same size and dimensions. Because it’s difficult to properly align photos if they’re of varying heights and widths, try to make them as uniform in size as possible. If you need help with resizing, read through our instructions on this process.

Step 2: Log into DSS and display the content where you want the image to be added.

Tip: You can use the Search and Edit option under any of the Site content topics to find the content you’re looking for. Or you can use the orange Search Items magnifying glass icon at the left side of the screen.

Step 3: Once the desired content displays, click the location where you want to insert a table. In the example below, the cursor is placed at the end of the first line of text.

Position the cursor where you wish to anchor the table

Step 4: Under the Rich Content Editor heading, click the Table icon. This icon is designated by a grid of small boxes. If you mouse over the icon, the word “Table” displays.

Select the Table icon to create a table

Step 5: In the Table Properties dialog box, input 1 for Rows, 3 for Columns, and 100% for Width. Then click OK.

Creating a one-row table in DSS

A table displays with one row and three columns that extend the full width of your website page. The table is located at your cursor location. In this example, the table appears following the first line of text.

Your table is created

Step 6: Place your cursor in Column 1—the first column at the far left.

Step 7: To select the image you want to place, under the Rich Content Editor heading click the Image icon. This icon is designated by a picture of a mountain. If you mouse over the icon, the word “Image” displays.

Locating the icon to add an image to the page

Step 8: Click the Browse Server button next to the URL box.

Getting ready to upload your picture to the server

Step 9: Click the Upload icon at the top of the window.

Press the Upload button to load your image

Step 10: Navigate to the location of the saved image, and double-click it.

Step 11: Once the image uploads into the Image Properties dialog box, click OK. The image displays in the first column of the table.

Load the image into the first cell of the table

Step 12: Follow Steps 6 to11 to insert the other two images. Place your cursor in Column 2, and select the desired image you want to be placed in this column. Place your cursor in Column 3, and select the desired image.

Tip: Columns 2 and 3 will appear thin until you place images inside them. Be sure to position your cursor inside each column when inserting an image to ensure it’s placed into the correct one.

Now fill the next cells using the same technique

Once you’re finished inserting the images, all three should be aligned evenly across the website page.

The final result: a set of perfectly aligned images

As always, Foster Web Marketing is dedicated to your success. If you need any help or feel something is not working properly, please contact us using the DSS Need Help button, emailing [email protected], or calling 888-886-0939. We will be happy to assist you!


Lindsey Daher
Connect with me
Director of Content Operations at Foster Web Marketing

Get Help Now

Marketing Articles