Html Basics – DFDUBS

<!DOCTYPE html>
<html>
 <head>
  <style>
   [ css code will go here ]
  </style>
 </head>
 <body>
   [ html code will go here ]
 </body>
</html>

Open notepad and type the code above and save file as calendar.html. Go to the folder where you saved calendar.html and open it in the web browser.

Next replace the text [ html code will go here ] in the body tag with the code below.

<table>
 <thead>
  <tr>
   <th>Sunday</th>
   <th>Monday</th>
   <th>Tuesday</th>
   <th>Wednesday</th>
   <th>Thursday</th>
   <th>Friday</th>
   <th>Saturday</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>  
 </tbody>
 <tfoot>
  <tr>
   <td colspan = "7" class="month">
   [ Month Year ]
   </td>
  </tr>
 </tfoot>
</table>

There are 6 rows you have copied over, now starting with the first row enter the number one for the first day of the current month. There are 7 <td></td> tags with the first pair representing Sunday and the last pair representing Saturday. After entering all the days replace [ Month Year ] with current month and year.

 Example of dates populated in <td></td>   
     <tr>
      <td>10</td>  //Sunday
      <td>11</td>  //Monday
      <td>12</td>  //Tuesday
      <td>13</td>  //Wednesday
      <td>14</td>  //Thursday
      <td>15</td>  //Friday
      <td>16</td>  //Saturday
     </tr>
     ....

Replace the [ css code will go here ] in the <style> tags with the code below

   table td {
    text-align: center;
    border: thin solid black;
    padding: 0;
   }

   table {
    border-spacing: 0;
   }

   .today{
    background-color: yellow;
   }

   .month {
    font-size: 30px;
    font-weight: bold;    
   }

In the <tfoot> tag change [ Month Year ] to be the current month and year. So for example if its March 4th 2024 then change [ Month Year ] to be “March 2024”

Finally, add the class “today” to the <td> that has the same date as today. For example if today is March 3rd, then add the “today” class to <td> tags with 3.So it will look like this <td class=”today”>3</td>. Your finished code should like the one below

Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31
March 2024

Leave a Reply Cancel reply