HTML code to create a Calendar

Html is a hyper text markup language which can be used to create so many real life objects. In this section we are going to create a Calendar for year 2015 by using html langauge. You must have the basic knowledge of html language to understand the given program. You can learn HTML from our HTML Tutorial.

You must have the basic knowledge of html language to understand the given program. Please see our HTML Tutorial.

Click the Button to See Demo

HTML Program : create a calendar for year 2015

<html>
<head>
<title>HTML Calendar using Tables</title>
</head>
<body>
<center><h1>Calendar for year 2015</h1></center>
<style>
div.container {
width: 15em;
border: 1px solid;
}
</style>
<center>
<table><tr><td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">January</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td><td><td><td><td>1 <td>2 <td>3
</tr>
<tr>
<td>4 <td>5 <td>6 <td>7 <td>8 <td>9 <td>10
</tr>
<tr>
<td>11 <td>12 <td>13 <td>14 <td>15 <td>16 <td>17
</tr>
<tr>
<td>18 <td>19 <td>20 <td>21 <td>22 <td>23 <td>24
</tr>

<tr>
<td>25 <td>26 <td>27 <td>28 <td>29 <td>30 <td>31
</tr>
<tr>
<td><br>
</tr>
</td>
</table>
</div></td>
<td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">February</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td>1 <td>2 <td>3 <td>4 <td>5 <td>6 <td>7
</tr>
<tr>
<td>8 <td>9 <td>10 <td>11 <td>12 <td>13 <td>14
</tr>
<tr>
<td>15 <td>16 <td>17<td>18 <td>19 <td>20 <td>21
</tr>
<tr>
<td>22 <td>23 <td>24<td>25 <td>26 <td>27 <td>28
</tr>
<tr>
<td><br>
</tr>
<tr>
<td>
<br>
</tr>
</td>
</table>
</div>
</td>
<td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">March</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td>1 <td>2 <td>3<td>4 <td>5 <td>6 <td>7
</tr>
<tr>
<td>8 <td>9 <td>10<td>11 <td>12 <td>13 <td>14
</tr>
<tr>
<td>15 <td>16 <td>17<td>18 <td>19 <td>20 <td>21
</tr>
<tr>
<td>22 <td>23 <td>24<td>25 <td>26 <td>27 <td>28
</tr>
<tr>
<td>29 <td>30 <td>31
</tr>
<tr>
<td><br>
</tr>
</td>
</table>
</div>
</td>
</tr>
<td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">April</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td> <td> <td> <td>1 <td>2 <td>3 <td>4
</tr>
<tr>
<td>5 <td>6 <td>7 <td>8 <td>9 <td>10 <td>11
</tr>
<tr>
<td>12 <td>13 <td>14 <td>15 <td>16 <td>17 <td>18
</tr>
<tr>
<td>19 <td>20 <td>21 <td>22 <td>23 <td>24 <td>25
</tr>
<tr>
<td>26 <td>27 <td>28<td>29<td>30
</tr>
<tr>
<td><br>
</tr>
</td>
</table>
</div>
</td>
<td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">May</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr> <tr>
<td> <td> <td> <td> <td> <td>1 <td>2
</tr>
<tr>
<td>3 <td>4 <td>5 <td>6 <td>7 <td>8 <td>9

</tr>
<tr>
<td>10 <td>11 <td>12 <td>13 <td>14 <td>15 <td>16
</tr>
<tr>
<td>17 <td>18 <td>19 <td>20 <td>21 <td>22 <td>23
</tr>
<tr>
<td>24 <td>25 <td>26 <td>27 <td>28 <td>29 <td>30
</tr>
<tr>
<td>31
</td>
</table>
</div>
</td>
<td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">June</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td> <td>1 <td>2 <td>3 <td>4 <td>5 <td>6
</tr>
<tr>
<td>7 <td>8 <td>9 <td>10 <td>11 <td>12 <td>13

</tr>
<tr>
<td>14 <td>15 <td>16 <td>17 <td>18 <td>19 <td>20
</tr>
<tr>
<td>21 <td>22 <td>23 <td>24 <td>25 <td>26 <td>27
</tr>
<tr>
<td>28 <td>29 <td>30
</tr>
<tr>
<td><br>
</tr>
</td>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">July</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td> <td> <td> <td>1 <td>2 <td>3 <td>4
</tr>
<tr>
<td>5 <td>6 <td>7 <td>8 <td>9 <td>10 <td>11
</tr>
<tr>
<td>12 <td>13 <td>14 <td>15 <td>16 <td>17 <td>18
</tr>
<tr>
<td>19 <td>20 <td>21 <td>22 <td>23 <td>24 <td>25
</tr>
<tr>
<td>26 <td>27 <td>28<td>29<td>30<td>31
</tr>
<tr>
<td><br>
</tr>
</td>
</table>
</div>
</td>
<td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">August</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td> <td> <td> <td> <td> <td> <td>1
</tr>
<tr>
<td>2 <td>3 <td>4 <td>5 <td>6 <td>7 <td>8
</tr>
<tr>
<td>9 <td>10 <td>11 <td>12 <td>13 <td>14 <td>15
</tr>
<tr>
<td>16 <td>17 <td>18 <td>19 <td>20 <td>21 <td>22

