Curved Borders

Ric 的个人资料HTML Tutorial日志列表

工具

帮助

8月3日

VISIT MY NEW SITE, CLICK HERE

Curved Borders

Have you ever seen webpage’s with tables that have curved borders? Want to know how to add them? Then just follow this relatively simple tutorial:

I have created two sets of tables for this tutorial, one for pages with dark backgrounds (black, midnight blue, etc), and one with light backgrounds (white, pink, etc), choose whichever you want.

First things first, get the files:
If you want a black background then these are the files you need to download CLICK HERE, if you want an example of the table CLICK HERE.
If you want a white background then these are the files you need to download CLICK HERE, if you want an example of the table CLICK HERE.
To open these files you need WinZip CLICK HERE to get the program (its free).
OK, so now you have the files its time to store them somewhere, I would recommend signing up for an account with 50 webs, CLICK HERE to go there (also free). You can store 60MB there for free.

Now you need the code for you table, for the white background table the code is:

<table width="85%" border="0" align="center" cellpadding="0" cellspacing="0">
<td width="16"><img src="top_left.gif" width="16" height="16"></td>
<td height="16" background="top_middle.gif"><img src="top_middle.gif" width="16" height="16"></td>
<td width="24"><img src="top_right.gif" width="24" height="16"></td>
<tr>
<td width="16" background="left.gif"><img src="left.gif" width="16" height="11"></td>
<td>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="3" bgcolor=ffffff>

YOUR THINGS GO HERE

</table>
</td>
<td width="24" background="right.gif"><img src="right.gif" width="24" height="11"></td>
<tr>
<td width="16" height="16"><img src="bottom_left.gif" width="16" height="16"></td>
<td height="16" background="bottom_middle.gif"><img src="bottom_middle.gif" width="16" height="16"></td>
<td width="24" height="16"><img src="bottom_right.gif" width="24" height="16"></td>
</table>

For the black background table the code is:
<table width="85%" border="0" align="center" cellpadding="0" cellspacing="0">
<td width="16"><img src="top_left2.gif" width="16" height="16"></td>
<td height="16" background="top_middle2.gif"><img src="top_middle2.gif" width="16" height="16"></td>
<td width="24"><img src="top_right2.gif" width="24" height="16"></td>
<tr>
<td width="16" background="left2.gif"><img src="left2.gif" width="16" height="11"></td>
<td>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="3" bgcolor=000000>

YOUR THINGS GO HERE

</table>
</td>
<td width="24" background="right2.gif"><img src="right2.gif" width="24" height="11"></td>
<tr>
<td width="16" height="16"><img src="bottom_left2.gif" width="16" height="16"></td>
<td height="16" background="bottom_middle2.gif"><img src="bottom_middle2.gif" width="16" height="16"></td>
<td width="24" height="16"><img src="bottom_right2.gif" width="24" height="16"></td>
</table>

In the above two codes you can see there are several colour coded parts, these can be changed for a desired effect:

Firstly there is the 85%, this allows you to change the amount of your blog the table takes up, you can changed it to whatever size you want. (Tops obviously 100%)
Next there is the center, this states where on your blog you table appears (if you table is under 100%, if it is 100% it will just take up the entire blog width), it can be center, left or right
Now there are all the images you are using, just putting this code directly onto your site will not produced the desired effect, you have to make sure all the links of your pictures are working. To do this just follow these simple steps:
- (Presuming you are using 50webs.com), once you have set up a new account go to your accounts main menu and click on File Manager (Screenshot 1)
- Then click on your sub domain (Screenshot 2), this will display all you files (if its a new account there should be none, or maybe 1 (an index.html file))
- Scroll down to the bottom and there are 12 file upload slots (Screenshot 3)
- Click browse on any of them and locate the files you downloaded before off my site (Screenshot 4), you can only upload one of these files per upload slot
- Click OK and repeat these steps until all your files are in separate upload slots (Screenshot 5)
- Then click upload files (Screenshot 6). You will get a confirmation of the uploads, then move onto these steps.
And finally, you replace the YOUR THINGS GO HERE with whatever you want in your table!
To put this code into your blog you will need to create a new blog, click the <HTML> button, and paste the code you have edited (Ctrl+V), click the <HTML> button again and you should have a table!