 |
There are other things we can do with images, such as having text next to it. This is done using a "table". I used a table to contain the images and links shown below. We can do this with images and text. The code for this is:
<table> open the table command
<tr> open the row command
<td> open the first data command
Enter your data information, such as the command for an image or text
</td> close the first data command
<td> open a second data command
Enter your data information
</td> close the second data command
</tr> close the row
</table> close the table
Note that we close EACH data command, but only close the TABLE once. If you have more than one ROW, close the row with </tr> and then open a new row <tr>
First, we tell the browser to set up a table. Then we define the first entry as being a row (TR). After that, we begin a data command (TD). The data is the same as a CELL in a table. Of course, if using a table, you will have more than one TD per row. Otherwise, there'd be no need for a table :)
To have an image with text next to it, we would be using 2 data commands on one row, as:
<table>
<tr>
<td><img src="imagename.format"</td>
<td>This is what an image table with text will look like</td>
</tr>
</table>
 |
This is what an image table with text will look like. |
We can also make the table visible by adding a bit of code:
|
This is what an image table with text inside a border will look like. |
I merely added the words "border="4" to the table command: <table border="4">
To give the table border some color, we add just a little bit more code:
<table border="4" cellpadding="4" cellspacing="3" bordercolor="D8B8A3" bordercolordark="65330F" bordercolorlight="A58455">
Now our table border has color. Otherwise, everyone viewing the page will see something different depending on their own color settings! I've noticed that the border color default is based on the desktop properties!
|
This is what an image table with text inside a colored border will look like. |
I don't like the way the text looks, so I have to set parameters for the SIZE of the CELL. A CELL is the same as the DATA.
<TD width="---%"> Both cells in the row must indicate percentages. As I wrote this page, I had to keep "playing" with the percentages until I got it to look right. This is called "TWEAKING."
|
This is what an image table with text inside a colored border and a cell percentage will look like. |
An image can also become a clickable link. We will learn that in the next tutorial, Creating Links
#1 |
#2 |
#3 |
#4 |
#5 |
#6 |
Assignments:
#1 |
#2 |
#3 |
#4 |
#5 |
#6 |
Back to Index