Captions for Images

Posted on 2000-03-18
Last Modified: 2010-04-09
I am a beginning HTML user, doing it from scratch, so pardon me if this is too simple of a question.  But, is there a tag or property I can use to give a caption to an image?  If so, what is it, and if not, what technique do you suggest?

Thanks, Gregg
Question by:borleymsgs
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Expert Comment

ID: 2632421
If you specify an alt property this will pop up a 'tooltip' like caption for a few seconds in 4.0+ browsers.  You can't really control the delays or how long it stays or how it looks, only the text in it.  If you want to have more control, then a layer and some javascript code can be used...  but that may get a little complicated for a beginner.

Try out the alt property first and see if that will do.  If not, I or someone here can help with a layered solution.

An example:
<IMG src="someimage.gif" name="someimage" width="100" height="100" alt="This is really some image!">


Author Comment

ID: 2632469
I know about the ALT property and use it, but I was hoping for something that would stay on the page.  Since I am using tables, I am wondering about having a table cell directly under the cell containing the image.  I haven't played with that yet and am fearful of formatting problems.  What do you think?

I plan on diving into Java next week, so maybe that is the best method.  I know nothing about layers, though.

Thanks, Gregg

Expert Comment

ID: 2632795
Tables would be the easiest way to do what you're loking for, putting the caption under the the image.  It's really a simple thing to do once you understand the concept. has a good tutorial on tables that might be of some help to you.

Good luck!
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Expert Comment

ID: 2633206
Yeah, if you want the caption to always be there, then tables are the answer.  If however you only want the caption to appear when the mouse moves over the image, the alt tag or layers will be needed.

Note that JavaScript and Java are two distinct entirely different languages with very little in common except that they both work on the web, and both have C-like syntax...

Here is an example of a tables caption for an image:

    <TD><IMG src="image.gif" width="100" height="100"></TD>
    <TD align="center">A caption for the image</TD>

The basic structure is <TR> tags for defining rows, and <TD> tags for defining columns.  The tables are always defined in row major order, so you define each column in a row before starting the next row...

By default a table has some spacing introduced, and no visible border around the table cells.  You can override this by speciying values:
<TABLE cellpadding="1" cellspacing="1" border="1">

Also you can specify background colors for each individual cell or the table as a whole OR images, but images can be testy on Netscape especially with nested tables.

<TD bgcolor="blue">
<TD background="bg.gif">

I hope this gets you on your way:)
If you are interested in the layers method, I can post some code for it, but it will take a little while to get working...


Accepted Solution

Ironwolf earned 50 total points
ID: 2637286
The table structure jbrink posted should work, but you can also use the caption tag on tables:

  <caption>This caption </caption>
    <td><img src="pic.jpg"></td>

This is then the caption for the entire table, so if you wanted the picture and caption to appear inside another table, you could just put the above table as a field in another table:

    <td>This is one field</td>
        <caption>A table inside a table</caption>
          <td><img src="pic.jpg"></td>

Then you would have the caption over the picture in the subtable.

Also, in the image tag, you can use a 'title':

<img src="pic.jpg" title="print this">

so that when the mouse hovers over the image, this text is diplayed.

'alt' may also do this, but its actual purpose it to display text in the box if the picture file cannot be found. You may use both a 'title' and an 'alt', then alt text would be displayed if the picture is not found and the title would be displayed when the mouse is over the picture or the alt text.

Hope these are what you're looking for,

Expert Comment

ID: 2638915
Use <caption valign=bottom>
to put the caption below the table and make sure that your caption is short enough to fit on a single line above your table for the best appearance.  Otherwise the title will wrap and can throw off the alignment in the other cells (not always an issue).


Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question