<table>

<table> 태그는 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의할 때 사용합니다.
이러한 테이블은 <table> 태그와 자식 태그인 <tr>, <th>, <td> 요소들로 구성됩니다.

<tr> : 테이블의 각 행(row)을 정의합니다.

<th> : 각 열(column)의 제목을 정의하는 헤더 셀입니다.

<td> : <tr> 태그의 자식태그로, 테이블이 가지는 하나의 셀을 표현합니다.

6월 달력
SUN MON TUE WED THU FRI SAT
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

<!-- 아래의 코드로 만들어진 달력표 -->

- HTML -

<table>
      <caption>6월 달력</caption>
      <tr>
            <th>SUN</th>
            <th>MON</th>
            <th>TUE</th>
            <th>WED</th>
            <th>THU</th>
            <th>FRI</th>
            <th>SAT</th>
      </tr>
      <tr>
            <td></td>
            <td></td>
            <td></td>
            <td class="gonghwu">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
      </tr>
      <tr>
            <td>5</td>
            <td class="gonghwu">6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
      </tr>
      <tr>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
      </tr>
      <tr>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
      </tr>
      <tr>
            <td>26</td>
            <td>27</td>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td></td>
            <td></td>
      </tr>
</table>



- CSS -

table {
     margin:  50px 0 0 0;
     border-collapse:  collapse;
}


table, th, td {
     border:  2px solid black;
}


td, th {
     padding-left:  2px;
     width:  50px;
     height:  30px;
}


th {
     background-color:  skyblue;
}


th:first-child, tr td:first-child, .gonghwu {
     color:  rgba(255, 0, 0, 0.75);
}


th:last-child, tr td:last-child {
     color:  rgba(0, 0, 255, 0.75);
}


caption {
     padding-bottom:  10px;
     font-size:  16pt;
     font-weight:  bold;
}