Blogger Baseball Scorecard: New Internet Scorecard "At-Bat" box: html diamond inside CSS boxes, inside CSS boxes, inside...

This is what I've built so far:

In the centre of this 4 'column' by 4 'row' CSS baseball 'At-bat' box there are four squares 20px X 20px that house four border elements which create the diamond shape you can see in the example below. The diamond represents an aerial view of the four stations on the infield of a baseball field. The bottom point of the diamond represents Home Plate, the easterly point, First Base, and so on. When an indicator is marked along each side of the diamond it shows the progress of a base-runner around the base paths during a baseball game.

1
2
3
4

To make these marks I can adjust the colour of one of the border elements on each side of the diamond with the Blogger "Compose" Interface, "Text background-color" widget. This changed border quality creates a mirror image of the angle in question - in whatever colour you choose from the Blogger palate ( lime-green shown).

The structure of the entire 'At-Bat' box consists of four columns and four rows that are read by the browser as one Row. The first column is the first 'td' tag (table data). Inside the 'td' tag are several CSS div class="x" tags which produce appropriate box sizes - in this case a 95px high and 90px wide box (which is also ready for text; thus the 1,2,3,4's). The next 'div' in the same 'td' tag gets instructions to create a 20px X 90px box; below that another 20px X 90px box; and finally the final box in the first 'column' the bottom 95px X 90px box (same as the top).

The next 'td' in the row starts at the top of the box with the long thin 95px X 20px box, then below that is a 20px X 20px box - and so on.

These are the four div class="x" deliminators in the CSS style sheet - they can create an entire 9 inning scorecard. Each 'At-bat' box has only 2033 characters in 60 lines of code.

This is what I want:

Below I've added a div style= "border: height: width:" element that makes a 3px box around the CSS table to show what I need. The "div style=border:" tag is unstable in different computers, and in the same computer's zoom function. It moves realative to the CSS elements - not good.

1
2
3
4

I need this separation of the CSS elements one from another; so that when I make a row of AB boxes, they won't run together. With out a border it's hard on the eyes to distinguished where one box ends and the next box begins.

Like this:

1
2
3
4

So how do I put a CSS box around these '4 column' by '4 row' Row Elements?

Also I might want to make all the lines disappear - so now it's really important to have a 3px border around each AB box - as you can see below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>March 21 2011 CSS AB box TEST.html</title>
<style type="text/css">
div.a
{
height:95px;
width:90px;
padding:0px;
border:1px solid black;
margin:0px;
}
div.b
{
height:20px;
width:90px;
padding:0px;
border:1px solid black;
margin:0px;
}
div.c
{
height:95px;
width:20px;
padding:0px;
border:1px solid black;
margin:0px;
}
div.d
{
height:20px;
width:20px;
padding:0px;
border:1px solid black;
margin:0px;
}
</style>
    </head>

<body>
            <h1>March 21 2011 CSS AB box TEST.html</h1>

</tr>
</table>
</body>
</html>