Multiple Thumbnail Images with Centered Text Underneath
Typically you would use a different picture in each spot. For these examples the same pictures have been used for convenience.
First is an example without table borders and without graphic borders. The full HTML code for this example is below:
test one
other |
test two
other |
test three
other |
test four
other |
test five
other |
test six
other |
test seven
other |
test eight
other |
test nine
other |
test ten
other |
code for the above example:
<TABLE WIDTH="80%" BORDER="0" CELLPADDING="5" CELLSPACING="0" ALIGN="center">
<TR>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="0"><BR>test one<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="0"><BR>test two<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="0"><BR>test three<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="0"><BR>test four<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="0"><BR>test five<BR>other</TD>
</TR>
<TR>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="0"><BR>test six<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="0"><BR>test seven<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="0"><BR>test eight<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="0"><BR>test nine<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="0"><BR>test ten<BR>other</TD>
</TR>
</TABLE>
Next is an example without table borders but with graphic borders. The full HTML code for this example is below:
test one
other |
test two
other |
test three
other |
test four
other |
test five
other |
test six
other |
test seven
other |
test eight
other |
test nine
other |
test ten
other |
code for the above example:
<TABLE WIDTH="80%" BORDER="0" CELLPADDING="5" CELLSPACING="0" ALIGN="center">
<TR>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test one<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test two<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test three<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test four<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test five<BR>other</TD>
</TR>
<TR>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test six<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test seven<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test eight<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test nine<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test ten<BR>other</TD>
</TR>
</TABLE>
Next is an example with table borders and graphic borders. The full HTML code for this example is below.
test one
other |
test two
other |
test three
other |
test four
other |
test five
other |
test six
other |
test seven
other |
test eight
other |
test nine
other |
test ten
other |
code for the above example:
<TABLE WIDTH="80%" BORDER="1" CELLPADDING="5" CELLSPACING="0" ALIGN="center">
<TR>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test one<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test two<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test three<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test four<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test five<BR>other</TD>
</TR>
<TR>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test six<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test seven<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test eight<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test nine<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test ten<BR>other</TD>
</TR>
</TABLE>
Last is an example with larger table borders, graphic borders and the table cells are spaced apart from each other. This creates a frame like structure around the graphics. The full HTML code for this example is below.
test one
other |
test two
other |
test three
other |
test four
other |
test five
other |
test six
other |
test seven
other |
test eight
other |
test nine
other |
test ten
other |
code for the above example:
<TABLE WIDTH="80%" BORDER="1" CELLPADDING="5" CELLSPACING="5" ALIGN="center">
<TR>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test one<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test two<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test three<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test four<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test five<BR>other</TD>
</TR>
<TR>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test six<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test seven<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test eight<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test nine<BR>other</TD>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"><BR>test ten<BR>other</TD>
</TR>
</TABLE>
The only difference in these examples is the BORDER="0" or BORDER="1" attribute in the <TABLE...> and <IMG...> tags.
If you want the thumbnail images to link to bigger images, then around each of the IMG tags that indicate a thumbnail, ie these:
<IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1">
put anchor tags like this:
<A HREF="http://yourserver.com/yourlargepix.jpg"><IMG SRC="http://www.mainstreetmallonline.com/stuff/smile.gif" BORDER="1"></A>
If you need any further help or explanation about any of the above, please feel free to ask.
| 
