1. Technology

Free Web Template: Calendar Layout

The XHTML

By

Copy the XHTML into your document. Be sure to not copy the advertisement copy that may appear within the code.

If you want a calendar for some other month, use the Generate a Calendar script from JavaScript @ About.com.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="styles.css" rel="stylesheet" />
<title>February 2007</title>
</head>
<body>
<div id="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b><b class="r3"></b> <b class="r4"></b></b>
<h1>February 2007</h1>
<table id="month">
 <thead>
 <tr>
 <th class="weekend">Sunday</th>
 <th>Monday</th>
 <th>Tuesday</th>
 <th>Wednesday</th>
 <th>Thursday</th>
 <th>Friday</th>
 <th class="weekend">Saturday</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td class="weekend previous"><span class="date">28</span><div class="day"></div></td>
 <td class="previous"><span class="date">29</span><div class="day"></div></td>
 <td class="previous"><span class="date">30</span><div class="day"></div></td>
 <td class="previous"><span class="date">31</span><div class="day"></div></td>
 <td><span class="date">1</span><div class="day"></div></td>
 <td><span class="date">2</span><div class="day"></div></td>
 <td class="weekend"><span class="date">3</span><div class="day"></div></td>
 </tr>
 <tr>
 <td class="weekend"><span class="date">4</span><div class="day"></div></td>
 <td><span class="date">5</span><div class="day"></div></td>
 <td><span class="date">6</span><div class="day"></div></td>
 <td><span class="date">7</span><div class="day"></div></td>
 <td><span class="date">8</span><div class="day"></div></td>
 <td><span class="date">9</span><div class="day"></div></td>
 <td class="weekend"><span class="date">10</span><div class="day"></div></td>
 </tr>
 <tr>
 <td class="weekend"><span class="date">11</span><div class="day"></div></td>
 <td><span class="date">12</span><div class="day"></div></td>
 <td><span class="date">13</span><div class="day"></div></td>
 <td><span class="date">14</span><div class="day"><p>Valentine's Day</p></div></td>
 <td><span class="date">15</span><div class="day"><p><strong>Brendan's Birthday</strong><br />Don't forget to wish him a happy birthday!</p><p>Happy Birthday, Brendan!</p></div></td>

 <td><span class="date">16</span><div class="day"></div></td>
 <td class="weekend"><span class="date">17</span><div class="day"></div></td>
 </tr>
 <tr>
 <td class="weekend"><span class="date">18</span><div class="day"></div></td>
 <td><span class="date">19</span><div class="day"></div></td>
 <td><span class="date">20</span><div class="day"></div></td>
 <td><span class="date">21</span><div class="day"></div></td>
 <td><span class="date">22</span><div class="day"></div></td>
 <td><span class="date">23</span><div class="day"></div></td>
 <td class="weekend"><span class="date">24</span><div class="day"></div></td>
 </tr>
 <tr>
 <td class="weekend"><span class="date">25</span><div class="day"></div></td>
 <td><span class="date">26</span><div class="day"></div></td>
 <td><span class="date">27</span><div class="day"></div></td>
 <td><span class="date">28</span><div class="day"></div></td>
 <td class="next"><span class="date">1</span><div class="day"></div></td>
 <td class="next"><span class="date">2</span><div class="day"></div></td>
 <td class="weekend next"><span class="date">3</span><div class="day"></div></td>
 </tr>
 </tbody>
</table>
</div>
</body>
</html>

You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.

Get other months

Return to this Layout
More XHTML CSS Layout Templates

©2014 About.com. All rights reserved.