<div style="display:flex; justify-content:center;">
      <table style="width:100%; margin:20px; border-collapse:collapse;">
        <thead>
          <tr>
            <th>
              <span>日</span>
            </th>
            <th>
              <span>月</span>
            </th>
            <th>
              <span>火</span>
            </th>
            <th>
              <span>水</span>
            </th>
            <th>
              <span>木</span>
            </th>
            <th>
              <span>金</span>
            </th>
            <th>
              <span>土</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>&nbsp;</td>
            <td><span>1</span></td>
            <td><span>2</td>
            <td><span>3</td>
            <td><span>4</td>
            <td><span>5</td>
            <td><span>6</td>
          </tr>
          <tr>
            <td><span>7</td>
            <td><span>8</td>
            <td><span>9</td>
            <td><span>10</td>
            <td><span>11</td>
            <td><span>12</td>
            <td><span>13</td>
          </tr>
          <tr>
            <td><span>14</td>
            <td><span>15</td>
            <td><span>16</td>
            <td><span>17</td>
            <td><span>18</td>
            <td><span>19</td>
            <td><span>20</td>
          </tr>
          <tr>
            <td><span>21</td>
            <td><span>22</td>
            <td><span>23</td>
            <td><span>24</td>
            <td><span>25</td>
            <td><span>26</td>
            <td><span>27</td>
          </tr>
          <tr>
            <td><span>28</td>
            <td><span>29</td>
            <td><span>30</td>
            <td><span>31</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </tbody>
      </table>
    </div>
thead span {
  border-radius:0.5rem;
  padding-right:20%;
  padding-left:20%;
  background-color:skyblue;
  font-weight:normal;
  color:#007bff;
}

thead tr th:first-child span {
  background-color:tomato;
  color:white;
}

thead tr th:last-child span{
  background-color:#007bff;
  color:white;
}

tbody tr {
  height:100px;
  border-bottom:1px solid black;
}

tbody td {
  text-align:center;
  vertical-align:top;
  padding-top:0.5rem;
}

tbody td span{
  border-radius:50%;
  display:inline-block;
  background-color:skyblue;
  width:1.5rem;
  height:1.5rem;
  color:#007bff;
}

tbody tr td:first-child span {
  background-color:tomato;
  color:white;
}

tbody tr td:last-child span{
  background-color:#007bff;
  color:white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.