0
我應該設計一個企業的日曆，它是即將到來的事件，並將它們列在日程安排的日曆中。下面我有以下代碼：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;
}
有了這個代碼，我得到的表之外的數據日曆日曆。它列在頁面日曆上方。我該如何解決？
請給你的問題一個更具描述性的標題。另外，請創建代碼的一個子集（約10％），以方便人們查看。 – 2014-11-22 18:14:55
您的標記無效。仔細觀察一下你如何在表格單元格中添加'
'元素。 – 2014-11-22 18:16:45
通過[HTML驗證器]（https://html5.validator.nu）運行您的代碼，以確保沒有錯誤。 – 2014-11-22 18:20:42