Calendar layout with table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Calendar</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<style>
.clmonth {
border-collapse: collapse;
width: 780px;
}
.clmonth caption {
text-align: left;
font: bold 110% Georgia, "Times New Roman", Times, serif;
padding-bottom: 0.4em;
}
.clmonth th {
border: 1px solid #AAAAAA;
border-bottom: none;
padding: 0.2em 0.6em 0.2em 0.6em;
background-color: #CCCCCC;
color: #3F3F3F;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 110px;
}
.clmonth td {
border: 1px solid #EAEAEA;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0.2em 0.6em 0.2em 0.6em;
vertical-align: top;
}
</style>
</head>
<body>
<table class="clmonth" summary="Calendar for June 2009">
<caption>June 2009</caption>
<tr>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<td class="previous">31</td>
<td class="active">1
<ul>
<li>Title</li>
<li>Year 8 theater trip</li>
</ul></td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class="active">7
<ul>
<li>Title</li>
</ul></td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td class="active">17
<ul>
<li>Sports Day</li>
</ul></td>
<td class="active">18
<ul>
<li>Title</li>
<li>Prizegiving</li>
</ul></td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td class="active">24
<ul>
<li>Title</li>
</ul></td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td class="active">30
<ul>
<li>Title</li>
</ul></td>
<td class="next">1</td>
<td class="next">2</td>
<td class="next">3</td>
<td class="next">4</td>
</tr>
</table>
</body>
</html>
Related examples in the same category