.
Here is a link using the code below for basic table simulation using CSS.
Has some extra hover commands on the grid that can not be done with tables.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Boxes</title>
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
font-weight: bold;
text-align: center;
margin: 0;
padding: 0;
background: url(background.jpg);
}
#Content {
position:absolute;
left:50%;
width:666px;
margin-top:10px;
margin-left:-332px;
text-align: center;
}
#Box1 {
width: 600px;
height: 400px;
padding: 50px;
background-color: white;
}
#Box2 {
width: 500px;
height: 300px;
padding: 50px;
background-color: blue;
}
.cell {
width: 120px;
height: 96px;
float: left;
margin: 3px 0 0 4px;
background-color: yellow;
}
.cell:hover {
background-color: #f66;
color: #fff;
}
.bottom {
line-height: 170px;
}
.top {
line-height: 1.0em;
}
.middle {
line-height: 96px;
}
.left {
text-align: left;
}
.hbottom:hover {
line-height: 170px;
}
.htop:hover {
line-height: 1.0em;
}
.hmiddle:hover {
line-height: 96px;
}
.hitalic:hover {
font-style: italic;
}
.hright:hover {
text-align: right;
}
.hleft:hover {
text-align: left;
}
</style>
</head>
<body>
<div id="Content">
<div id="Box1">
<div id="Box2">
<div class="cell bottom htop">Bottom -> Top
</div><!-- cell-->
<div class="cell middle hbottom">Middle->Bottom
</div><!-- cell-->
<div class="cell top hbottom">Top -> Bottom
</div><!-- cell-->
<div class="cell middle htop">Middle -> Top
</div><!-- cell-->
<div class="cell top hmiddle">Top -> Middle
</div><!-- cell-->
<div class="cell bottom hmiddle">Bottom->Middle
</div><!-- cell-->
<div class="cell bottom">Bottom
</div><!-- cell-->
<div class="cell middle">Middle
</div><!-- cell-->
<div class="cell top left hright">Top< -> Top>
</div><!-- cell-->
<div class="cell hitalic">Bold -> Italic
</div><!-- cell-->
<div class="cell hright">Center->Right
</div><!-- cell-->
<div class="cell hleft">Center->Left
</div><!-- cell-->
</div><!-- Box2-->
</div><!-- Box1-->
</div><!-- Content-->
</body>
</html>