Now that’s sorted out, let’s give the cells more breathing room by setting their height and width.
th, td {
width: 3em;
height: 3em;
}
The advantage of adding space this way rather than using padding, is that this method also sets all of the cells to the same square size, making the calendars more consistent.
h2 {
font-family: Georgia, serif;
font-weight: normal;
text-align: center;
}
table {
border-collapse: collapse;
font-family: sans-serif;
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 |