Calendar table : table « Tags « HTML / CSS
- HTML / CSS
- Tags
- table
Calendar 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table {
width: 100%;
border-collapse: collapse;
}
#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: #00B3FF;
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 {
padding-left: 1em;
padding-bottom: .75em;
}
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;
float: left;
width: 1.5em;
height: 1.5em;
}
#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="" class="event">Event 1</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="" class="event">Event 2</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="" class="event">Event 4</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">Event 5</div>
</td>
<td>
<div>
<a href="30.html" class="date">30</a> <a href="add.html" class="addevent">+</a>
</div><a href="" class="event">Event 6</a>
</td>
<td>
<div>
<a href="31.html" class="date">31</a> <a href="add.html" class="addevent">+</a>
</div><a href="" class="event">Event 7</a> <a href="31.html?id=2" class="event">Event 8</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