Для создания календаря в HTML и CSS можно использовать таблицу и стилизовать ее с помощью CSS. Вот пример кода:
HTML:
<div class="calendar">
<table>
thead>
<tr>
<th colspan="7">Месяц Год</th>
</tr>
<tr>
<th>Пн</th>
<th>Вт</th>
th>Ср</th>
<th>Чт</th>
<th>Пт</th>
th>Сб</th>
<th>Вс</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
td>6</td>
<td>7</td>
td>8</td>
td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
td>13</td>
<td>14</td>
td>15</td>
<td>16</td>
<td>17</td>
</tr>
tr>
td>18</td>
td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
td>23</td>
<td>24</td>
</tr>
tr>
<td>25</td>
td>26</td>
td>27</td>
td>28</td>
td>29</td>
td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>
CSS:
.calendar {
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: #eee;
font-weight: bold;
text-align: center;
padding: 10px;
}
td {
border: 1px solid #ccc;
text-align: center;
padding: 10px;
}
td:hover {
background-color: #f5f5f5;
}
thead th:first-child,
tbody td:first-child {
color: #f00;
}
thead th:last-child,
tbody td:last-child {
color: #00f;
}
Вы можете изменить стили в соответствии со своими потребностями.