Design a calendar using HTML and CSS
Last Updated :
17 Jan, 2024
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>
<h2 align="center" style="color: orange;">
January 2021
</h2>
<br />
<table bgcolor="lightgrey" align="center"
cellspacing="21" cellpadding="21">
<caption align="top">
</caption>
<thead>
<tr>
<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>
<h2 align="center" style="color: orange;">
January 2021
</h2>
<br />
<table bgcolor="lightgrey" align="center"
cellspacing="21" cellpadding="21">
<caption align="top">
</caption>
<thead>
<tr>
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...