HTML: Embed Images and Image captions within a Text Stream

Note: This tutorial was written before CSS (Cascading Style Sheets). I have kept it on the site for historical reasons only.

One way to spice up your web pages is to embed images within the text that you are presenting to your readers. When doing this, you will want to be able to control:

To illustrate what I am talking about, I have created pseudo-web pages below using the table tag. Looking at Example 1 below, you will see that there is a right-aligned image, with a caption below the image, and that the top of this image is aligned with the top of the second paragraph.



Example 1: Right aligning an image and caption within the text stream

This is some text of paragraph 1, sentence 1 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 1, sentence 2 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 1, sentence 3 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 1, sentence 4 to demonstrate the principle of embedded graphic and caption information. Now comes two break tags separated by a space. This gives extra spacing between the paragraphs.

computer at computer logo
See HTML Example 1 code

This is some text of paragraph 2, sentence 1 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 2 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 3 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 4 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 5 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 6 to demonstrate the principle of embedded graphic and caption information. Now comes two break tags separated by a space. This gives extra spacing between the paragraphs.

To achieve this effect, I ended paragraph 1 by closing the paragraph tag. Following this tag, I inserted the table statement that is shown in the Example 1 Source Code table. The two critical parameters used within the table tag illustrated in line 1 are the align and width modifiers. Note that I have requested that the table be aligned to the right side of the page. Further note that I have set the width of the table in pixels to match the width of the image that is to be displayed within the table. Line 2 contains the definition for the table data cell that is to contain the image we want to display. Line 3 contains the image tag that identifies the image to be shown. Please note that both the width and height parameters are filled in to match the pixel size of the image to be displayed. Line 4 closes out the table data cell that holds the image. Line 5 starts a new data cell in a new row and Line 6 shows the text that we want to appear in that data cell as the caption to our image. Line 7 is used to close the data cell and the table. Note that there is no break following the close of the table. Rather, I immediately begin with the text that I want to appear to the left of my image.

So, in the above example, I have controlled the placement of my image and its associated caption by:

  1. preceding the table that is to hold the image/caption by a break tag
  2. using the align parameter of the table tag to right justify the entire table
  3. setting the width of the table to match the width of the image to be displayed.
  4. closing the table and immediately beginning the paragraph of text that I want to appear at the same vertical level as the top of the image.

Example 1 Source Code
1   <table align="right" width="173" border="1" bgcolor="Aqua">
2   <tr><td width="173" align="center">
3   <img src="px/deskman.gif" width=173 height=158 hspace=2 border=0
4   </td></tr>
5   <tr><td width="173" align="center">
6   See HTML Example 1 code
7   </td></tr></table>


Now let's say that we want to embed a image within a paragraph and that we want the image to be left justified. Take a look at Example 1 below and you will see just this effect.

Example 2: Left aligning an image and caption within the text stream

This is some text of paragraph 1, sentence 1 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 1, sentence 2 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 1, sentence 3 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 1, sentence 4 to demonstrate the principle of embedded graphic and caption information. Now comes two break tags separated by a space. This gives extra spacing between the paragraphs.

This is some text of paragraph 2, sentence 1 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 2 to demonstrate the principle of embedded graphic and caption information.

computer at computer logo
See HTML Example 2 code
This is some text of paragraph 2, sentence 3 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 4 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 5 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 6 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 7 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 8 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 9 to demonstrate the principle of embedded graphic and caption information. This is some text of paragraph 2, sentence 10 to demonstrate the principle of embedded graphic and caption information. Now comes two break tags separated by a space. This gives extra spacing between the paragraphs.



This effect was achieved by doing only two things differently:

  1. I inserted the table tag shown in the Example 2 Source Code below between the end of paragraph 2, sentence 2 and the start of paragraph 2, sentence 3 without using any breaking tags.
  2. I changed the value for the table align parameter from right to left

Example 2 Source Code
1   <table align="left" width="173" border="1" bgcolor="Aqua">
2   <tr><td width="173" align="center">
3   <img src="px/deskman.gif" width=173 height=158 hspace=2 border=0
4   </td></tr>
5   <tr><td width="173" align="center">
6   See HTML Example 1 code
7   </td></tr></table>

I hope you have found this article on embedding images within text useful. Try playing with the different table parameters and see what kinds of effects you can achieve. Happy Computing.


Return to the HTML section index.