How To Create A Simple Calendar Using HTML

Calendars are a necessary part of our everyday life, they help us stay organized, focused and on top of tasks we need to complete each day. So why not make one with HTML? It's fun and simple. In this tutorial I'll show you how to create a very basic calendar using HTML Tables!

If you'd like to read some basic on HTML Tables read my How To Create A Basic Table Using HTML tutorial!

If you're ready let's go!



This is the simple calendar we are going to create, it's not pretty but it will give you the basis you need to create fancier calendars in the future!

December 2013
Su	Mo	Tu	We	Th	Fri	Sat
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

First we need to create the basic HTML Element for our calendar.

Example:

<table border="1">

(--- HTML tags and information are going here --- do not copy this line of information ---)

</table>

Next we need to add our calendar title which is the Month and Year of our choosing. We will be using the title header tags <th> because they show up bold and we need them to stand out.

You'll notice that the Table Header <th> has an attribute within in it which is colspan="7". This simply allows that Header row to stretch across all of the columns below and create a nice title area! The number 7 can be changed to any number. In this particular exercise the calendar has 7 rows for 7 days of the week. The title stretches above all 7 rows which is why we used that number.

Example:

<table border="1">

<tr>
<th colspan="7">December 2013</th>
</tr>

</table>

Next we are going to add in our Days of the Week columns below the calendars title tags.

Example:

<table border="1">

<tr>
<th colspan="7">December 2013</th>
</tr>

<tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>

</table>

Next we are going to add our first row of Numbered Cells representing individual days of the month! This set of HTML Tags will be placed underneath the Days of the Week columns you just placed into the coding.

To do this we will now be using the <td> tags, also known as the Table Data tags. These tags are used to plug in information into an HTML Table and unlike the title tags they will not show up bold, which is just what we want.

Example:

<table border="1">

<tr>
<th colspan="7">December 2013</th>
</tr>

<tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>

<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>

</table>

This is what our current calendar should look like so far:

December 2013
Su	Mo	Tu	We	Th	Fri	Sat
1	2	3	4	5	6	7

Now we just need to complete the rows and columns and plug in the correct numbers by copying the last set of <td> tags and information we used for the numbered cells we created and pasting them below each other!

Example:

<table border="1">

<tr>
<th colspan="7">December 2013</th>
</tr>

<tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>

<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>

<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>

<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>

<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>

<tr>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>

</table>

You're ending result should like like the calendar below!

December 2013
Su	Mo	Tu	We	Th	Fri	Sat
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

If you'd like to check out a fancy HTML calendar view my Smooth HTML Calendar Styled With CSS post!