Although content is king, the way you present that content on your web site really makes a big difference. Sometimes you need to highlight certain sections, or surround images with frames that look better than those blue HTML lines. To see it visually, you should read this article online at:
http://www.bytesworth.com/learn/html00011.asp
Following these steps as they appear, you can create extremely fancy looking tables with very little effort. A word of cautious though: you’ll have to be patient while going through this tutorial.
[1] In your preferred graphics software, create the sort of frame you want to display. I assume you create a three-dimensional frame the way it is in the above example.
[2] After creating the frame, you have to extract eight images out of it. You’ll get plenty of examples on the Net where they say you can do this with just two or four images, but when you create a fancy, three-dimensional frame, then all four sides and all four corners can look different.
[3] Select (using the Marquee tool) the top-left corner, let us call it TL, and note down the co-ordinates such as TLx1 to TLx2 and TLy1 to TLy2. Copy this portion to the clipboard, and paste it into a new file. Let us call this new file as Top-Left.gif.
[4] Similarly, select the top-right corner — TR — and note down the co-ordinates as TRx1 to TRx2 and TRy1 to TRy2. You will have to take care that TLy1=TRy1 and TLy2=TRy2. Copy TR to the clipboard and save it into a new file — Top-Right.gif.
[5] Now that top-left and top-right corners have been selected, based on their height (y1 to y2), we can create the top line of the frame. Copy any portion (let us call it TOPLINE) from the top line between (and excluding) TL and TR, taking care that TOPLINEy1=TLy1=TRy1 and TOPLINEy2=TLy2=TRy2. Save the portion in a new file — Top-Line.gif.
[6] Select the bottom-left corner — BL — from BLx1 to BLx2 and BLy1 to BLy2. Take care that BLx1=TLx1 and BLx2=TLx2. Save this file as Bottom-Left.gif.
[7] We can select the left line now that is between (and excluding) TL and BL. Call this line LEFTLINE and make LEFTLINEx1=TLx1=BLx1 and LEFTLINEx2=TLx2=BLx2. Copy this portion into a new file called Left-Line.gif.
[8] Co-ordinates for the bottom-right — BR — corner should be in this BRx1=TRx1 to BRx2=TRx2 and BRy1=BLy1 to BRy2=BLy2. Copy this portion to a new file called Bottom-Right.gif.
[9] Select the bottom line between (and excluding) BL and BR such that BOTTOMLINEy1=BLy1=BRy1 and BOTTOMLINEy2=BLy2=BRy2. Copy this portion to a new file called Bottom-Line.gif.
[10] Select the right line between (and excluding) TR and BR such that RIGHTLINEx1=TRx1=BRx1 and RIGHTLINEx2=TRx2=BRy2. Copy this portion to a new file called Right-Line.gif.
[11] Now that we have all the eight files, we create a table that has three rows and three columns.
[12] Set the width and height of the top-left cell of the table equal to that of Top-Left.gif and using the <img> tag, put the file there.
[13] Set the width and height of the top-right cell of the table equal to that of Top-Right.gif and using the <img> tag, put the file there.
[14] Set the width and height of the bottom-left cell of the table equal to that of Bottom-Left.gif and using the <img> tag, put the file there.
[15] Set the width and height of the bottom-right cell of the table equal to that of Bottom-Right.gif and using the <img> tag, put the file there.
[16] Set Top-Line.gif as the background of the top-middle cell of the table.
[17] Set Bottom-Line.gif as the background of the bottom-middle cell of the table.
[18] Set Left-Line.gif as the background of the left-middle cell of the table.
[19] Set Right-Line.gif as the background of the right-middle cell of the table.
[20] Use the central cell of the table to fill it with your personal content.
Amrit Hallan is a freelance copywriter,
and a website content writer. He also dabbles
with PHP and HTML. For more tips and tricks in
PHP, JavaScripting, XML, CSS designing and
HTML, visit his blog at
http://www.aboutwebdesigning.com
