How to: Round Table Corners
Round Table Corners
Using simple graphics to produce a popular webpage effect
Round corners are normally displayed on web pages by placing small graphic files of the corner's radius at the proper place on each table. To round all four corners of a table, you will need four different graphic files, one each for top-left (tl.bmp), top-right (tr.bmp), bottom-left (bl.bmp), and bottom-right (br.bmp). Slight differences in color may show up on some systems and not on others, so you must match the colors used on your web-page exactly to produce the effect professionally.
Use your favorite graphic editor to produce these small graphics for each corner. Here is a set of four that we will use as our example in this paper.
One way to produce these files is to draw a filled circle of the proper colors and then divide it evenly into four parts. To clarify:
Once you have the four graphics representing the four corners, you may place them in your tables where you want them to produce the effect of rounded corners, e.g.:
This one only uses the top-left and top-right graphics to round the top of the table. In this case, the title bar is composed of three table columns: A small one on the left to hold the top-left corner, a wide one in the middle to hold the acatual title text, and a small one on the right to hold the top right corner. Here is the HTML we used to display it:
You may also use the size attributes in the <IMG ...> tags to change the
size of the graphics, but only slightly. You should try to size
your graphic files to be the size you need, but it is nice to know you can
fudge it a little using the size attributes.
Produce a table with rounded title corners without using graphics. Try to make a better one on your own before viewing this source.
Note: This is intended to be an exercise in making tables and is not really for practical use. This one is just 'passable' in IE, "less" passable in NS4.7x and NS6.2.x, and a complete disaster in Opera.