Table

<table> <!-- 테이블 정의 -->
  <tr>  <!-- 행 만듦 -->
    <th></th> <!-- 행제목 만듦 -->
    <th>Dog</th>
    <th>Cat</th>
  </tr>
  <tr>
    <th>종</th>   <!-- 열제목 만듦 -->
    <td>Canine</td> <!-- 열만듦 -->
    <td>Feline</td>
  </tr>
  <tr>
    <th>짖는소리</th>
    <td>Bark</td>
    <td>Meow</td>
  </tr>
  <tr>
    <th>Immature</th>
    <td>Puppy</td>
    <td>Kitten</td>
  </tr>
</table>

• colspan: 열병합
• rowspan: 행병합

Assignment

위와 같은 결과가 나올 수 있도록 표를 구현해주세요.

• border 두께는 모두 동일합니다.
• 첫 행, 첫 열 모두 <th> 를 사용해주세요.
• <th> 를 사용하면 아마 글씨가 두꺼워지고, 가운데 정렬이 될 것입니다. 위의 디자인처럼 왼쪽정렬, 일반 두께로 나올 수 있도록 해주셔야합니다.
• 색깔이 있는 cell에는 회색으로 배경이 칠해질 수 있도록 해주세요.

  html파일

   <table class="assignment-table">
        <tr>
          <th></th>
          <th>1pm</th>
          <th>2pm</th>
          <th>3pm</th>
        </tr>
        <tr>
          <th>Gym</th>
          <td>Dodge ball</td>
          <td>Kick boxing</td>
          <td>Sack racing</td>
        </tr>
        <tr>
          <th>Exercise Room</th>
          <td>Spinning</td>
          <td colspan="2" class="col">Yoga marathon</td>
        </tr>
        <tr>
          <th>Pool</th>
          <td colspan="3" class="col">Water polo</td>
        </tr>
      </table>

  css파일

    .assignment-table th {
    font-weight: normal;
    text-align: left;
    width: 110px;
  }
  .col {
    background-color: lightgray;
  }

<th> 태그 사용시 기본적으로 적용되는 속성들이 있습니다. 위의 그림처럼 구현 하려면 기본 속성들을 바꿔줘야 합니다. 항상 과제에서 요구하는 사진과 같게 나올 수 있도록 코드를 작성해주시기 바랍니다.