Posted by touhid | Posted in HTML, Website Design & Development | Posted on 01-10-2009
Creating rounded corners involves a working knowledge of HTML tables and for that you can refer to the in-depth HTML table tutorial. If you are already familiar with the various tags associated with HTML tables and their attributes, you can go ahead and dig right into this tip else, I would recommend that you first read the HTML table tutorial in the Advanced HTML Tutorial.
That said, creating rounded corners in no rocket science. We simply employ HTML tables to create the layout accomplish our task – which is to produce something like the table with rounded corners below.
 |
 |
|
|
This is a Rounded table You would typically place your content here. |
||
 |
 |
Remember, all elements on a web page are rectangular and this includes images! This should come as no surprise because the screen on our monitors is rectangular and so is the browser window and the active space in the browser (the space that displays the web page). Take a look at the image below. Though it might look circular it’s actually a rectangle (a square to be precise) – read more about why images are rectangles.
The background color of the image above is the same as that of this web page (white – hexadecimal code #FFFFFF) and because of this it seems that the image is only the green colored circle. However, this is not true. The green circle us surrounded by white color which is actually our image background color. If we place the image is a table with a blue background, we can then see the area occupied by the image.
|
Now you see the white space that surrounds the green circle – don’t you?
OK! So what does all this have to do with creating tables with rounded corners? A lot, my good visitor! Now that we understand that though images are rectangles, they can be employed to give a semblance of other shapes. The shape that we would use are the four quarters of a circle. But before jumping to all that, let us create our HTML code on which we will work further.
The first step is to understand that a table with rounded corners is created by a table with 3 columns and 3 rows; thus, a total of 9 table cells – like the table below:
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
| Cell 7 | Cell 8 | Cell 9 |
Cells 1, 3, 7 and 9 will contain the four quarters of a circle, cells 2, 4, 6 and 8 will form the top, left, right and bottom edges and Cell number 5 will have the actual contents. The four quarters of a circle that we plan to use are four different images. And to create these images you need the assistance of your favorite graphics editing tool. Any graphics tool will let you create a circle. Once you have done so, you need to split it into 4 squares and these will be the four quarters.
For example, in Paint Shop Pro or Adobe Photoshop, start by creating a new image of 28×28 pixels. Draw a circle right in the middle of the image. IMPORTANT note: be sure that you have the anti-aliasing option selected before you draw the circle. Then with the selection tool extract 14×14 pixels from the top left. You can repeat this for other quarters or simply flip and mirror the first quarter that you’ve created. you need to save all the four images with different file names. So starting with an image of a circle, we can get 4 quarters as below:
 Our starting image |
Top-left corner |
Top-right corner |
Bottom-left corner |
Bottom-right corner |
We will now place the four images in 3×3 table inside the corresponding cells as detailed above, remove the borders, padding to give us our rounded rectangle.
<table width="200" cellpadding="0" cellspacing="0" border="0" style="background-color: #9C084A"> <tr> <td width="14"><img src="rounded_corner1.gif" width="14" height="14" border="0" alt="..." /></td> <td width="172"></td> <td width="14"><img src="rounded_corner2.gif" width="14" height="14" border="0" alt="..." /></td> </tr> <tr> <td></td> <td align="center">ACTUAL CONTENT</td> <td></td> </tr> <tr> <td><img src="rounded_corner3.gif" width="14" height="14" border="0" alt="..." /></td> <td></td> <td><img src="rounded_corner4.gif" width="14" height="14" border="0" alt="..." /></td> </tr> </table>
Pay close attention to the code marked in blue.
The width of the HTML table can be anything number that you want, BUT be sure to that the cellpadding, cellspacing and border attributes are set to a value of zero (0). You would also need to give a background color to the table which should be the same color as that of our circle (now split into quarters). I would recommend that you use styles to specify the background color as I have done with style=”background-color: #9C084A;” instead of using the BGCOLOR attribute as its been deprecated.
You will notice that some table cells are empty… you can put a transparent 1×1 pixel gif resized to the correct width and height it you want.
Lastly, DO NOT forget the ALT attribute for the images as this is now a required attribute and your HTML page will not validate correctly if you skip it.
The above code will render a table similar to the one I displayed at the beginning of this article – View the table with rounded corners.
Changing the height and width of the table with rounded corners
As I mentioned above, the width of the table with rounded corners can be anything you want. However, the beauty of this table code is that you dont have to do anything about its height. The height of this table is controlled by the actual contents… the contents placed in cell #5. So depending on the amount of content we place in this cell, the height of the table will increase on its own. Take a look below:
|
|
|
|
Scarborough Fair Are you going to scarborough fair? Tell her to make me a cambric shirt, Tell her to find me an acre of land, Tell her to reap it with a sickle of leather, |
||
|
|
This was the first part of the creating a table with rounded corners. Now let us see how we can create more advanced and complex corners of such tables. This is discussed in the next part – Complex and more advanced rounded corners for HTML tables.
Before we delve on how to create complex rounded corners, let me point out that the roundedness of the table depends on the curves of the image and thus the size of the circle that you started with. So if your circle image was large, it will result in a table with smoother and larger curves and if the circle was small, the rounded curves would be tighter. Take a look at the examples below.
Each corner image is 50×50 pixels |
Each corner image is 8×8 pixels |
By now, I guess you would have realized that the secret (if there was any) lies in the images that we have used for the rounded corners. So let us start on creating complex rounded tables.
Here is the simplest of the complex rounded tables that we are going to create.
 |
 |
 |
|
This is a Rounded table You would typically place your content here. |
|
 |
|
 |
This rounded table is made using 8 images – 4 for the rounded corners and the rest are employed for the borders of the four sides. Here are the four images used for the corners:
16×16 pixels Corner for top-left |
16×16 pixels Corner for top-right |
16×16 pixels Corner for bottom-left |
16×16 pixels Corner for bottom-right |
The four sides are made by very thin images – The top and bottom edges are created using images that are 1 pixel in width and the left and right edges are of images that are 1 pixel in height. Since each of our corner image is 16 pixels in both width and height, the images for the top and bottom edges are 16 pixels in height (to match the corners) and the ones for the left and right sides are 16 pixels in width. Thus, the images for top and bottom edges are 1 pixel in width and 16 pixels in height and images for left and right edges are 16 pixels in width and 1 pixel in height. Because these images are too small (or thin, if you like) to be displayed at their present dimensions, I have magnified the top-left corner of our table to show you two of the four images – the image used for the top edge and the left edge.
The above depicts 3 of the images used in the rounded rectangle – the image for the top-left corner, the image used for the top edge and the image that makes the left border.
Now an important point: The four borders are made up of very thin images and hence these images are employed as backgrounds for their respective table cells. Here is the code:
<table width="200" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="16"><img src="rounded1.gif" width="16" height="16" border="0" alt="..."></td> <td width="168" style="background-image: url('back1.gif');"> <img src="blank.gif" width="1" height="16" border="0" alt="..." /> </td> <td width="16"><img src="rounded2.gif" width="16" height="16" border="0" alt="..."></td> </tr> <tr> <td style="background-image: url('back4.gif');"> <img src="blank.gif" width="16" height="1" border="0" alt="..." /> </td> <td>ACTUAL CONTENTS</td> <td style="background-image: url('back2.gif');"> <img src="blank.gif" width="16" height="1" border="0" alt="..." /> </td> </tr> <tr> <td> <img src="rounded3.gif" width="16" height="16" border="0" alt="..."> </td> <td style="background-image: url('back3.gif');"> <img src="blank.gif" width="1" height="16" border="0" alt="..." /> </td> <td> <img src="rounded4.gif" width="16" height="16" border="0" alt="..."> </td> </tr> </table>
The code in blue is the one I would like you to pay attention to. Here I have employed the background-image style property and have specified the four images as backgrounds of their respective table cells which will then make the top, bottom left and right borders. Note the use of blank.gif image which is a 1×1 pixel transparent gif. This blank image will help you in adjusting the width of table cell without spending time and messing things up.
Before I end this article, here are some nice looking tables with complex rounded corners – remember, it’s all in the images!
 |
|
 |
|
This is a Rounded table You would typically place your content here. |
|
 |
|
 |
 |
|
 |
|
This is a Rounded table You would typically place your content here. |
|
 |
|
 |
