Calendar table with div : Calendar « CSS Controls « HTML / CSS
- HTML / CSS
- CSS Controls
- Calendar
Calendar table with div
<!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">
<head>
<title></title>
<style type="text/css">
table {
width: 100%;
border-collapse: collapse;
}
td a:link, td a:visited {
text-decoration: none;
}
#year {
font-family: monospace;
font-size: 1.5em;
padding: 0;
margin: 0;
}
#month {
font-family: monospace;
font-size: 2em;
padding: 0;
margin: 0;
}
#days {
background-color: black;
color: white;
font-family: monospace;
width: 75px;
}
.date {
border-right: 1px solid black;
border-bottom: 1px solid black;
font-family: monospace;
text-decoration: none;
float: left;
width: 1.5em;
height: 1.5em;
background-color: white;
text-align: center;
}
.addevent {
display: block;
float: left;
width: 1em;
height: 1em;
text-align: center;
background-color: #666;
color: white;
font-weight: bold;
text-decoration: none;
}
.event {
clear: both;
padding-left: 1em;
padding-bottom: .75em;
display: block;
}
td {
width: 14%;
background-color: #ccc;
border: 1px solid white;
vertical-align: top;
}
.weekend {
background-color: #999;
}
.emptydate {
border-right: 1px solid #666;
border-bottom: 1px solid #666;
font-family: monospace;
text-decoration: none;
float: left;
width: 1.5em;
height: 1.5em;
background-color: #ccc;
text-align: center;
}
#today {
border: 2px solid black;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<th colspan="7" id="year"><a href=""><</a> 2000 <a href="">></a></th>
</tr>
<tr>
<th colspan="7" id="month"><a href=""><</a> October <a href="">></a></th>
</tr>
<tr id="days">
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="weekend">
<div>
<a href="1.html" class="date">1</a> <a href="add.html" class="addevent">+</a>
</div>
</td>
<td>
<div>
<a href="2.html" class="date">2</a> <a href="add.html" class="addevent">+</a>
</div><a href="16.html?id=1" class="event">agenda</a>
</td>
<td>
<div>
<a href="3.html" class="date">3</a> <a href="add.html" class="addevent">+</a>
</div>
</td>
<td>
<div>
<a href="4.html" class="date">4</a> <a href="add.html" class="addevent">+</a>
</div>
</td>
<td>
<div>
<a href="5.html" class="date">5</a> <a href="add.html" class="addevent">+</a>
</div><a href="5.html?id=1" class="event">Dad's birthday</a>
</td>
<td>
<div>
<a href="6.html" class="date">6</a> <a href="add.html" class="addevent">+</a>
</div>
</td>
<td class="weekend">
<div>
<a href="7.html" class="date">7</a> <a href="add.html" class="addevent">+</a>
</div><a href="7.html?id=1" class="event">event</a>
</td>
</tr>
<tr>
<td class="weekend">
<div>
<a href="29.html" class="date">29</a> <a href="add.html" class="addevent">+</a>
</div>
<div class="event">
Buy candy
</div>
</td>
<td>
<div>
<a href="30.html" class="date">30</a> <a href="add.html" class="addevent">+</a>
</div><a href="16.html?id=1" class="event">agenda</a>
</td>
<td>
<div>
<a href="31.html" class="date">31</a> <a href="" class="addevent">+</a>
</div><a href="31.html?id=1" class="event">Halloween</a> <a href="" class="event">Event</a>
</td>
<td>
<div class="emptydate">
</div>
</td>
<td>
<div class="emptydate">
</div>
</td>
<td>
<div class="emptydate">
</div>
</td>
<td class="weekend">
<div class="emptydate">
</div>
</td>
</tr>
</table>
</body>
</html>
Related examples in the same category