Visit Our Home Page

Creativyst Docs 
 How to: Round Table Corners 
Contact | News | Glossary | Site  



  D
o
c
u
m
e
n
t
s
 
Tech/How-to
º Understanding SoundEx
º CSV File Format
º Temporality
º Dell Svc Tag Algorithm
º Round Table Corners
º Menu Flowers (exercise)
º Show XML in I.E. Browsers
Conventions
º Points for Programmers
º CTXTM File Format
º Hybrid Oriented Programming
º Software Stability Ratings
º The JSMsg Convention
º Glosssary XML
º CUFTM Codes

Managing IT
º The LOC Monster
º The Un-Methodology
º Continuous Independence
º Agile Bridge Building
º Platform Neutral Computing

Random Notes
º C.S. Vs Olivier
º Seeing Through Hype

 
 

 
 






































  		 
How To:
Round Table Corners
 Using simple graphics to produce a popular webpage effect (obsolete)






[top]
Making the Corner Graphics

This is obsolete advice, but there's still an interesting challenge at the end 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.



Top Left
(tl.bmp)

Top Right
(tr.bmp)

Bottom Left
(bl.bmp)

Bottom Right
(br.bmp)

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:





[top]
Display a Table with Rounded Top Corners

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.:

Title
 Text inside table.

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: 


    <CENTER>
    <TABLE WIDTH="200px" CELLPADDING="0" CELLSPACING="0" BORDER="0">

    <TR>
    <TD WIDTH="19px" VALIGN="bottom" ALIGN="RIGHT" BGColor="#6600D0">
        <!-- This box is for the top left corner    -->
        <IMG Border="0" SRC="./tl.bmp">
    </TD>
    <TD WIDTH="162px" ALIGN="CENTER" BGColor="#6600D0">
        <!-- This wide box is for the title         -->
        <FONT FACE="Arial, sans-serif" COLOR="#00DDDD" SIZE="2">
            Title
        </FONT>
    </TD>
    <TD WIDTH="19px" VALIGN="bottom" ALIGN="LEFT" BGColor="#6600D0">
        <!-- This box is for the top right corner   -->
        <IMG Border="0" SRC="./tr.bmp">
    </TD>
    </TR>

    <TR>
    <TD COLSPAN="3" HEIGHT="250px" BGColor="#6600D0" ALIGN="CENTER">
        <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0">
        <TR>
        <TD HEIGHT="249px" WIDTH="198px" BGColor="#F0F0FF" ALIGN="CENTER">
            &nbsp;Text inside table.
        </TD>
        </TR>
        </TABLE>
    </TD>
    </TR>

    </TABLE>
    </CENTER>

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.



[top]
Here's a challenge for HTML designers.

Produce a table with rounded title corners without using graphics. Try to make a better one on your own before viewing this source.
                   
                   
                   
                   
                   
                   
                   
                   
                   
                   
A Well-rounded Table
                   
                   
                   
                   
                   
                   
                   
                   
                   
                   

Show how you did it in the forums




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.

Other possibilities?:

  • Make it display better in a particular browser.
  • Make it display better accross all browsers, or many browsers.
  • Make alternate corner decorations... on the outside or the inside.
  • ?
Share how you did in the Art of Programming section in the forums









 


















© Copyright 2002 - 2003 Creativyst, Inc.