et's take a look at a new way to frame an image. In this section we are going to use a table to frame an image. You may be surprised at what we come up with. First, take a look at this picture with no frame.
ow, we'll put a small frame around it by setting the border to 3 and the background color to red. And this is what it looks like. The border is gray because we have not set a color here. You will notice that the width and height of the image have been set to assure faster loading.
|
To do the same, this is how you write it:
lright so next let's add a border color around it. Make it black. Also change the size of the border to 15, that way our picture will now appear to have a frame around it.
|
This is how you write the coding for the above frame:
ooking good, huh? In the example below, I have added a Table Row and colored its' border sort of orangy-yellow.
|
This is how you write it:
You can use 'bordercolordark' and bordercolorlight' to make the frame sort of 3D. Below I used a darker and lighter blue with the background color set to white.
|
|
<TABLE BORDER=15 bgcolor="#FFFFFF" bordercolor="#000000" bordercolordark="#330099" bordercolorlight="#00ccff"> <TR> <TD><IMG SRC="images/falls.jpg" WIDTH=350 HEIGHT=228 BORDER=0></TD></TR></TABLE> |
The only difference in these two pictures is that in the one above I did not add a bordercolor in the <TR> tag and below I did. And as you can see, I made it white. Thus it has a more solid border around it. You can play around with your borders for different effects and add your own frames using tables.
|
Here is the code:
|
<TABLE BORDER=15 bgcolor="#FFFFFF" bordercolor="#000000" bordercolordark="#330099" bordercolorlight="#00ccff"> <TR bordercolor="#FFFFFF> <TD><IMG SRC="images/falls.jpg" WIDTH=350 HEIGHT=228 BORDER=0></TD></TR></TABLE> |
hat's it for today, guys! Now it's your turn. Go on and make some tables!