Making an Image Gallery 1

by Florence W Deems

Here are the skeletal codes to make a gallery showing 4 images across. Each small image that shows in the table is a link to the full sized image.

The caption tag will be the title of the table or gallery and won't look like it's in a table.

Each image will have a nice space around it the same color as the page bg, unless you put a different color in the table tag. For this example, the image.jpg has its own blue border which is not part of the table.

Under each image will be its title.

Notice that the td width is specified only in the first row of 4 tds. These set the widths for all the rest of the td rows.

TITLE OF GALLERY

Title 1	Title 2	Title 3	Title 4
Title 5	Title 6	Title 7	Title 8

<table width="520" border="0" cellpacing="0" cellpadding="5"> <caption>TITLE OF GALLERY</caption> <!-- first row of images --> <tr><td width="120" height="120"> <a href="url of large image"> <img src="url of small image" width="120" height="120" border="0"></a></td> <td width="120"> <a href="url of large image"> <img src="url of small image" width="120" height="120" border="0"></a></td> <td width="120"> <a href="url of large image"> <img src="url of small image" width="120" height="120" border="0"></a></td> <td width="120"> <a href="url of large image"> <img src="url of small image" width="120" height="120" border="0"></a></td></tr> <!-- row for image titles for above row --> <tr><td align="center">Title 1</td> <td align="center">Title 2</td> <td align="center">Title 3</td> <td align="center">Title 4</td></tr> <!-- row 2 of images --> <tr><td height="120"> <a href="url of large image"> <img src="url of small image" width="120" height="120" border="0"></a></td> <td> <a href="url of large image"> <img src="url of small image" width="120" height="120" border="0"></a></td> <td> <a href="url of large image"> <img src="url of small image" width="120" height="120" border="0"></a></td> <td> <a href="url of large image"> <img src="url of small image" width="120" height="120" border="0"></a></td></tr> <!-- row for image titles for above row --> <tr><td align="center">Title 5</td> <td align="center">Title 6</td> <td align="center">Title 7</td> <td align="center">Title 8</td></tr></table>

Here's an example - this page is an imaging tute I wrote. Each example of 4 images plus the titles under them is one complete table. Please also see Table Art Gallery for more codes. A table using bordercolor might also make an interesting display.