Climate chart

by adamh

HTML

<h1>Temperature &deg;C</h1>
<table cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th>J</th>
            <th>F</th>
            <th>M</th>
            <th>A</th>
            <th>M</th>
            <th>J</th>
            <th>J</th>
            <th>A</th>
            <th>S</th>
            <th>O</th>
            <th>N</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="i-0">0</td>
            <td class="i-1">5</td>
            <td class="i-2">10</td>
            <td class="i-3">15</td>
            <td class="i-4">20</td>
            <td class="i-5">25</td>
            <td class="i-6">30</td>
            <td class="i-7">35</td>
            <td class="i-8">40</td>
            <td class="i-9">45</td>
            <td class="i-8">40</td>
            <td class="i-7">35</td>
        </tr>
    </tbody>
</table>

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 62.5%;
    background: #E7EEF2;
    text-align: center;
}

h1 {
    font-size: 14px;
}

table {
    font-weight: bold;
    margin: 0 auto;
}

th, td {
    width: 40px;
    height: 40px;
    text-align: center;
}

th {
    height: 20px;
}

td {
    font-size: larger;
    border: 0px solid rgba(255,255,255,0.6);
    border-width: 0 0 2px 0;
}

td:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

td:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;}

.i-0 {
  background-color: #F6FBFC;
}
.i-1 {
  background-color: #DDF2D7;
}
.i-2 {
  background-color: #C5E9B3;
}
.i-3 {
  background-color: #D8E073;
}
.i-4 {
  background-color: #F2C976;
}
.i-5 {
  background-color: #F3AD8A;
}
.i-6 {
  background-color: #F4939D;
}
.i-7 {
  background-color: #F37497;
}
.i-8 {
  background-color: #F04F77;
}
.i-9 {
  background-color: #E3225B;
}