Example 1. Table with caption

Table 2: Captions undernieth the image

Attributes: Simple table with caption under the image

The addition of more table data cells  will place images them next to each other horizontally on the same row, until that row is closed. We’re also going to specify a size for the table so it doesn’t extend further than the area you want it in. Monitors display in pixels or percentages, so we first need to know how many pixels wide and/or high the area is we want the table in. If you’re not sure and you don’t know how to find out, then you can simply take a screen capture (Windows – press the ‘Print Screen’ keyboard button, Mac – Cmd+Shift+4) , and open in Photoshop or any image editing program to get the size in pixels. The following table is 500 pixels wide to display nicely in this article area, and the height is at 100% since we are not limited vertically. It will have two columns of  cells with the left side containing an image.


Notice the HTML code for inserting an image. It is within brackets, and contains the HTML code ‘img src’ (image source) and the URL for the image. The ‘alt’ tag (means alternative text) is for the image description. Because this HTML coding uses XHTML, we need to take our HTML image tag a step further and close it with a space and a / before the closing bracket:


The border=”1? in the table tag means only that you can see the edges of the cells which is helpful when building tables. When you’re happy with the table, you can change the 1 to 0, or delete the border command entirely.

	This text is in the table data cell on the right.
Caption text centered under the image.	Caption text centered under the image.

Example 3