With the calendars looking much more like calendars, much easier to recognize and read at a glance than before, let’s turn to adding a little more useful visual information to them by highlighting the current week and day. In order to do this, we must first differentiate these within the HTML:
<tr class="thisweek">
  <td>22</td>
  <td>23</td>
  <td>24</td>
  <td>25</td>
  <td>26</td>
  <td class="today">27</td>
  <td>28</td>
</tr>
These could just as easily be ids rather than classes in this case, but it is possible to imagine a case where we would want to highlight different days and weeks on different calendars along a page. My general rule is to use an id only when I have a particular reason to want only one of something on the page, usually for the sake of prominence. Elsewhere, a class is generally more appropriate.
h2 {
  font-family: Georgia, serif;
  font-weight: normal;
  margin: 1em 0 0 0;
  text-align: center;
}
table {
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: .8em;
  margin: auto;
  text-align: center;
}
th, td {
  width: 3em;
  height: 3em;
}
th {
  font-weight: normal;
}
td {
  border: 1px solid #CCCCCC;
}| Su | Mo | Tu | We | Th | Fr | Sa | 
|---|---|---|---|---|---|---|
| 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 | 
| Su | Mo | Tu | We | Th | Fr | Sa | 
|---|---|---|---|---|---|---|
| 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 |