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?