</tr>
<tr>
<td>23 <td>24 <td>25 <td>26 <td>27 <td>28 <td>29
</tr>
<tr>
<td>30<td>31
</td>
</table>
</div>
</td>
<td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">September</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td> <td> <td>1 <td>2 <td>3 <td>4 <td>5
</tr>
<tr>
<td>6 <td>7 <td>8 <td>9 <td>10 <td>11 <td>12
</tr>
<tr>
<td>13 <td>14 <td>15 <td>16 <td>17 <td>18 <td>19
</tr>
<tr>
<td>20 <td>21 <td>22 <td>23 <td>24 <td>25 <td>26
</tr>
<tr>
<td>27 <td>28 <td>29 <td>30
</tr>
<tr>
<td><br>
</tr>
</td>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">October</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td> <td> <td> <td> <td>1 <td>2 <td>3
</tr>
<tr>
<td>4 <td>5 <td>6 <td>7 <td>8 <td>9 <td>10

</tr>
<tr>
<td>11 <td>12 <td>13 <td>14 <td>15 <td>16 <td>17
</tr>
<tr>
<td>18 <td>19 <td>20 <td>21 <td>22 <td>23 <td>24
</tr>
<tr>
<td>25 <td>26 <td>27 <td>28 <td>29 <td>30 <td>31
</tr>
<tr>
<td><br>
</tr>
</td>
</table>
</div>
</td>
<td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">November</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td>1 <td>2 <td>3 <td>4 <td>5 <td>6 <td>7
</tr>
<tr>
<td>8 <td>9 <td>10 <td>11 <td>12 <td>13 <td>14
</tr>
<tr>
<td>15 <td>16 <td>17 <td>18 <td>19 <td>20 <td>21
</tr>
<tr>
<td>22 <td>23 <td>24 <td>25 <td>26 <td>27 <td>28
</tr>
<tr>
<td>29 <td>30</tr>
<tr><td><br></tr>
</td>
</table>
</div>
</td>
<td>
<div class="container">
<center><p><font size="4" face="Arial" color="BLACK">December</font></p></center><strong><hr/></strong>
<table>
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td> <td> <td>1 <td>2 <td>3 <td>4 <td>5
</tr>
<tr>
<td>6 <td>7 <td>8 <td>9 <td>10 <td>11 <td>12
</tr>
<tr>
<td>13 <td>14 <td>15 <td>16 <td>17 <td>18 <td>19
</tr>
<tr>
<td>20 <td>21 <td>22 <td>23 <td>24 <td>25 <td>26
</tr>
<tr>
<td>27 <td>28 <td>29 <td>30<td>31
</tr>
<tr>
<td><br>
</tr>
</td>
</table>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>


Click the Button to See Demo

Output



calender

Explanation



  • We will understand the complete program section by section:
  • <center><h1>Calendar for year 2015</h1></center>
  • The above line of code will print a heading in the center for calendar as: "Calendar for year 2015".
  • <style>
    div.container {
    width: 15em;
    border: 1px solid;
    }
    </style>
  • The above lines of code shows the css style for the class 'container' which will further used for design the layout for each month of calendar. This container class contains the width 15em and boder 1px solid.
  • <div class="container">
    <center><p><font size="4" face="Arial" color="BLACK">January</font></p></center><strong><hr/></strong>
    <table>
    <tr>
    <th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
    </tr>
    <tr>
    <td><td><td><td><td>1 <td>2 <td>3
    </tr>
    <tr>
    <td>4 <td>5 <td>6 <td>7 <td>8 <td>9 <td>10
    </tr>
    <tr>
    <td>11 <td>12 <td>13 <td>14 <td>15 <td>16 <td>17
    </tr>
    <tr>
    <td>18 <td>19 <td>20 <td>21 <td>22 <td>23 <td>24
    </tr>
    <tr>
    <td>25 <td>26 <td>27 <td>28 <td>29 <td>30 <td>31
    </tr>
    <tr>
    <td><br>
    </tr>
    </td>
    </table>
    </div>
  • The above lines of code will show the days and date of the month of january 2015.
  • In the above code:
    • <div class="container"> this statement shows the use of class container here which is described in <style> tag.
    • <center><p><font size="4" face="Arial" color="BLACK">January</font></p></center><strong><hr/></strong> This statement will print the "January" in a given style with a horizontal ruler at the center of the frame.
    • <table><tr><th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat</tr>
      This statement will print a table with headings Sun, Mon, Tue, Wed, Thu, Fri, Sat
    • <tr>
      <td><td><td><td><td>1 <td>2 <td>3
      </tr>
      <tr>
      <td>4 <td>5 <td>6 <td>7 <td>8 <td>9 <td>10
      </tr>
      <tr>
      <td>11 <td>12 <td>13 <td>14 <td>15 <td>16 <td>17
      </tr>
      <tr>
      <td>18 <td>19 <td>20 <td>21 <td>22 <td>23 <td>24
      </tr>
      <tr>
      <td>25 <td>26 <td>27 <td>28 <td>29 <td>30 <td>31
      </tr>
      <tr>
      <td><br>
      </tr>


  • These above statements will print the dates of the januaury month row by row:
  • Here is the result of the above whole code:
  • calender

  • Similarly you can print the dates and days of the each month.