Table rounded corner problems - html

Question

I have some problems skinning a rounded corner table.
Take a look at the image please:
And here goes the code:
<table id="whitePanel" width="190px" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td>
<img src="assets/images/lightRoundedCorners/tl.png" width="8" height="8" border="0" alt="..." />
</td>
<td>
<img src="assets/images/lightRoundedCorners/t.png" alt="..." height="8" width="100%" />
</td>
<td>
<img src="assets/images/lightRoundedCorners/tr.png" width="8" height="8" border="0" alt="..." />
</td>
</tr>
<tr>
<td>
<img src="assets/images/lightRoundedCorners/l.png" width="8" alt="..." height="100%" border="0"/>
</td>
<td align="center" border="0" style="background: url(assets/images/lightRoundedCorners/c.png) repeat">
ACTUAL CONTENT
<p>1. Item 1</p>
<p>1. Item 1</p>
<p>1. Item 1</p>
</td>
<td>
<img src="assets/images/lightRoundedCorners/r.png" width="8" alt="..." height="100%" border="0"/>
</td>
</tr>
<tr>
<td>
<img src="assets/images/lightRoundedCorners/bl.png" width="8" height="8" border="0" alt="..." />
</td>
<td>
<img src="assets/images/lightRoundedCorners/b.png" alt="..." height="8" width="100%" border="0"/>
</td>
<td>
<img src="assets/images/lightRoundedCorners/br.png" width="8" height="8" border="0" alt="..." />
</td>
</tr>
Any suggestions?

Answer 1

I am going to scalp you for using tables for non tabular data,
For god's sake man it's 2011 use divs and css!
http://css-discuss.incutio.com/wiki/Why_I_think_divs_are_better_than_tables

Answer 2

One solution could be to use css only without images to achieve what you need. check the following:
css
table {
-moz-border-radius: 6px; /* FF1+ */
-webkit-border-radius: 6px; /* Saf3-4 */
border-radius: 6px; /* Opera 10.5, IE9, Saf5, Chrome */
-moz-box-shadow: 0 0 6px #959595 inset;
-webkit-box-shadow: 0px 0px 6px #959595 inset; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 6px #959595 inset; /* Opera 10.5, IE9 */
border: 1px solid grey;
color: #00769B;
font-size: 1.1em;
text-align: center;}
html
<table id="whitePanel" width="190px" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td>ACTUAL CONTENT
<p>1. Item 1</p>
<p>1. Item 1</p>
<p>1. Item 1</p>
</td>
</tr>
</table>
Demo: http://jsbin.com/ebove4/3
Because internet explorer doesn't understand these css3 properties, you can use css3pie.

Answer 3

Try adding the following CSS style to your table...
#whitePanel {
border-collapse:collapse;
}

Answer 4

Ok, here is the code I used to solve the problem, I hope it helps all of you!
This method does not use Javascript, only CSS and HTML.
Result:
I still have some problems with the right corners ( top and bottom ) I hope to fix it soon.
Assets:
I'm sorry to put it like this but I don't have a development server right now.
b:
bl:
br:
c:
l:
r:
t:
tl:
tr:
Here is the HTML code ( DIVS ):
<div class="dialog">
<div class="hd">
<div class="c">
</div>
</div>
<div class="bd">
<div class="c">
<div class="s">
<!-- content area -->
<h3>a<b>developer</b>?</h3>
public <b>API</b> here!
<!-- content area -->
</div>
</div>
</div>
<div class="ft"><div class="c"></div></div>
</div>
And here the css code:
.dialog {
width:200px;
margin:10px 10px 0px 0px;
}
.dialog .hd .c,
.dialog .ft .c {
font-size:1px; /* ensure minimum height */
height:8px;
}
.dialog .ft .c {
height:8px;
}
.dialog .hd {
background:transparent url(../assets/images/lightRoundedCorners/tl.png) no-repeat ;
}
.dialog .hd .c {
background:transparent url(../assets/images/lightRoundedCorners/tr.png) no-repeat right 0px;
}
.dialog .bd {
background:transparent url(../assets/images/lightRoundedCorners/l.png) repeat-y 0px 0px;
}
.dialog .bd .c {
background:transparent url(../assets/images/lightRoundedCorners/r.png) repeat-y right 0px;
}
.dialog .bd .c .s {
margin:0px 8px 0px 8px;
background:transparent url(../assets/images/lightRoundedCorners/c.png) repeat 0px 0px;
padding:1px;
padding-left: 5px;
padding-bottom: 10px;
}
.dialog .ft {
background:transparent url(../assets/images/lightRoundedCorners/bl.png) no-repeat 0px 0px ;
}
.dialog .ft .c {
background:transparent url(../assets/images/lightRoundedCorners/br.png) no-repeat right 0px;
}
Hope it helps!