Design a calendar using HTML and CSS - GeeksforGeeks

27 Jan, 2021
In this article, we will create a calendar using HTML, and CSS. First, we have to know a little about HTML. If someone does not know HTML and CSS, they will not be able to make the calendar better. The main focus of this article is on HTML tags and the way we are going to use CSS.
Approach: First we will be using the table tag, which will be used to create the structure of the calendar. This will give us an idea of how the calendar is created using HTML. Later we will apply some CSS property to make the design of the calendar better.
Creating Structure: In this section, we will create first the structure of the calendar by using the <table> tag. So this will help us to get the structure of the calendar.
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">  
Final code: This is the 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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)