Sign in to follow this  
phaelax

[web] tables with round corners

Recommended Posts

I have a table of cells with an image in each corner like so:
 ________
|_|    |_|
| |    | |
|1|    |2|
|_|    |_|
|_|____|_|
	<table border="0" width="100%" height="310" cellspacing="0" cellpadding="0">
      <tr>
        <td width="20" height="20"></td>
        <td width="100%" rowspan="3" background="images/bg.gif" height="310" valign="top"
        align="left"></td>
        <td width="20" height="20"></td>
      </tr>
      <tr>
        <td width="20" background="images/bg.gif" height="270"></td>
        <td width="20" background="images/bg.gif" height="270"></td>
      </tr>
      <tr>
        <td width="20" height="20"></td>
        <td width="20" height="20"></td>
      </tr>
    </table>
I want to be able to change the height of the table without having to manually calculate the side cells (1 and 2). Width isn't giving me a problem, but trying to have 100% for height is. Whatever the height is of the table, I need to set the heights of cells 1 and 2. Each corner image is 20x20, so basically i need those cells to be (TABLE_HEIGHT - 20). Is there a way I can get the table's height? Or perhaps lock those corner cells to always be 20x20 when i set the side cells to be 100% height, i know the corners will remain at least big enough to fit whatever is inside of them. (the rounded images) But even though I have the table set for a specific height, it appears to be more than the height of the page.

Share this post


Link to post
Share on other sites
The way you did it now is how the table corners should remain at 20x20 pixels. The only other variation I can come up with is not setting the images inside those corners, but setting hem as background images on those corners.

Also, you might want to try the CSS way instead. See ALA's Custom corners and borders pt. I and Csutom corners and borders pt. II.

Share this post


Link to post
Share on other sites
Setting the height for the corners to 20 and the height of cells (1) and (2) to "*" might work.

I don't know what your rounded corners look like. Do they have transparent background or is it in a solid colour (i.e. the background colour of your page)? In that case you could change the table's layout. You could drop cells (1) and (2), and use one cell for each corner

--------
| | | |
|1| |2|
|_| |_|
| | | |
|3| |4|
| | | |
--------

Now, for cells (1)-(4) you could you a 20x20 image of your rounded corner as a background image in CSS, set to the upper left (or accordingly to (2)-(4) ) with no repeat. Next, set the background colour of cell (1) to the foreground colour of the whole table.


Mozilla Firefox supports rounded corners in CSS so you just need to create a standard table, but obviously this is ignored in IE and other browsers.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this