• Table Talk ! • Table Tricks • Html Test Bed Using Rounded Table Corners Adds A Bit Of Class To Your Site. • Rounded Table Corners Before attempting this lesson you should have a good understanding of basic Tables and how they work. Adding round corners to tables is achieved by using four rounded images placed into the four corner cells of your nine cell table code. I will provide the four rounded images for you to save and upload to your web page files. If you would like to create different colored corners for your rounded table design, take the four rounded corner images to GifWorks and color them to suit your needs, then save and upload those images for use in your rounded table corner design. Sample Of Table With Rounded Corners Put Some Text Or An Image In This Cell And It Will Center In Your Rounded Table. Select a different background color for this page to see how the rounded table corners look on different colors. Notice that the rounded table corners (provided in this lesson) are transparent images, so they will work with many different background colors. White Yellow Green Red DarkPink Save These 5 Images & Upload Them To Your Web Page Files. clear.gif Below you will see the html code for the rounded table sample above. I have spaced out part of the code so you can see where to add your text and/or images. I have included "comment" tags (you can leave these in the table code, these will not show on your web page) to show you exactly where to start to place your text and/or images and where to stop. IMPORTANT TABLE TRICKS: Please note how I have placed the closing table cell tags up onto the image line of code, this is an important step to perform in order to achieve a rounded table. Also, important is that you have cellpadding="0" and cellspacing="0" in your rounded table code. For more on these two table tricks Click Here. You can adjust the size of your rounded table by changing all the width="200" attributes in the sample table code to any width that you desire. I have created this rounded table with the use of a clear image (available above with the corner images). The rounded table could be created without the clear image (using other means) but it is more stable and more compatible with all browsers if you use the clear image.
Put Some Text Or An Image In This Cell And It Will Center In Your Rounded Table.