rounded corner with html table

I have the following HTML for a table to make a rounded corner box.

<div class="tipHolder" >
<table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">

<tr>
<td><img src="png\tile_top_left.png" style="float: right;" ></td>
<td id="tipTop"><!-- Blank top section --></td>
<td ><img src="png\tile_top_right.png" ></td>
</tr>

<tr>
<td id="tipLeft"><!-- Blank left section --></td>
<td>
<!--###################
Enter your content here
################### -->

r开发者_如何学Pythongergergfthrthrthr
</td>
<td id="tipRight"><!--Blank right section --></td>
</tr>

<tr>
<td ><img src="png\tile_bottom_left.png" style="float: right;"  ></td>
<td id="tipBottom"><!--Blank bottom section --></td>
<td ><img src="png\tile_bottom_right.png" ></td>
</tr>

</table>
</div>
</body>
</html>

with this CSS

#tipTop {
    background-image:url('tile_top.png');
    background-repeat:repeat-x;

}
#tipLeft {
    background-image:url('tile_left.png');
    background-repeat:repeat-y; 
    background-position:right;
}
#tipRight{
    background-image:url('tile_right.png');
    background-repeat:repeat-y;  
}
#tipBottom {
    background-image:url('tile_bottom.png');
    background-repeat:repeat-x;  
}

Currently I am giving the corner images in the HTML itself but the side images from the CSS and this works fine. I want to move the corner images to the CSS as well but when I convert any two table corner cells to divs the column or row disappear. for example if I do top right and bottom right corner the right coulmn disappears. Top left and Top Right, the top row disappears...

Table cells with no content collapse down to the minimum. You'd need to set fixed-sizes via CSS, and possibly even put a blank character into the cell to force it to stay open:

<td id="topleft">&nbsp;</td>

#topleft {
    background: ...;
    width: 15px;
    height: 15px;
}

Background images don't affect the sizing of an element, so you need to force the element to have some size before the background will become visible.