Images and Links in Tables
Any piece of HTML can be inserted into a table cell, including images and links. Advanced HTML authors will often cut an image up and reassemble it within a table to ensure text around the image is positioned in the right places.Note: If you want to find out how other people construct their pages, try viewing the source for a web page to see how it has been made.
In this section, you will insert images of creatures to your table and a link to a website about that creature, and combine images and text in one table cell.
You will notice that the example includes the NOWRAP attribute which you have not yet studied.
<HTML> <HEAD> <TITLE>Images and Links in Tables</TITLE> </HEAD> <BODY> <H2>Images and Links in Tables</H2> <TABLE BORDER="1"> <TR> <TH>Creature</TH> <TH>Size</TH> <TH>Picture</TH> <TH>Links</TH> </TR> <TR> <TD>Tyrannosaurus Rex</TD> <TD>Bigger</TD> <TD><IMG alt="T-Rex" SRC="trex.gif"><br>Tyrannosaurus-Rex</TD> <TD NOWRAP><A HREF="http://www.fossils-uk.com/" TARGET="_blank">http://www.fossils-uk.com/</a></TD> </TR> <TR> <TD>Elephant</TD> <TD>Big</TD> <TD><IMG alt="Elephant" SRC="elephant.gif"><br>Elephant</TD> <TD NOWRAP><A HREF="http://elephant.elehost.com/" TARGET="_blank">http://elephant.elehost.com/</a></TD> </TR> <TR> <TD>Ant</TD> <TD>Small</TD> <TD><IMG alt="Ant" SRC="ant.gif"><br>Ant</TD> <TD NOWRAP><A HREF="http://www.antcolony.org/" TARGET="_blank">http://www.antcolony.org/</a></TD> </TR> </TABLE> </BODY> </HTML>
This is how it should look in your browser:
Note: The links below are external which will open in a new browser window.
Images and Links in Tables
| Creature | Size | Picture | Links |
|---|---|---|---|
| Tyrannosaurus Rex | Bigger |  Tyrannosaurus-Rex |
http://www.fossils-uk.com/ |
| Elephant | Big |  Elephant |
http://elephant.elehost.com/ |
| Ant | Small |  Ant |
http://www.antcolony.org/ |
Questions
- Is it possible to put text and images in one table cell?
- Why does the image of the elephant have a taller table cell than the image of the ant?
- Because elephants are bigger than ants
- Because they are kept in zoos
- Because the image of an elephant is taller than the image of the ant
|
Previous page... |
© 2002 Ashley Preston