Back to the starting page Exit to catalogue of images

HOW TO MAKE A TABLE WITH ROUNDED CORNERS OVER BACKGROUND CHANGING ITS COLOR STEPWISE?

Design of the frame

  1. I designed as a rectangle having rounded corners. Rounded frame before division
  2. I cut it into 9 pieces and discarded the central part.
  3. The background pattern has to be continued around the rounded corners i.e. out of the arcs.
    1. I made the bitmaps using the image editor of Visual Prolog 5.2 (R).
    2. The *.bmp files [made so], however, are unable to contain transparent parts
    3. therefore I converted *.bmp files to *.gif ones using IrfanView (R).
    4. I converted the the areas out the blue lines to transparent ones by Microsoft Photo Editor (R).
Position File Picture Position File Picture Position File Picture
Top left corner Box/box_tl.gif Top edge Box/box_t.gif Top right corner Box/box_tr.gif
Left edge Box/box_l.gif Table to be framed none   Right edge Box/box_r.gif
Bottom left corner Box/box_bl.gif Bottom edge Box/box_b.gif Bottom right corner Box/box_br.gif

The solution consists of

  1. a fixed top row made of 3 transparent images,
  2. a fixed straight right border made of 1 transparent image,
  3. the variable contents which is a table within the table;
  4. a fixed straight left border made of 1 transparent image,
  5. a fixed bottom row made of 3 transparent images.

Height parameters determining the thickness of the rounded frame are needed

  1. within the <TR> tag of the top and bottom row, respectively;
  2. within the <TD> tag of the four corners.

    Sample Table

    Header of the Internal Table
    111213
    212223

    HTML Source of the Above Sample

    <table cellspacing="0" cellpadding="0" border="0">
     <    tr height=15>
      <    td style="background: url(Box/box_tl.gif)" width="15" height="15"></td>
      <    td style="background: url(Box/box_t.gif)"></td>
      <    td style="background: url(Box/box_tr.gif)" width="15" height="15"></td>
     </    tr>
     <    tr>
      <    td style="background: url(Box/box_l.gif)" width="15" ></td>

                <TD>
                    
                        <TABLE cellpadding=5 bgcolor="A0A0A0">
                        <TR>
                            <TD colspan=3><B>Header of the Internal Table</B></TD>
                        </TR>
                        <TR>
                        <TD>11</TD><TD>12</TD><TD>13</TD>
                        </TR>
                        <TR>
                        <TD>21</TD><TD>22</TD><TD>23</TD>
                        </TR>
                    </TABLE>
                </TD>
     <    td style="background: url(Box/box_r.gif)" width="15" height="15"></td>
     </    tr>
     <    tr >
      <    td style="background: url(Box/box_bl.gif)" width="15" height="15"></td>
      <    td style="background: url(Box/box_b.gif)" ></td>
      <    td style="background: url(Box/box_br.gif)" width="15" height="15"></td>
     </    tr> 
    </    table>
    See also in Hungarian