I have trouble with CSS styling - html

Question

i am trying to make my page looks like this :
Here is an album of what i've cut ...
https://plus.google.com/photos/107900027460905004143/albums/5701903548070918369?authkey=CNjam-nOwZzxSg
So, here is my CSS (sub table is the top part)
body
{
font-family : Segoe UI;
}
.main_table
{
width : 702px;
border:0px;
border-spacing:0px;
border-width:0px;
border-style:none;
border-collapse:collapse;
padding:0px;
}
.sub_table
{
background-image:url('../images/header_l.png');
background-repeat:no-repeat;
background-attachment:fixed;
width:47.5%;
}
.sub_table_r
{
background-image:url('../images/header_r.png');
background-repeat:no-repeat;
background-attachment:fixed;
width:47.5%;
}
.content_table
{
background-image:url('../images/content_left.png');
text-align:center;
background-attachment:scroll;
background-position:left;
width:47.5%;
}
.content_table_r
{
background-image:url('../images/content_right.png');
text-align:center;
background-attachment:scroll;
background-position:left;
width:47.5%;
}
.centre_col
{
background-image:url('../images/centre.png');
background-repeat:repeat-y;
width:5%;
background-position:center;
}
.centre_top
{
background-image:url('../images/top_centre.png');
background-repeat:no-repeat;
width:5%;
background-position:bottom;
}
.centre_bottom
{
background-image:url('../images/centre_bottom.png');
background-repeat:no-repeat;
width:5%;
background-position:top;
}
.Day
{
font-weight:bolder;
text-align:left;
font-size:large;
}
.Year
{
font-weight:bolder;
text-align:center;
font-size:large;
color:Orange;
}
.Week
{
font-weight:bold;
text-align:left;
font-size:large;
}
.Today
{
font-weight:bolder;
text-align:center;
font-size:x-large;
color:Navy;
vertical-align:middle;
}
.bottom
{
background-image:url("../images/bottom.png");
background-repeat:no-repeat;
background-position:top;
width:47.5%;
}
.bottom_r
{
background-image:url("../images/bottom_r.png");
background-repeat:no-repeat;
background-position:top;
width:47.5%;
}
and here is my HTML markup
<table class = "main_table">
<tr>
<td align="right" colspan="3">
<asp:Button ID="Button1" runat="server" Text="Create Events"
onclick="Button1_Click" />
</td>
</tr>
<tr>
<td align="right" class="sub_table">
<table >
<tr>
<td rowspan="4" class="Today">
</td>
<td rowspan="4" class="Today">
<br />
<asp:Label ID="Today" runat="server"></asp:Label>
</td>
<td class="Day">
<br />
<br />
</td>
</tr>
<tr>
<td class="Day">
<asp:Label ID="Month" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Week">
<asp:Label ID="Week" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Year">
<asp:Label ID="Year" runat="server"></asp:Label>
</td>
</tr>
</table>
</td>
<td class="centre_top">
</td>
<td align="left" class="sub_table_r">
<table>
<tr>
<td rowspan="4" class="Today">
</td>
<td rowspan="4" class="Today">
<asp:Label ID="Tomorrow" runat="server"></asp:Label>
</td>
<td class="Day">
<br />
<br />
</td>
</tr>
<tr>
<td class="Day">
<asp:Label ID="Month0" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Week">
<asp:Label ID="Week0" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="Year">
<asp:Label ID="Year0" runat="server"></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content_table" align="right">
<asp:Label ID="Content" runat="server" Width="300px"></asp:Label>
</td>
<td class="centre_col">
</td>
<td class="content_table_r">
<asp:Label ID="Content0" runat="server" Width="300px"></asp:Label>
</td>
</tr>
<tr>
<td class="bottom" align="right">
<br />
<br />
<br />
<br />
<br />
</td>
<td class="centre_bottom" align="center">
</td>
<td class="bottom_r">
</td>
</tr>
</table>
And this the output : (without content)
I really am baffled, and i think this problem had troubled me for a month . YOUR help is deeply appreciated .

Answer 1

I would not use tables. Use div and relative positioning. Use background images to get the notebook look.

Answer 2

Exactly as Ed Heal sad. Don't use tables. Use div or section with background-image + position relative and fix width and height. Then should it work.
Tables are always tricky to understand (cells, column, border, etc...).