У меня есть проблемы с 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 или раздел с фоном-изображением + положение относительно и фиксируйте ширину и высоту. Тогда это сработает.

Таблицы всегда сложны для понимания (ячейки, столбик, граница и т. Д.).