html,css : table로 달력 만들기

table

- thead와 tbody로 나뉜다.

- tr(table row) : 행(가로)을 추가한다. 방향은 왼쪽에서 오른쪽 ->

- th(table head) : 표의 맨 위의 기준이 되는 값이다. 기본적으로 진하게 표시된다.

- td(table data) : 값을 입력한다.

- cellspacing : 데이터 간의 공간 여백

- cellpadding : 각 데이터의 공간 여백

- colspan: 가로간 병합

- rowspan: 세로간 병합

  <h1>2022년 9월</h1>
  <table width="100%" cellpadding="10px">
    <thead>
      <tr>
        <th class="red">일</th>
        <th>월</th>
        <th>화</th>
        <th>수</th>
        <th>목</th>
        <th>금</th>
        <th class="blue">토</th>
      </tr>
    </thead>

    <tbody>
        <tr>
          <td colspan="4"></td>
          <td>1</td>
          <td>2</td>
          <td class="red">3</td>
        </tr>
        
        <tr>
          <td class="red">4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td class="red">9</td>
          <td class="red">10</td>
        </tr> 

        <tr>
          <td class="red">11</td>
          <td class="red">12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td class="blue">17</td>
        </tr>

        <tr>
          <td class="red">18</td>
          <td>19</td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td class="blue">24</td>
        </tr>

        <tr>
          <td class="red">25</td>
          <td>26</td>
          <td>27</td>
          <td>28</td>
          <td>29</td>
          <td>30</td>
        </tr>
    </tbody>
  </table>

- border : 테두리 두께와 스타일, 컬러를 함께 설정해야 한다

.red {
  color: red;;
}

.blue {
  color:blue;
}

h1 {
  text-align: center;
  color: green;
}

table,
td {
  border: 3px solid #333;
}