SoSaysSunny.com: Virtual Photo Frames Using HTML Tables

Virtual Photo Frames Using HTML Tables

How to Create Virtual Photo Frames and Mats

Have you ever noticed that museum masterpieces always seem to be framed?

Frames are not mere decoration, they also serve a purpose:
They contain the viewer's attention to the boundaries of the artwork while encouraging exploration into the corners.

Check it out for yourself:

Look at the undecorated pictures below.
Don't you find your eyes wandering about or focused only at the center of an image?
Now scroll down to the framed pictures.
Aren't you more focused on the picture and its entire composition, all the way to the corners?

Now, you could use a graphics package to put a frame into each and every one of your photos ...
or you could simply wrap them in a snippet of HTML (see the template codes below).

BEFORE: Without HTML Decoration

AFTER: With HTML Decoration

METHOD 1:
HTML Only

Titanic Flying Lesson

METHOD 2:
HTML and Background Images

Hawaii was beautiful !

METHOD 3:
HTML and Frame Images

The Mona Lisa

COMMENTS

STYLE: Nice

DIFFICULTY: Pretty easy, no images!

FILES TO FIND: None

STYLE: Dressy or playful, depending on images

DIFFICULTY: Quick and easy

FILES TO FIND: Background tile images

STYLE: Most formal, depending on frame

DIFFICULTY: A little more complicated

FILES TO FIND: Frame image set

No
Additional
Images

Which style you choose is up to you:

HTML frames are an easy way to dress up your photos ...
just copy the codes and customize with your own colors and file names.

MIX AND MATCH COLLAGE


Play around with the options to create a collage or add a text box.

Play around with these effects to create the perfect frame for your photo.

Scroll down to see the HTML codes I used.

Browse a collection of background tile images.

Browse a collection of frame image sets.

http://sosayssunny.com/html_photo_frames.html Last revision: January 9, 2016 [ WELCOME ] [ HOME ] [ SITE MAP ]

