Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Design a calendar using HTML and CSS
There are so many uses for calendars that are really beneficial. They frequently make appointments and schedule meetings in our email accounts. A fully functional calendar does not have a default one, like with some HTML inputs, thus you will need to create one yourself using HTML and CSS.
Before we dive into the article on the creation of the calendar using HTML and CSS, First, we know about the HTML <table> tag, which will be used to create the structure of the calendar.
HTML <table> tag
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.
Syntax
Following is the syntax for HTML <table> tag
<table>…..</table>
Example
In the following example, we are going to create a calendar using the HTML <table> tag.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
background: white;
}
th {
color: #DE3163;
background-color: #D5F5E3;
font-weight: bold;
}
td {
font-weight: bold;
}
</style>
</head>
<body>
<h2 align="center" style="color: #DE3163;"> AUGUST , 2023 </h2>
<table align="center" cellspacing="25" cellpadding="25">
<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>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr></tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</body>
</html>
When we run the above code, it will generate an output consisting of the calendar displayed on the webpage.
69 Views
