How to make a calendar using html

Written by mara shannon
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make a calendar using html
(Ciaran Griffin/Lifesize/Getty Images)

A calendar made in HTML can be a useful addition to your website, or a practical exercise in formatting tables. There are many ways to customise a calendar. You can make a large calendar with events listed on each date; a small calendar with links to daily events; or a one with holidays and events in colour-coded text or backgrounds. With a bit of experience in HTML coding, you can customise your own HTML calendar.

Skill level:

Other People Are Reading


  1. 1

    Type "<table border=1>" to create your table. You can increase the size of your calendar's border by replacing "1" with a higher number.

  2. 2

    Fix the width of each column by typing:

    <col width="50">

    Replace "50" with your desired column width and repeat seven times, once for each column. This step isn't necessary, but it will help keep your calendar columns equal if you add events or other text.

  3. 3

    Create the first row by typing :

    <tr colspan="7"><th align="center">September 2010</th></tr>

    Replace "September 2010" with the correct month and year. The code "<tr>" stands for "table row" and "<th>" stands for "table header," which means the month and year will be emphasised. The code "<tr colspan="7">" means the row will extend over all seven columns (days of the week) on your calendar.

  4. 4

    Make a row showing the days of the week to head each column of the calendar:

    <tr><th align="center">Sunday</th><th align="center">Monday</th>

    Make sure to end with "</tr>" to conclude the row.

  5. 5

    Look up the number of days and starting day of the week for the month and year on your calendar.

  6. 6

    Make a row for the first week of the calendar, using "<td>" (normal table cells), instead of "<th>" (header cells). Leave blank boxes before the starting date. For example, if the first of the month falls on a Monday, the row should begin as:

    <tr><td></td><td align="center">1</td><td align="center">2</td>

    Continue on to the sixth and ending with "</tr>." Replace "center" with "right" or "left" if you want the dates aligned differently.

  7. 7

    Create additional table rows for all of the days of the month. End your table with "</table>."

Tips and warnings

  • If you add text to a cell in the calendar, type "
  • " to indicate a line break after the date.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.