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