============= C O D E S : ============= METHOD 1: HTML Only (Titanic) ============================== <TABLE BGCOLOR="#A3A3A3" BORDER=3 CELLSPACING=7 CELLPADDING=20>  <CAPTION ALIGN="bottom">Titanic Flying Lesson</CAPTION> <TR><TD BGCOLOR="#FFFFEE" ALIGN="center" VALIGN="middle">  <TABLE BGCOLOR="#72C3FB" BORDER=0 CELLSPACING=5 CELLPADDING=2>  <TR><TD BGCOLOR="#FFCCDD" WIDTH=130 HEIGHT=105 ALIGN="center" VALIGN="middle">  <IMG SRC="titanic.jpg" WIDTH=130 HEIGHT=105 ALT=""> </TD></TR> </TABLE> </TD></TR> </TABLE> SIMPLEST VERSION WITH SINGLE IVORY MAT AND NO CAPTION: <TABLE BGCOLOR="#A3A3A3" BORDER=3 CELLSPACING=7 CELLPADDING=20>  <TR><TD BGCOLOR="#FFFFEE" ALIGN="center" VALIGN="middle">  <IMG SRC="titanic.jpg" WIDTH=130 HEIGHT=105 ALT=""> </TD></TR> </TABLE> METHOD 2: HTML and Background Images (Hawaii) ============================================== <TABLE BACKGROUND="tile_malachite.jpg" BGCOLOR="#003300" BORDER=2 CELLSPACING=12 CELLPADDING=25>  <CAPTION ALIGN="bottom">Hawaii was beautiful !</CAPTION> <TR><TD BACKGROUND="tile_fronds.jpg" BGCOLOR="#DDFFDD" ALIGN="center" VALIGN="middle">  <IMG SRC="hawaii.jpg" WIDTH=130 HEIGHT=105 ALT=""> </TD></TR> </TABLE> METHOD 3: HTML and Frame Images (Mona Lisa) ============================================ <TABLE BGCOLOR="#D0AC39" BORDER=0 CELLSPACING=0 CELLPADDING=0>  <CAPTION ALIGN="bottom">The Mona Lisa</CAPTION> <TR HEIGHT=10>  <TD BACKGROUND="frame_NW.png" WIDTH=10></TD>  <TD BACKGROUND="frame_N.png"> </TD>  <TD BACKGROUND="frame_NE.png" WIDTH=10></TD>  <TR>  <TD BACKGROUND="frame_W.png"</TD>  <TD BGCOLOR="#EEDD99" ALIGN="center" VALIGN="middle">  <IMG SRC="mona.jpg" WIDTH=100 HEIGHT=150 VSPACE=12 HSPACE=12 ALT="">  </TD> <TD BACKGROUND="frame_E.png"</TD>  <TR HEIGHT=10>  <TD BACKGROUND="frame_SW.png"</TD>  <TD BACKGROUND="frame_S.png"></TD>  <TD BACKGROUND="frame_SE.png"></TD>  </TR> </TABLE> MIX AND MATCH COLLAGE ===================== <TABLE BACKGROUND="tile_malachite.jpg" BGCOLOR="#003300" BORDER=4 CELLSPACING=10 CELLPADDING=15>  <TR>  <TD COLSPAN=2 BGCOLOR="#72C3FB" ALIGN="center" VALIGN="middle">  <IMG SRC="titanic.jpg" WIDTH=130 HEIGHT=105 ALT="titanic"> </TD> <TD ROWSPAN=2 BGCOLOR="#EEDD99" ALIGN="center" VALIGN="middle">  <IMG SRC="mona.jpg" WIDTH=100 HEIGHT=150 ALT="mona lisa"> </TD> </TR><TR>  <TD ROWSPAN=2 BGCOLOR="#330000" ALIGN="left" VALIGN="middle">  Play around<BR> with the<BR> options to<BR> create a<BR> collage or<BR> add a text<BR> box. </TD> <TD BACKGROUND="tile_clover.gif" BGCOLOR="#009900">  </TD> </TR><TR>  <TD COLSPAN=2 BACKGROUND="tile_fronds.jpg" BGCOLOR="#DDFFDD" ALIGN="center" VALIGN="middle">  <IMG SRC="hawaii.jpg" WIDTH=130 HEIGHT=105 ALT="hawaii"> </TD> </TR> </TABLE> ------------------------------------------------------------------------------------------------------------------------- ============= N O T E S : ============= * Use the optional TABLE CAPTION to place a brief description above the frame (or add ALIGN="bottom" to place it below). * It's a good idea to close all the TD and TR tags when nesting tables. * Putting the WIDTH and HEIGHT in both the IMG tag and the innermost cell (TD tag) will help the borders come out evenly. ========================================================================= METHODS 1 & 2: HTML Only (Titanic) & HTML and Background Images (Hawaii) ========================================================================= The structure of this table is a single cell containing text, the photo, or another table (see Optional Nested Table below). The table forms a frame with a beveled edge and a single mat. * The TABLE's BACKGROUND image is optional and sets the pattern on the photo frame. Always include a background color (see next) in case the background image doesn't load properly. * The TABLE's BGCOLOR sets the color of the photo frame. Even if you change this color, the beveled parts of the frame will still be grey, so I usually leave it medium grey, make it black, or choose a color similar to the frame's background image. * The TABLE's BORDER sets the width of the grey 3-D beveled outer edge of the frame. Larger photos should probably have a larger border. * The TABLE's CELLSPACING sets the width of the frame. Larger photos should probably have a wider frame. * The TABLE's CELLPADDING sets the width of the outer mat. * The cell (TD) may optionally have a BACKGROUND image that sets the pattern of the outer mat. Always include a background color (see next) in case the background image doesn't load properly. * The cell's (TD) BGCOLOR sets the color of the outer mat. * The cell (TD) could contain: some text, the photo (IMG), or a nested TABLE to add more mats (see next). ======================================================= METHOD 1: HTML Only (Titanic) -- Optional Nested Table ======================================================= The structure of this table is a single cell containing the photo, with the table forming the two inner mats. * The TABLE's BACKGROUND, BGCOLOR, and CELLSPACING set the pattern, color, and width of the second mat (blue). * The TABLE's BORDER should normally be set to 0 but can optionally be set to 1 for a 3-D raised effect on the second mat (blue). * The TABLE's CELLPADDING sets the width of the third mat (pink). * The cell (TD) may have a BACKGROUND image and BGCOLOR to set the pattern and color of the third (innermost) mat. * The cell (TD) could contain some text or the photo (IMG) (or more nested tables if you want to go crazy with mats!). * Aesthetics: Vary the widths of the mats, with a wide neutral-color outer mat. Use the narrower inner mats to pick up brighter colors. The innermost mat should contrast the edges of the photo. For example, switching the pink and blue mats in the Titanic frame wouldn't be as aestheticly pleasing because the blue would blend with the sky (see the collage) and a wide pink mat could be distracting. ============================================ METHOD 3: HTML and Frame Images (Mona Lisa) ============================================ The structure of this table is a 3x3 grid with the photo in the center cell. The eight surrounding cells contain the frame parts -- I've labeled them according to their location in the frame: NW (northwest), N (north), NE (northeast), W (west), E (east), SW (southwest), S (south), and SE (southeast). * CODES: <TABLE BGCOLOR="#D0AC39" BORDER=0 CELLSPACING=0 CELLPADDING=0>  <CAPTION ALIGN="bottom">The Mona Lisa</CAPTION> <TR HEIGHT=10>  <TD BACKGROUND="frame_NW.png" WIDTH=10></TD>  <TD BACKGROUND="frame_N.png"> </TD>  <TD BACKGROUND="frame_NE.png" WIDTH=10></TD>  <TR>  <TD BACKGROUND="frame_W.png"</TD>  <TD BGCOLOR="#EEDD99" ALIGN="center" VALIGN="middle">  <IMG SRC="mona.jpg" WIDTH=100 HEIGHT=150 VSPACE=12 HSPACE=12 ALT="">  </TD> <TD BACKGROUND="frame_E.png"</TD>  <TR HEIGHT=10>  <TD BACKGROUND="frame_SW.png"</TD>  <TD BACKGROUND="frame_S.png"></TD>  <TD BACKGROUND="frame_SE.png"></TD>  </TR> </TABLE> * The TABLE's BGCOLOR sets the color of the frame in case the frame images don't load properly. * The TABLE's BORDER, CELLSPACING, and CELLPADDING are all set to zero to hide the table's boundaries. * The top and bottom rows (TR) are set to 10 pixels in HEIGHT, matching the frame image (IMG) HEIGHT. * The left and right cells (TD) are set to 10 pixels in WIDTH, matching the frame image (IMG) WIDTH. * The center cell (TD) has multiple options: NO MAT: Set the center cell's (TD) HEIGHT and WIDTH equal to the photo's dimensions for a tight fit. SINGLE MAT: Use the cell's (TD) BACKGROUND and/or BGCOLOR to set the mat's pattern and/or color. Set the photo's (IMG) VSPACE and HSPACE to the width of the mat you'd like. MULTI MAT: Nest a table (see above) to add inner mats. ===================== Mix and Match Collage ===================== Although there are only 5 boxes visible in this collage, the table is actually a 3x3 grid (9 boxes) with some items taking up multiple cells: GRID LAYOUT OF COLLAGE ---------------- --------------------------------- | A1 | A2 | A3 | | Titanic A1 & A2 | Mona | |----+----+----| |---------------------| Lisa | | B1 | B2 | B3 | | Text | Clover B2 | A3 & B3 | |----+----+----| | Box |---------------------| | C1 | C2 | C3 | | B1 & C1 | Hawaii C2 & C3 | ---------------- --------------------------------- * COLLAGE CODES IN WORDS: ROW A Titanic (A1 & A2) is COLSPAN=2 [ Skip, A2 is already Titanic ] Mona Lisa (A3 & B3) is ROWSPAN=2 ROW B Text Box (B1 & C1) is ROWSPAN=2 Clover (B2) [ Skip, B3 is already Mona Lisa ] ROW C [ Skip, C1 is already Text Box ] Hawaii (C2 & C3) is COLSPAN=2 [ Skip, C3 is already Hawaii] * COLLAGE CODES: <TABLE BACKGROUND="tile_malachite.jpg" BGCOLOR="#003300" BORDER=4 CELLSPACING=10 CELLPADDING=15>  <TR>  <TD COLSPAN=2 BGCOLOR="#72C3FB" ALIGN="center" VALIGN="middle">  <IMG SRC="titanic.jpg" WIDTH=130 HEIGHT=105 ALT="titanic"> </TD> <TD ROWSPAN=2 BGCOLOR="#EEDD99" ALIGN="center" VALIGN="middle">  <IMG SRC="mona.jpg" WIDTH=100 HEIGHT=150 ALT="mona lisa"> </TD> </TR><TR>  <TD ROWSPAN=2 BGCOLOR="#330000" ALIGN="left" VALIGN="middle">  Play around<BR> with the<BR> options to<BR> create a<BR> collage or<BR> add a text<BR> box. </TD> <TD BACKGROUND="tile_clover.gif" BGCOLOR="#009900">  </TD> </TR><TR>  <TD COLSPAN=2 BACKGROUND="tile_fronds.jpg" BGCOLOR="#DDFFDD" ALIGN="center" VALIGN="middle">  <IMG SRC="hawaii.jpg" WIDTH=130 HEIGHT=105 ALT="hawaii"> </TD> </TR> </TABLE> * If you make a collage, expect to lose some control over mat widths due to the way each browser renders tables. * Be sure to add line breaks (BR) to any text boxes. Otherwise, the table will stretch to full screen width. * Don't worry if the collage is too complicated for you at first ... Just start playing with the single photo methods, tinkering with small changes, and see what happens. After several of those, the collage will make more sense. SOME COOL COLLAGE LAYOUTS: My Collage Above ---------------- ---------------- ---------------- ---------------- --------------------- --------------------- | A1 | A2 | A3 | | A1 & A2 | A3 | | A1 | A2 | A3 | | A1 | A2 & A3 | | A1 & A2 | A3 | A4 | | A1 A2 | A3 | A4 | |----+----+----| |---------| & | |---------| & | |--------------| |--------------| & | | & |---------| | B1 | B2 | B3 | | B1 | B2 | B3 | | B1 B2 | B3 | | B1 B2 | B3 | | B1 | B2 & B3 | B4 | | B1 B2 | B3 B4 | |----+----+----| | & |---------| | & |----| | & |----| | & |--------------| |---------| & | | C1 | C2 | C3 | | C1 | C2 & C3 | | C1 C2 | C3 | | C1 C2 | C3 | | C1 | C2 | C3 & C4 | | C1 | C2 | C3 C4 | ---------------- ---------------- ---------------- ---------------- --------------------- --------------------- 3 x 3 Template 2wide 2tall & 1 1big, 1tall, & 3 1big, 1wide, & 3 3wide, 2tall, & 2 2big & 4small --------------------- --------------------- --------------------- --------------------- --------------------- | A1 | A2 | A3 | A4 | | A1 | A2 | A3 | A4 | | A1 & A2 | A3 | A4 | | A1 & A2 | A3 & A4 | | A1 & A2 | A3 A4 | |----+----+----+----| |----+---------+----| |--------------| & | |-------------------| |---------| & | | B1 | B2 | B3 | B4 | | B1 | B2 B3 | B4 | | B1 | B2 B3 | B4 | | B1 | B2 | B3 | B4 | | B1 | B2 | B3 B4 | |----+----+----+----| |----| & |----| |----| & |----| | & |----+----| & | |---------+---------| | C1 | C2 | C3 | C4 | | C1 | C2 C3 | C4 | | C1 | C2 C3 | C4 | | C1 | C2 | C3 | C4 | | C1 C2 | C3 | C4 | |----+----+----+----| |----+---------+----| | & |--------------| |-------------------| | & |----| & | | D1 | D2 | D3 | D4 | | D1 | D2 | D3 | D4 | | D1 | D2 | D3 & D4 | | D1 & D2 | D3 & D4 | | D1 D2 | D3 | D4 | --------------------- --------------------- --------------------- --------------------- --------------------- 4 x 4 Template 1big & 12 school pics 1big 2wide 2tall & 4 4wide, 2tall, & 4 2big 1wide 1tall & 4 --------------------- --------------------- --------------------- --------------------- --------------------- | A1 | A2 & A3 | A4 | | A1 & A2 | A3 & A4 | | A1 | A2 | A3 | A4 | | A1 | A2 & A3 | A4 | | A1 & A2 | A3 | A4 | | & |----+----| & | |---------+---------| |----| & |---------| | & |--------------| |--------------+ & | | B1 | B2 | B3 | B4 | | B1 | B2 B3 | B4 | | B1 | B2 | B3 & B4 | | B1 | B2 | B3 & B4 | | B1 | B2 B3 | B4 | |----+----+----+----| | & | & | & | |---------+---------| |----| & |---------| | & | & |----| | C1 | C2 | C3 | C4 | | C1 | C2 C3 | C4 | | C1 & C2 | C3 | C4 | | C1 | C2 | C3 | C4 | | C1 | C2 C3 | C4 | | & |----+----| & | |---------+---------| |---------| & |----| |---------| & |----| |--------------+ & | | D1 | D2 & D3 | D4 | | D1 & D2 | D3 & D4 | | D1 | D2 | D3 | D4 | | D1 & D2 | D3 | D4 | | D1 & D2 | D3 | D4 | --------------------- --------------------- --------------------- --------------------- --------------------- 2wide, 4tall, & 4 1big, 4wide, 2tall 2wide, 2tall, & 8 3wide, 3tall, & 4 1big 2wide 3tall & 2 ------------------------------------------------------------------------------------------------------------------------- G O O D L U C K & H A V E F U N ! ! !