Open In App
Related Articles

Design a calendar using HTML and CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we will create a calendar using HTML, and CSS. HTML is a standard for creating the structure of web pages and defining elements like headings, paragraphs, and links whereas CSS (Cascading Style Sheets) complements HTML by controlling the visual presentation, enabling styling and layout customization for a more visually appealing web design.

Approach

  • First, create the HTML structure by creating a table using <tr> <th> <td> tags for designing calendar.
  • 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.
  • Apply styles for the table, including `border-collapse`, `background`, and `color`, and add styling for specific cells using inline styles.
  • 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.

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 2021
    </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.

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 2021
    </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:



Last Updated : 17 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads