Replacing complex table structure with <div>

[madkidd]

I have a very nasty looking table structure here and I know that I can do this better with <div> tags but I'm just not sure how. Any help would be greatly appreciated. This will be dynamically created with ASPs and need to link...



<style type="text/css"> <!--

.box, .boxSelected {
border: 1px solid Black;
border-color: black;
background : Gray;
width: 25px;
font-family: verdana,arial;
font-size: 12px;
height: 25px;
}

.boxSelected {
background: orange;
}
-->
</style>

<table width="200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="40" height="40">

<table border="0" cellspacing="0" cellpadding="0" align="center" class="box">
<tr>
<td align="center">1</td>
</tr>
</table>

</td>
<td width="40">

<table border="0" cellspacing="0" cellpadding="0" align="center" class="box">
<tr>
<td align="center">2</td>
</tr>
</table>

</td>
<td width="40">

<table border="0" cellspacing="0" cellpadding="0" align="center" class="box">
<tr>
<td align="center">3</td>
</tr>
</table>

</td>
<td width="40">

<table border="0" cellspacing="0" cellpadding="0" align="center" class="boxSelected">
<tr>
<td align="center">4</td>
</tr>
</table>

</td>
<td width="40">

<table border="0" cellspacing="0" cellpadding="0" align="center" class="box">
<tr>
<td align="center">5</td>
</tr>
</table>

</td>
</tr>
<tr>
<td width="40" height="40">

<table border="0" cellspacing="0" cellpadding="0" align="center" class="box">
<tr>
<td align="center">6</td>
</tr>
</table>

</td>
<td width="40">

<table border="0" cellspacing="0" cellpadding="0" align="center" class="box">
<tr>
<td align="center">7</td>
</tr>
</table>

</td>
<td width="40">

<table border="0" cellspacing="0" cellpadding="0" align="center" class="box">
<tr>
<td align="center">8</td>
</tr>
</table>

</td>
<td width="40">

<table border="0" cellspacing="0" cellpadding="0" align="center" class="box">
<tr>
<td align="center">9</td>
</tr>
</table>

</td>
<td width="40">

<table border="0" cellspacing="0" cellpadding="0" align="center" class="box">
<tr>
<td align="center">10</td>
</tr>
</table>

</td>
</tr>
</table>

[mwinter]

#container {
margin-left: auto;
margin-right: auto;
width: 13.75em;
}
#container .box {
border: 1px solid black;
background-color: gray;
color: black;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
height: 1.5em;
width: 1.5em;
}
#container .box.selected {
background-color: orange;
}
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box selected">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>To centre the container in IE5, you need to use text-align: center in its containing element. This is an IE bug.

Mike

[madkidd]

Thank you very much. Do you know of a good resource to learn how to use CSS and <div> and eliminate <table> tags?