Design a Calendar using HTML and CSS

Last Updated : 23 May, 2025

In this article, we will create a calendar using HTML and CSS. HTML is used to build the basic structure of a web page, while CSS adds design and layout styles to make it visually appealing. Nearly 90% of websites rely on the combination of HTML and CSS for creating structured and styled content. This project will help you understand how both work together to design a functional and attractive calendar.

Project Preview:

Step By Step Guide to Create a Calender

Step1: First, create the HTML structure by creating a table using <tr> <th> <td> tags for designing calendar.
Step2: Inside the <body>, create a <table> element to structure the calendar. Use <thead> for the table header containing day names (Sun, Mon, Tue, etc.).Style the header with background color and text color.
Step3: Apply styles for the table, including `border-collapse`, `background`, and `color`, and add styling for specific cells using inline styles.
Step4: Complete the table by inputting the days of the month within the `<td>` elements. Ensure a proper hierarchy and indentation for readability.

Example: First create the Structure of the calendar by using the <table> tag.

index.html

<!DOCTYPE html>
<html>
<body>
    <!-- Here we are using attributes like
        cellspacing and cellpadding -->

    <!-- The purpose of the cellpadding is 
        the space that a user want between
        the border of cell and its contents-->

    <!-- cellspacing is used to specify the 
        space between the cell and its contents -->
    <h2 align="center" style="color: orange;">
        January 2025
    </h2>
    <br />
    <table bgcolor="lightgrey" align="center" 
        cellspacing="21" cellpadding="21">
        
        <!-- The tr tag is used to enter 
            rows in the table -->

        <!-- It is used to give the heading to the
            table. We can give the heading to the 
            top and bottom of the table -->

        <caption align="top">
            <!-- Here we have used the attribute 
                that is style and we have colored 
                the sentence to make it better 
                depending on the web page-->
        </caption>

        <!-- Here th stands for the heading of the
            table that comes in the first row-->

        <!-- The text in this table header tag will 
            appear as bold and is center aligned-->

        <thead>
            <tr>
                <!-- Here we have applied inline style 
                     to make it more attractive-->
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>sat</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr></tr>
            <tr>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>10</td>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
            </tr>
            <tr>
                <td>17</td>
                <td>18</td>
                <td>19</td>
                <td>20</td>
                <td>21</td>
                <td>22</td>
                <td>23</td>
            </tr>
            <tr>
                <td>24</td>
                <td>25</td>
                <td>26</td>
                <td>27</td>
                <td>28</td>
                <td>29</td>
                <td>30</td>
            </tr>
            <tr>
                <td>31</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Output:

CSS Design and its attributes: We will use some CSS properties and attributes of the table tag to design the calendar. The attributes that we are going to use is the border and cellspacing and cellpadding. Here we have used an interesting property of CSS that is border-collapse. The purpose of the border-collapse is to make all the border to be collapsed into a single border. Here we have also used the inline style attribute to make the dates of February be little visible.

CSS code:

table {
    border-collapse: collapse;
    background: white;
    color: black;
}
th, td { 
    font-weight: bold;
}

Attributes that we will use in the table tag:

<table bgcolor="lightgrey" align="center" 
    cellspacing="21" cellpadding="21">

Example : Now we will write the Final code with combination of all the above codes.

index.html

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            background: white;
            color: black;
        }
        th,
        td {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- Here we are using attributes like
        cellspacing and cellpadding -->

    <!-- The purpose of the cellpadding is 
        the space that a user want between
        the border of cell and its contents-->

    <!-- cellspacing is used to specify the 
        space between the cell and its contents -->
    <h2 align="center" style="color: orange;">
        January 2025
    </h2>
    <br />
    <table bgcolor="lightgrey" align="center" cellspacing="21" cellpadding="21">

        <!-- The tr tag is used to enter 
            rows in the table -->

        <!-- It is used to give the heading to the
            table. We can give the heading to the 
            top and bottom of the table -->
        <caption align="top">
            <!-- Here we have used the attribute 
                that is style and we have colored 
                the sentence to make it better 
                depending on the web page-->
        </caption>
        <!-- Here th stands for the heading of the
            table that comes in the first row-->

        <!-- The text in this table header tag will 
            appear as bold and is center aligned-->
        <thead>
            <tr>
                <!-- Here we have applied inline style 
                     to make it more attractive-->
                <th style="color: white; background: purple;">
                    Sun</th>
                <th style="color: white; background: purple;">
                    Mon</th>
                <th style="color: white; background: purple;">
                    Tue</th>
                <th style="color: white; background: purple;">
                    Wed</th>
                <th style="color: white; background: purple;">
                    Thu</th>
                <th style="color: white; background: purple;">
                    Fri</th>
                <th style="color: white; background: purple;">
                    Sat</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr></tr>
            <tr>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>10</td>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
            </tr>
            <tr>
                <td>17</td>
                <td>18</td>
                <td>19</td>
                <td>20</td>
                <td>21</td>
                <td>22</td>
                <td>23</td>
            </tr>
            <tr>
                <td>24</td>
                <td>25</td>
                <td>26</td>
                <td>27</td>
                <td>28</td>
                <td>29</td>
                <td>30</td>
            </tr>
            <tr>
                <td>31</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Output:

Fading Text Animation Effect Using CSS3

codingbeast12

Improve

Article Tags :

Design a Calendar using HTML and CSS

Project Preview:

Step By Step Guide to Create a Calender

Similar Reads

Basics Questions

Properties Based Questions

Selectors Questions

Functions Questions

Miscellaneous Questions

Thank You!

What kind of Experience do you want to share?