I'm currently building a website and I have been using tables forever. I feel like it's time for me to move in div layouts but I am having a problem figuring out how to accurately display what I need using a div. The left and right images are rounded corner graphics and I am designing this for a mobile website so the buttons need to expand and contract dynamically. Any help would be greatly appreciated. Thanks in advance.

My current code:


<table width="100%" border="0" cellspacing="0" cellpadding="0" class="btn" style="background-color: #828b70;">
<tr>
<td align="right" width="10"><img src="images/btn_left.gif" alt="" width="10" height="36" /></td>
<td height="36" class="buttontxt"><a href="link.html">link</a></td>
<td width="40"><img src="images/btn_right.gif" alt="" width="39" height="36" /></td>
</tr>
</table>


The CSS:


.buttontxt {
font-size: 13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#85574c;
padding-left:15px;
background-image:url(images/btn_bkg.gif);
background-repeat:repeat-x;
}

table.btn td a{
display: block;
width:100%;
text-decoration: none;
font-size: 13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#85574c;
padding-top:6px;
padding-bottom:6px;
}

table.btn td a:link, table.navbar td a:visited {
font-size: 13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#85574c;
}

table.btn td a:hover, table.navbar td a:active {
font-size: 13px;
line-height:normal;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#85574c;
}