Design Calendar in HTML.

To create a basic calendar in HTML, you can use a combination of HTML and CSS. Here is an example code for a simple calendar:


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Calendar</title>

<style>

      table 

{

        border-collapse: collapse;

        width: 100%;

}

th 

{

        background-color: #ECEFF1;

        border: 1px solid #CFD8DC;

        padding: 8px;

        text-align: left;

        font-weight: bold;

}

td 

{

        border: 1px solid #CFD8DC;

        padding: 8px;

        text-align: left;

}

      

.today 

{

        background-color: #FFEBEE;

}

</style>

</head>

<body>

<h1>Calendar</h1>

<table>

<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>

          <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 class="today">30</td>

</tr>

</tbody>

</table>

</body>

</html>


Explanation: In this example, the calendar is created using an HTML table. The table has seven columns for the days of the week and five rows for the weeks of the month. Each cell of the table contains a day number. The current date is highlighted with a different background color using the today class.

Notice: You can customize this code to fit your specific needs, such as adding events or changing the styling.

Post a Comment

Previous Post Next Post
© 2023 Developed and Design By
NILESH NISHAD