In this tutorial I explained how to design a calendar using table tag in HTML & CSS code. This is the web design lab program exercise for Manonanmaniam Sundaranar University Affiliated college students. Actually it’s very simple concept but you need to know the structure for creating and manage the tables. Then only able to make changes and color decoration for better UI designs.
For the example purpose here I get the sample data from January Month 2024 year. As per your reference you can take any data but the output is most important to get the perfect results. Already I make the 30 min live tutorial videos and uploaded in YouTube. And in below I share the link, so you can watch it and do it yourself. Then only you are getting real time knowledge like how create a calendar designs using HTML and CSS program code.
Design a Calendar using table tag | Source Code
Do it yourself, then only you get some idea in develop the concepts. So maximum try to stop the copy paste work and try yourself for execute the code. If you are doing this then surely you can improve your coding skills and helps to getting software jobs in IT industries.
Also Read – Learn Software Courses in Tamil Language | Affordable Price
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>January 2024 Calendar</title>
<link rel="icon" href="study.png">
<style type="text/css">
table {
width: 100%;
border-collapse: collapse;
}
th,td {
border: 1px solid gray;
text-align: center;
padding: 8px;
}
th {
background-color: #4834d4;
color: #dff9fb;
font-size: 20px;
}
td {
font-size: 18px;
color: #000;
font-weight: bold;
background-color: #f1c40f;
}
caption {
font-size: 20px;
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>January 2024</caption>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td style="color:#95a5a6">31</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td style="color:#95a5a6">1</td>
<td style="color:#95a5a6">2</td>
<td style="color:#95a5a6">3</td>
</tr>
</table>
</body>
</html>Screenshot
For the reference in below we are sharing the final output for design a calendar page using HTML & CSS code. In this project we are using Sublime Text IDE for execute the code and it’s very useful for college students who are in beginner category level. Moreover also try to earn passive income via blogging concepts.
