HTML和CSS表格日曆不工作

我應該設計一個企業的日曆，它是即將到來的事件，並將它們列在日程安排的日曆中。下面我有以下代碼：HTML和CSS表格日曆不工作

表：

<table class="calendar"> 
     <caption>Events in February at the CCC</caption> 

     <colgroup> 
      <col class="weekdays" colspan="5" /> 
      <col class="weekends" colspan="2" /> 
     </colgroup> 

     <thead> 
      <tr> 
       <th>Sun</th> 
       <th>Mon</th> 
       <th>Tue</th> 
       <th>Wed</th> 
       <th>Thu</th> 
       <th>Fri</th> 
       <th>Sat</th> 
      </tr> 
     </thead> 

    <tbody> 
     <tr> 
      <td>26</td> 
      <td>27</td> 
      <td>28</td> 
      <td>29</td> 
      <td>30</td> 
      <td>31</td> 
      <td>1</td> 
       <dl> 
        <dt>Taiwan Acrobats</dt> 
        <dd>8 pm</dd> 
        <dd>$16/$24/$32</dd> 
       </dl> 
     </tr> 
     <tr> 
      <td>2</td> 
       <dl> 
        <dt>Carson Quartet</dt> 
        <dd>1 pm</dd> 
        <dd>$8</dd> 
       </dl> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
       <dl> 
        <dt>Joey Gallaway</dt> 
        <dd>8 pm</dd> 
        <dd>$16/$24/$36</dd> 
       </dl> 
      <td>6</td> 
      <td>7</td> 
       <dl> 
        <dt>West Side Story</dt> 
        <dd>7 pm</dd> 
        <dd>$24/$36/$64</dd> 
       </dl> 
      <td>8</td> 
       <dl> 
        <dt>West Side Story</dt> 
        <dd>7 pm</dd> 
        <dd>$24/$36/$64</dd> 
       </dl> 
     </tr> 
     <tr> 
      <td>9</td> 
       <dt>Carson Quartet</dt> 
        <dd>1 pm</dd> 
        <dd>$8</dd> 
      <td>10</td> 
       <dl> 
        <dt>Jazz Masters</dt> 
        <dd>8 pm</dd> 
        <dd>$16/$24/$32</dd> 
       </dl> 
      <td>11</td> 
      <td>12</td> 
      <td>13</td> 
       <dl> 
        <dt>Harlem Choir</dt> 
        <dd>8 pm</dd> 
        <dd>$16/$24/$32</dd> 
       </dl> 
      <td>14</td> 
       <dl> 
        <dt>Chamberlain Symphony</dt> 
        <dd>8 pm</dd> 
        <dd>$16/$24/$32</dd> 
       </dl> 
      <td>15</td> 
       <dl> 
        <dt>Edwin Ovood</dt> 
        <dd>8 pm</dd> 
        <dd>$24/$36/$64</dd> 
       </dl> 
     </tr> 
     <tr> 
      <td>16</td> 
       <dl> 
        <dt>Carson Quartet</dt> 
        <dd>1 pm</dd> 
        <dd>$8</dd> 
       </dl> 
      <td>17</td> 
      <td>18</td> 
      <td>19</td> 
       <dl> 
        <dt>The Yearling</dt> 
        <dd>7 pm</dd> 
        <dd>$8/$14/$18</dd> 
       </dl> 
      <td>20</td> 
      <td>21</td> 
       <dl> 
        <dt>An Ellington Tribute</dt> 
        <dd>8 pm</dd> 
        <dd>$24/$32/$48</dd> 
       </dl> 
      <td>22</td> 
       <dl> 
        <dt>Othella</dt> 
        <dd>8 pm</dd> 
        <dd>$18/$28/$42</dd> 
       </dl> 
     </tr> 
     <tr> 
      <td>23</td> 
       <dl> 
        <dt>Carson Quartet</dt> 
        <dd>1 pm</dd> 
        <dd>$8</dd> 
       </dl> 
      <td>24</td> 
      <td>25</td> 
       <dl> 
        <dt>Madtown Jugglers</dt> 
        <dd>8 pm</dd> 
        <dd>$12/$16/$20</dd> 
       </dl> 
      <td>26</td> 
      <td>27</td> 
      <td>28</td> 
       <dl> 
        <dt>Ralph Williams</dt> 
        <dd>8 pm</dd> 
        <dd>$32/$48/$64</dd> 
       </dl> 
      <td>1</td> 
       <dl> 
        <dt>Othella</dt> 
        <dd>8 pm</dd> 
        <dd>$16/$28/$42</dd> 
       </dl> 
     </tr> 
     </tbody> 
    </table>

下面是表的樣式：

table.calendar { 
border-spacing: 5px; 
font-size: 8px; 
margin-top: 20px; 
margin-bottom: 5px; 
margin-left: auto; 
margin-right: auto; 
padding: 40px; 
width: 650px; 

} 

table.calendar caption { 
text-align: center; 
padding-bottom: 10px; 
font-size: 16px; 
letter-spacing: 3px; 
width: 650px; 
} 

table.calendar td{ 
width: 14%; 
} 

table.calendar col.weekends { 
background-color: rgb(255, 232, 232); 
} 

table.calendar thead { 
background-color: red; 
color: white; 
letter-spacing: 5px; 
} 

table.calendar thead tr { 
height: 5%; 
} 

table.calendar tbody tr { 
height: 19%; 
} 

table.calendar th, table.calendar td { 
border: 1px solid gray; 
vertical-align: top; 
} 

table.calendar h3 { 
font-size: 8px; 
}

有了這個代碼，我得到的表之外的數據日曆日曆。它列在頁面日曆上方。我該如何解決？

來源

2014-11-22 Trenton

請給你的問題一個更具描述性的標題。另外，請創建代碼的一個子集（約10％），以方便人們查看。 – 2014-11-22 18:14:55

您的標記無效。仔細觀察一下你如何在表格單元格中添加'

'元素。 – 2014-11-22 18:16:45

通過[HTML驗證器]（https://html5.validator.nu）運行您的代碼，以確保沒有錯誤。 – 2014-11-22 18:20:42

包括<dl>....</dl>裏面的<td> .... </td>標記將您的事件包括到特定的單元格中。 see here like：

  <td>1 
      <dl> 
       <dt>Taiwan Acrobats</dt> 
       <dd>8 pm</dd> 
       <dd>$16/$24/$32</dd> 
      </dl> 
      </td>

來源

2014-11-22 18:26:08 kriyeta

HTML和CSS表格日曆不工作

回答

相關問題