Chapter 11, Lesson 2
Chapter 11, Lesson 2![[INDEX]](icon_bki.gif){kind=icon}
Ch
11,
L
2 -
Images and Links in Tables
In this lesson, we'll show four different techniques for utilizing tables to present clickable-image thumbnails and clickable-text links. In all four examples, we have three image "thumbnails", each with an associated clickable-text link, and an associated caption. Clicking on either the highlighted text or the image will open an off-page image file which depicts the full-size picture.
Usually, we present the HTML source code first, and the demonstration of it second, but this time we'll reverse the order, and separate each example with a horizontal rule. Comments on each example will immediately follow the demo, and immediately precede the associated source code. Enjoy!
![[click: B1 Bomber]](acft_b1.jpg) |
B-1 Bomber | a whole lot of flying money |
![[click: F106 Fighter]](acft_106.jpg) |
F-106 Fighter | a 60's delta interceptor |
![[click: Fighters Sunset]](acft_sun.jpg) |
Fighters' Sunset | flying in formation with a gorgeous view |
In the above example, each table-row contains three table-data, the first being the clickable-thumbnail image, the second the clickable-text link, and the third the image caption. We'll accept the browser's default calculations for table width, but to make sure word-wrapping doesn't affect the vertical spacing, we'll specify '<NOBR>' for the last (third) cell in each row. If the caption extends off the screen, que será, será. However, it will be up to us, as web page authors, to make sure that the text which highlights the second cell stays reasonably short, so that the third column won't disappear.
Now, notice how we've specified the cellspacing and cellpadding. We explicitly specified cellpadding as zero, so that the row would occupy as little space vertically as possible. However, when we did that, the text inside the cells was jammed up to the left of the cell. That didn't look so hot, so we added two ' ' (non-breaking-spaces) at the start of each cell, to move it to the right slightly away from the cell border. (We also added two non-breaking spaces to the end of the lines, so the longest line wouldn't jam up against the right side of the cell). We're pretty safe in using the ' ' special character, because any browser that supports tables will also support the ' '.
Also, we specified a little cellspacing, so that the images wouldn't be scrunched up against each other. Finally, a suggestion for maximum compatibility. In theory, you can make a table as long or as wide as you want to, but in practice a real long or complicated table can cause problems with some browsers. Remember, the browser must read and interpret the entire table before it can make calculations to display it. If you have a real long table, and the receiving browser doesn't have a lot of available memory or computational horsepower to do the calculations, it could get really slow, or even crash (an impression you don't want to make). Therefore, on a table like this, try to keep it's vertical length to the equivalent of one displayed page, plus or minus. For this table, then, we would try to limit it to about 4 or 5 images. If we wanted to display more images, we'd start another table. Here's the HTML code:
<TABLE BORDER=10 CELLPADDING=0 CELLSPACING=5>
<TR>
<TD><A HREF="acft_b1.jpg"><IMG SRC="acft_b1.gif"
ALT="[click: B1 Bomber]" WIDTH=74 HEIGHT=50 ></A></TD>
<TD> <A HREF="acft_b1.jpg">B-1 Bomber</A> </TD>
<TD NOBR> <I>a whole lot of flying money </I></TD></TR>
<TR>
<TD><A HREF="acft_106.jpg"><IMG SRC="acft_106.gif"
ALT="[click: F106 Fighter]" WIDTH=74 HEIGHT=50></A></TD>
<TD> <A HREF="acft_106.jpg">F-106 Fighter</A> </TD>
<TD NOBR> <I>a 60's delta interceptor</I> </TD></TR>
<TR>
<TD><A HREF="acft_sun.jpg"><IMG SRC="acft_sun.gif"
ALT="[click: Fighters Sunset]" WIDTH=74 HEIGHT=50></A></TD>
<TD> <A HREF="acft_sun.jpg">Fighters' Sunset</A> </TD>
<TD NOBR> <I>flying in formation with a gorgeous view</I> </TD></TR>
</TABLE>
|
B-1 Bomber |
| a whole lot of flying money | |
|
F-106 Fighter |
| a 60's delta interceptor | |
|
Fighters' Sunset |
| flying in formation with a gorgeous view |
This example retains most of the features of the first example (which you'll wan't to review if you haven't read the comments thus far). In the first demo, the text-link and the text-caption were in the same row. This time, we decided to place them on two different rows. The clickable-image thumbnail will occupy the first data cell in the first row, but we set it's 'ROWSPAN' attribute to '2', so that it will occupy the first column on both rows. We place the clickable-text in the second data cell on the first row, and we place the caption text in the second row. This allows for a more efficient use of table space than the first example.
We did something else different with this table, that you may or may not have noticed. We specified a 'BORDER=0' attribute inside the 'IMG' tag, so that the highlighted "link-border" no longer shows around the thumbnail image. Since we have a clickable-text link, we don't really need to highlight the image to show it's clickable. Mind you, it's still clickable, although we could have put a plain (non-clickable) image in that cell, instead, and it would have looked (but not behaved) the same. Here's the HTML code:
<TABLE BORDER=10 CELLPADDING=0 CELLSPACING=5>
<TR>
<TD ROWSPAN=2><A HREF="acft_b1.jpg"><IMG SRC="acft_b1.gif"
ALT="[click: B1 Bomber]" WIDTH=74 HEIGHT=50 BORDER=0>
</A></TD>
<TD NOBR> <A HREF="acft_b1.jpg">B-1 Bomber</A> </TD></TR>
<TR>
<TD NOBR> <I>a whole lot of flying money</I> </TD></TR>
<TR>
<TD ROWSPAN=2><A HREF="acft_106.jpg"><IMG SRC="acft_106.gif"
ALT="[click: F106 Fighter]" WIDTH=74 HEIGHT=50 BORDER=0>
</A></TD>
<TD NOBR> <A HREF="acft_106.jpg">F-106 Fighter</A> </TD></TR>
<TR>
<TD NOBR> <I>a 60's delta interceptor</I> </TD></TR>
<TR>
<TD ROWSPAN=2><A HREF="acft_sun.jpg"><IMG SRC="acft_sun.gif"
ALT="[click: Fighters Sunset]" WIDTH=74 HEIGHT=50 BORDER=0> </A></TD>
<TD NOBR> <A HREF="acft_sun.jpg">Fighters' Sunset</A> </TD></TR>
<TR>
<TD NOBR> <I>flying in formation with a gorgeous view</I> </TD></TR>
</TABLE>
|
|
|
| B-1 Bomber | F-106 Fighter | Fighters' Sunset |
| a whole lot of flying money | a 60's delta interceptor | flying in formation with a gorgeous view |
In the above example, we decided to arrange the images horizontally rather than vertically. Instead of arranging the image and text in rows, we'll arrange them in columns, which gives our web page a different look. This is going to restrict us somewhat, because we want to make sure the table is limited to the number of images that will fit on a minimal browser screen (typically, 640 X 480 pixels). By trial and error, we decided that 150 pixels cell (per column) would suffice to display our clickable-text link on a single line, which limits us to an adequate 20 characters. That 150 pixels width turns out to be plenty wide for our clickable-image thumbnail. The image caption text, which is placed in the third row, is allowed to word-wrap downward as far as it needs. With 150 pixels of width, we can have up to 4 images in a row, which would make a table 600 pixels wide (about the maximum width I recommend for compatibility reasons). In our case, with only three images, we specify a table 'WIDTH=450' attribute. By the way, we placed the 'WIDTH=150' attribute inside the three image-caption data cells, so that the browser knows it has to word-wrap there.
Notice that we placed an 'ALIGN=CENTER' in each row, to center the image and text in the columns. Also, in this example, we've eliminated the extra ' 's, and inserted a little cellspacing, since we're not so concerned about conserving vertical space.
While this approach has a nice look on the web page, it has the disadvantage of having the image, its link, and its text separated from each other in the source code. In the previous examples, the code had image1, link1, text1; image2, link2, text2; image3, link3, text3. In this example, we have image1, image2, image3; link1, link2, link3; text1, text2, text3. Here's the HTML code:
<TABLE BORDER=10 CELLPADDING=10 CELLSPACING=5 WIDTH=450>
<TR ALIGN="CENTER">
<TD><A HREF="acft_b1.jpg"><IMG SRC="acft_b1.gif"
ALT="[click: B1 Bomber]" WIDTH=74 HEIGHT=50 ></A></TD>
<TD><A HREF="acft_106.jpg"><IMG SRC="acft_106.gif"
ALT="[click: F106 Fighter]" WIDTH=74 HEIGHT=50></A></TD>
<TD><A HREF="acft_sun.jpg"><IMG SRC="acft_sun.gif"
ALT="[click: Fighters Sunset]" WIDTH=74 HEIGHT=50></A>
</TD></TR>
<TR ALIGN="CENTER">
<TD><A HREF="acft_b1.jpg">B-1 Bomber</A></TD>
<TD><A HREF="acft_106.jpg">F-106 Fighter</A></TD>
<TD><A HREF="acft_sun.jpg">Fighters' Sunset</A></TD></TR>
<TR ALIGN="CENTER">
<TD WIDTH=150><I>a whole lot of flying money</I></TD>
<TD WIDTH=150><I>a 60's delta interceptor</I></TD>
<TD WIDTH=150><I>flying in formation with a gorgeous view</I></TD></TR>
</TABLE>
|
|
|
In this final demonstration, above, we give each image it's own table, so that we can make use of the table's caption tag to build the associated clickable link and text. There are now three tables, and each table has only one row and one table-data cell, which contains the clickable-image thumbnail. We specify the table's border, and the cellspacing and cellpadding as zero. We'll use the table's caption in a tricky way.
The '<CAPTION>' tag allows the use of '<BR>' tags but not '<P>' tags. We place the table-caption between the opening '<>' and the first '<TR>' tag, as recommended. We begin the table caption with the '<NOBR>' (remember that one? when used with text, it turns word wrapping OFF until the next explicit line break). Then (still inside the caption) we place our clickable-text link, an explicit line break ('<BR>' to move it to the next line), another '<NOBR>', and the remainder of the plain-text image caption. We want the table-caption below the image, so we use the caption's (not the table's) 'ALIGN="BOTTOM"' attribute to force it. The result is a clickable thumbnail with a picture-frame and the caption close below.
By the way, in checking this example out, I discovered that some browsers don't handle the extended text very gracefully. In Netscape, there was a minimal picture-frame placed around the image, but in Internet Explorer, the browser extended empty table-space (i.e., the picture-frame) out to the right as far as the caption-text went. (It didn't look so hot) Be forewarned... Here's the HTML code:
<TABLE BORDER=10 CELLPADDING=0 CELLSPACING=0>
<CAPTION ALIGN="BOTTOM"><A HREF="acft_b1.jpg"><NOBR>B-1 Bomber</A><BR>
<NOBR><I>a whole lot of flying money</I></CAPTION>
<TR><TD><A HREF="acft_b1.jpg"><IMG SRC="acft_b1.gif"
ALT="[click: B1 Bomber]" WIDTH=74 HEIGHT=50 ></A></TD></TR>
</TABLE>
<BR>
<TABLE BORDER=10 CELLPADDING=0 CELLSPACING=0>
<CAPTION ALIGN="BOTTOM"><A HREF="acft_106.jpg"><NOBR>F-106 Fighter</A><BR>
<NOBR><I>a 60's delta interceptor</I></CAPTION>
<TR>
<TD><A HREF="acft_106.jpg"><IMG SRC="acft_106.gif"
ALT="[click: F106 Fighter]" WIDTH=74 HEIGHT=50></A></TD></TR>
</TABLE>
<BR>
<TABLE BORDER=10 CELLPADDING=0 CELLSPACING=0>
<CAPTION ALIGN="BOTTOM"><A HREF="acft_sun.jpg"><NOBR>Fighters' Sunset</A><BR>
<NOBR><I>flying in formation with a gorgeous view</I></CAPTION>
<TR><TD><A HREF="acft_sun.jpg"><IMG SRC="acft_sun.gif"
ALT="[click: Fighters Sunset]" WIDTH=74 HEIGHT=50></A></TD>
</TR>
</TABLE>
... leave e-mail ...
