build a websitePositioning Images with Titles / Captions

The images you place on your website pages work very hard for you in a number of ways. Not only do they add aesthetics to the design of a page but they also offer descriptive and informative benefits too. Making sure they look their best on your pages, are of the best possible quality and are working as hard as they possible can is very important when you build a website.

Quite often images need to be accompanied by associated text such as captions, descriptions, titles etc. The best way to make sure the images line up neatly with their associated pieces of text is to use a table. A table allows you to set rows and columns, into which you can place and centre images and text to line them up correctly.

Positioning images along with their associated text within a page of other text and images can also be made much easier when using tables as the whole table can be aligned: left, middle or right on a page in the same way that images can. By using a table it also ensures sufficient space between the contents of your table and the rest of the content on the page so allows table contents to stand out on their own in their own space rather than being lost and muddled with other page content.

Using tables to position images and text.

Let’s assume you have an existing page of content and you need to add an image with a caption or an image with a title underneath. Start by clicking to place your cursor in roughly the right area on your page. If possible, place your cursor at the beginning of a paragraph, closest to where you want your image and text to appear and then click the blue “Insert Table” icon in your editor icon bar.

For one image with a caption above it…

build a websiteIn the Table Properties window, select 1 row and 1 column.
Select a border thickness only if you want a border to show. If you just want the table to provide the correct but invisible positioning for your image and text on your page then you don’t need a border at all and so leave it as “0”.
Choose your alignment to decide where on the page you want your image and caption to appear: left, middle or right.
Choose the width of your table – you can set it as the same width as your image. It will automatically expand to accommodate your image anyway.
Leave the Cell Spacing and Cell Padding as the default settings already there.

If you need to change either of these – a higher number in Cell Spacing increases the gap between the two lines of the double border you see around the table cell and a higher number in Cell Padding increases the gap between the cell border and the cell contents – i.e the image.

Enter the text you want for your caption in the Caption textbox at the bottom of the Table properties window.  
Click Add to Website.
Click to place your cursor into the table cell, which should now be sitting in the position you need. Now click the red Insert Image button in your editor icon bar. Browse and upload your image - set the size. Set the position as “middle”. Set a border if required. Leave the space around as the default “narrow” setting.
Click Add to Website. Finally, while your image is still selected, make sure the alignment in your editor icon bar is also set at centre.

If you need to change any of the image settings simply right click the image and go to “Adding and Changing Images”.
If you need to change anything with the Table, simply right click anywhere inside the table (but not on the image) and go to “Table Properties”.

For one image with a title or description underneath…

Insert a table with 2 rows and 1 column. Place your image in the top cell / row and enter any text you want in bottom cell / row. Remember to centre align both the image and the text to make sure they line up nicely. You can edit the text in the table cell in the same way as you would edit text on the page.

build a website 

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');