What is the correct way to replace this html/table code with a div or span

Question

I have this html that I use to create a box look around the title, this is for a flowchart looking page. Fairly straight forward and looks correct.

    <td>
        <table align="center" border="0" style="border: thin solid black;" cellpadding="0">
            <tr>
                <td align="center" nowrap style="padding: 5px;" class="headerlarge">&nbsp;Resources:&nbsp;</td>
            </tr>
        </table>
    </td>

When I try and use a span with border and padding, I lose the top border, the class is only for the font.

font-weight: 600;
font-size: 12pt;
color: black;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-style: normal;

when I try and use a div, the border fills the entire parent element and I only want it to be a size that fits around the text, not grow to whatever. I have played around with margins and padding in the parent TD element as well as within the div or span. What css do I need to create a box with padding that fits exatly around the text and will not lose any of its border when in a table cell?

UPDATE : So I found that this problem was only specific to IE6 & 7, other browsers work using Phoenix's css, the div wrapper around a span. I posted the html/css Here at Jsbin . So the question remains, how to get around this in IE 6 & 7 without any hacks and over doing the css, otherwise I might as well stick with a stupid nested table.

Answer 1

Edit: I verified that Nino's answer works on Firefox 3.0.14/Ubuntu 9.04 and IE 8/WinXP SP3. The style of the dt and tr tags in which the div is contained need not be updated. So combining these things, we get:

.headerlarge {
  border: 1px solid black;
  display: inline-block;
  margin: 0px;
  padding: 5px;
  /* ... */
}

<div class="headerlarge">Resources:</div>

Answer 2

<div class="divClass">
    <span class="headerlarge spanClass">
      Resources: 
    </span>
</div>
<style>
.headerlarge
{
    font-weight: 600;
    font-size: 12pt;
    color: black;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-style: normal;    
}
.divClass
{
    text-align: center; 
    padding: 0;
}
.spanClass
{
    white-space: nowrap; 
    padding: 5px; 
    border: 1px solid black;
}
</style>

Answer 3

Try using display:inline-block for the container in IE.