A fun little widget that adds every month of the year to your website

[Rubbereon]

Pure HTML with inline CSS styling table of every month of the year, color-coded by season. I also treat the months of February, May, August and November as the "transitional" months of the 4 seasons, so they have a gradient instead. Genuinely August, despite being still apart of Summer technically until September really just feels like Fall has already arrived, it's getting fairly cold again which I'll happily welcome after this hell of a Summer.

Here's the code:

Code

<div style="float: right;">
<table style="height: 60px;" border="1" width="485"><caption>Months &amp; Seasons</caption>
<tbody>
<tr>
<td style="width: 33.0833px; background-color: #7777ff;">Jan</td>
<td style="width: 33.8333px; background-image: linear-gradient(to right, #7777ff, #00ff00);">Feb</td>
<td style="width: 34.7833px; background-color: #00ff00;">Mar</td>
<td style="width: 33.5px; background-color: #00ff00;">Apr</td>
<td style="width: 36.25px; background-image: linear-gradient(to right, #00ff00, #ffff00);">May</td>
<td style="width: 33.4px; background-color: #ffff00;">Jun</td>
<td style="width: 30.0667px; background-color: #ffff00;">Jul</td>
<td style="width: 35.4px; background-image: linear-gradient(to right, #ffff00, #ff7700);">Aug</td>
<td style="width: 35.0833px; background-color: #ff7700;">Sep</td>
<td style="width: 33.2167px; background-color: #ff7700;">Oct</td>
<td style="width: 35.4333px; background-image: linear-gradient(to right, #ff7700, #7777ff);">Nov</td>
<td style="width: 34.95px; background-color: #7777ff;">Dec</td>
</tr>
</tbody>
</table>
<progress style="width:100%" value="32" max="365"> 32% </progress>
</div>

I suck at javascript, so I have yet to figure a way to make the progress bar follow along the months, so you'll quickly notice it does nothing.

If you wanna take a peek at what it looks like you can paste the code into https://html.onlineviewer.net/, https://html5-editor.net/ or https://jsfiddle.net/