Design a Calendar using HTML and CSS
Last Updated :
23 May, 2025
Improve
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.
<!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.
<!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:
