Tables can be a very good way of displaying photographs together with text describing them.
An easy way of doing this is to create a simple 2 cell table.
<TABLE BORDER=5>
<TR>
<TD>Picture</TD>
<TD>Text</TD>
</TR>
which will look like:
| Picture | Text |
Now to add the picture
<TABLE BORDER=5>
<TR>
<TD><IMG SCR="pochi.gif"</TD>
<TD>Text</TD>
</TR>
which will look like:
 | Text |
The only problem with that is it is all over on the left of the page, so remember how to use the "Width" attibute? Make it 95% and see what happens.
<TABLE BORDER=5 WIDTH=95%>
<TR>
<TD><IMG SCR="pochi.gif"></TD>
<TD>Text</TD>
</TR>
which will look like:
| Text |
Ooops! Forgot to specify the size for the cells, so let's try it again.
<TABLE BORDER=5 WIDTH=95%>
<TR>
<TD WIDTH=20%><IMG SCR="pochi.gif"></TD>
<TD WIDTH=80%>Text</TD>
</TR>
which will, hopefully, look like:
| Text |
That is better.
Now you can add your text, and centre it, like
<TABLE BORDER=5 WIDTH=95%>
<TR>
<TD WIDTH=20%><IMG SCR="pochi.gif"></TD>
<TD WIDTH=80%>What the well dressed kangaroo should be wearing</TD>
</TR>
which will, hopefully, look like:
| What the well dressed kangaroo should be wearing |
It actually worked!
Take the border off by deleting "BORDER=5" from the table tag, and your table will look like this:
| What the well dressed kangaroo should be wearing |
Now put the "BORDER=5"back in, and try colouring it. You can add colour to you table in a variety of ways by using the tag "BGCOLOR=". You can add it to the "TABLE" tag to use the same colour background for all the cells, the "TR" tag to colour the cells in that particular row, or the "TD" tag to colour each cell individually.
So, since we are now down to a 2 cell table, let's try it by adding colour to the "TABLE" tag:
<TABLE BGCOLOR="00ff40" BORDER=5 WIDTH=95%>
<TR>
<TD WIDTH=20%><IMG SCR="pochi.gif"></TD>
<TD WIDTH=80%>What the well dressed kangaroo should be wearing</TD>
</TR>
which will, hopefully, look like:
| What the well dressed kangaroo should be wearing |
You don't have to have the picture over on the left, you can make the cells the same size and align the picture and the text like this:
<TABLE BORDER=5 WIDTH=95%>
<TR>
<TD ALIGN=RIGHT WIDTH=50%><IMG SCR="pochi.gif"></TD>
<TD ALIGN=LEFT WIDTH=50%>What the well dressed kangaroo should be wearing</TD>
</TR>
which will look like:
| What the well dressed kangaroo should be wearing |
Then remove the border and
| What the well dressed kangaroo should be wearing |
By changing the size of the individual cells, and rearranging the alignment you can put pictures and comments in different positions on your page. Instead of a 1 row, 2 cell table, make it a 2 row table and it will look like:
<TABLE BORDER=5>
<TR>
<TD><IMG SCR="pochi.gif"></TD>
</TR>
<TR>
<TD ALIGN=LEFT WIDTH=50%>What the well dressed kangaroo should be wearing</TD>
</TR>
which will look like:
|
| What the well dressed kangaroo should be wearing |
And if you centre both the Table on the page, and the picture in the cell, then remove the border, you have:
|
| What the well dressed kangaroo should be wearing |
I am afraid that is all I can think of at the moment, but if you want any more information, or are still confused, remember that you can always get help by either subscribing to the HTMLHELP mailing list, or by joining in one of our chat sessions. You will find the details about these on the main #htmlhelp page
If you think of something I have missed (and I am sure I have missed some things) please let me know and I will endeavour to add it to this page.
I spoke too soon. If you want to find out even more things you can do with "Tables", click here.
Updated 8 June 1999