# [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 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 on other sites
Just found this link today, which may help

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

## Create an account

Register a new account

• ## Partner Spotlight

• ### Forum Statistics

• Total Topics
627639
• Total Posts
2978345

• 10
• 12
• 22
• 13
• 33