我在CSS样式方面遇到了麻烦

Question

我想让我的页面看起来像这样：

这是我剪辑的一张专辑......

https://plus.google.com/photos/107900027460905004143/albums/5701903548070918369?authkey=CNjam-nOwZzxSg

所以，这是我的CSS（子表是顶部）

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%;
}

这是我的HTML标记

<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">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</td>
                        <td rowspan="4" class="Today">
                            <br />
                            <asp:Label ID="Today" runat="server"></asp:Label>
                        </td>
                        <td class="Day">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
                            <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">
                &nbsp;</td>
            <td align="left"  class="sub_table_r">
                <table>
                    <tr>
                        <td rowspan="4" class="Today">
                            &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</td>
                        <td rowspan="4" class="Today">
                            <asp:Label ID="Tomorrow" runat="server"></asp:Label>
                        </td>
                        <td class="Day">
                            <br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <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>

这就是输出:(没有内容）

我真的很困惑，我觉得这个问题困扰了我一个月。非常感谢您的帮助。

Answer 1

我不会使用表格。使用div和相对定位。使用背景图像来获得笔记本外观。

Answer 2

正如Ed Heal伤心的那样。不要使用表格。使用div或section与background-image + position relative并固定宽度和高度。那应该有用吗。

表格总是很难理解（单元格，列，边框等）。