Categories


HTML Table with Rounded Corners

We looked at inserting colored bands in our tables last time, and now we’ll look at how to have a table with rounded corners.

Getting Started

Before you begin writing the HTML, you’ll need to decide a couple of things first:

  1. How large you want the table with rounded corners to be
  2. What colors or background images you want to use

You will need the above information in order to create the images you will be using as the backgrounds for the table cells. For our sample, we chose to use a 600 pixel size table with a white background. Our page background is red but you can use any color or graphic you like.

Images

Next, we’ll create the top and bottom images with our rounded corners and save them as a PNG file. We have sized them 600 (table width) x 50 (cell height) pixels. Although you can have any size you choose as long as you do not lose the rounded corner by making the height too short. Also, using a PNG file allows us to keep the image background transparent. Note: When creating PNG files you must start out using a transparent background in your graphics program. The easiest way to create matching images is to create one file to be the top image, flip it and save it as the bottom file.

We do not need a center image since we will be assigning the color for the middle of the table in the second row/cell code. We’ll look at this closer below.

HTML Table Code

We begin by creating a table and inserting the PNG image we created for the top row as the background for that cell. We’ve made the cellpadding and cellspacing = “0” so there are no spaces between our rows or cells. We want them to be right next to each other.

 

 

If you do not plan to insert any text in the first row, the space will need to be held open otherwise the background will not display. You can do this by inserting a bit of code for blank space . . . or you can place some dots, letters, etc. here and make them the same color as the background so they are not seen. Then close the first row/cell.

Now we are ready for the middle of the table by beginning the second row. Row 2 is where you will insert the code for the background color for the middle of the rounded-corner table.

 
 

Once we have the middle of the table in place, we can insert our page contents. This can be done by placing the text, pictures directly into the second row of the rounded-corner table, or you can insert another table if you like.

For our sample, we’ve inserted and centered a second table that is 550 pixels wide. Remember if you insert a table here, it must be closed or your table with the rounded corners will not display correctly. Also, you can have this second middle table as large as the original table (600 pixels) but you should not have it larger.

Page Title


….. Rest of table 2 goes here

 

Once you’ve finished the second table with the page’s contents, close the second row/cell of the rounded-corner table and you’re ready for the final row/cell that contains the image for the bottom of the rounded-corner table. Again, if you are not going to use any text or images inside the cell, you’ll need to hold it open by using or make a bit of text invisible as explained above.

Helpful Tips:

If you plan on using the top and/or bottom row of the rounded-corner table to contain information or graphics that will be larger than the height of the background image itself, you will need to adjust the height of the background image to accommodate the information/image you want to place there.

This means that if the background image containing the rounded-corners is 50 pixels high and the image you want to place there is 60 pixels high – the background image will ’tile’ to fill the space so that your background is not solid.  Notice the breaks below the first row/cell in the table.

This will require some pre-planning on your part. It is easy to resize the background image if you un-check the ‘Maintain Ratio’ option in your graphics program before re-sizing. You can then make an image that is 600 x 50 into a 600 x 70 without loosing the overall look.

Also, if you end up having more than one size of background image to use, include the size in the name, ie., tabletop_600x50; tabletop_600x70. Doing this makes it very easy to be sure you have the right sized image in the right cell.

To copy and paste the HTML code for this table, visit this link.   Note:  You’ll need to upload your own background images and change the location.    And if you would like to save our images that we’ve created (top and bottom), visit this link – right click on the top or bottom of the table and select ‘Save Background As’. We’ve made them white so that you can easily make then any color  you like.

Comments are closed.