Table border question

In this website, I narrow the table size to 40% of the page width. However, the outlining stays as wide as the entire page.

http://www.sjwum.org/SJWUM-about.html

On the page:

<div id="para">
<table style="width: 40%;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><br>
<br>
If you want to know about Serving Jesus Willingly Urgan Ministries,
then take a look at our <br>
<a href="SJWUM-givefood.html">monthly
food giveaway.</a> <br>
</td>
<td valign="top"><img
src="1vegetable1-med.jpg" alt="" height="187"
width="250"> <br>
</td>
</tr>
</tbody>
</table>
</div>

In the stylesheet:


table { font-family: "Arial";
text-align:center;
border-style: none;
}
td { border-style: none;
}

}
#para {
border-style:ridge;
border-color:"#006600";
}

Thanks

Hy,
Try this code:


<style type="text/css">
#para {
position:relative;
margin:1px auto;
text-align:center;
}

table {
position:relative;
margin:1px auto;
font-family: "Arial";
text-align:center;
border-style:ridge;
}
td { border-style: none; }
</style>

<div id="para">
<table style="width:40%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><br>
<br>
If you want to know about Serving Jesus Willingly Urgan Ministries,
then take a look at our <br>
<a href="SJWUM-givefood.html">monthly
food giveaway.</a> <br>
</td>
<td valign="top"><img
src="1vegetable1-med.jpg" alt="" height="187"
width="250"> <br>
</td>
</tr>
</tbody>
</table>
</div>

In the stylesheet:

Sorry to say, the position:relative; did not make a difference. (I changed to box to red just be sure what I was doing was changing it at all)

http://www.sjwum.org/SJWUM-about.html

Other ideas??

First note, I am sorta new to coding as well... but looking at your code I see some stuff that I think could be affecting your code... But I am not a Sr developer by any means... but ideas to try...




<div id="para">
<table style="width: 40%;" border="1"
cellpadding="2" cellspacing="2">


you can just set <table width= "40%" border= 1 cellpadding= 2 cellspacing=2>



<td style="vertical-align: top;">

<td valign="top">


The top is css format while the bottom is html format. (I could be wrong) but either way they are two conflicting formats used within the same table. I would fiddle with those. Hope that helps some :)

I have to ask why are you using tables at all? Read about why tables for layouts are bad here (http://www.hotdesign.com/seybold/).