Calendar 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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen,print">
table {
border: 1px solid #999;
border-collapse: collapse;
font-family: Georgia, Times, serif;
}
th {
border: 1px solid #999;
font-size: 70%;
text-transform: uppercase;
}
td {
border: 1px solid #999;
height: 5em;
width:5em;
padding: 5px;
vertical-align: top;
}
caption {
font-size: 300%;
font-style: italic;
}
.day {
text-align: right;
}
.notes {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
text-align: right;
padding-left: 20px;
}
.birthday {
background-color: #ECE;
}
.weekend {
background-color: #F3F3F3;
}
</style>
</head>
<body>
<table>
<caption>June</caption>
<col class="weekend">
<col class="weekday" span="5">
<col class="weekend">
<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><div class="day">1</div></td>
<td><div class="day">2</div></td>
<td><div class="day">3</div></td>
<td><div class="day">4</div></td>
<td><div class="day">5</div></td>
<td class="birthday"><div class="day">6</div>
<div class="notes">It's my birthday!</div></td>
<td><div class="day">7</div></td>
</tr>
<tr>
<td><div class="day">8</div></td>
<td><div class="day">9</div></td>
<td><div class="day">10</div></td>
<td><div class="day">11</div></td>
<td><div class="day">12</div></td>
<td><div class="day">13</div></td>
<td><div class="day">14</div></td>
</tr>
<tr>
<td><div class="day">15</div></td>
<td><div class="day">16</div></td>
<td><div class="day">17</div></td>
<td><div class="day">18</div></td>
<td><div class="day">19</div></td>
<td><div class="day">20</div></td>
<td><div class="day">21</div></td>
</tr>
<tr>
<td><div class="day">22</div></td>
<td><div class="day">23</div></td>
<td><div class="day">24</div></td>
<td><div class="day">25</div></td>
<td><div class="day">26</div></td>
<td><div class="day">27</div></td>
<td><div class="day">28</div></td>
</tr>
<tr>
<td><div class="day">29</div></td>
<td><div class="day">30</div></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Related examples in the same category