[42-4 HTML] 테이블 구조 익히기, table 열 분리, column 분리

이제까지 배웠던

table html 태그코드로 표(테이블)를 만들어보자.

 

미션1 (4행 1열) 테이블 만들기

- table을 thead, tbody로 나눈다.

- thead에서 th를 정한다. Bold체로 표시된다.

- tbody에서 tr을 3개 나열하고, 그 안에 td를 각각 넣는다.

이 같은 구조는 4행 1열의 구조를 나타낸다.

  <table>
    <h3>🏃 기능</h3>
    <thead>
      <th>skills</th>
      <th>scores</th>
      <th>skills</th>
      <th>scores</th>
    </thead>
    <tbody>
      <tr>
        <td>파이썬문법</td>
        <td>⭐⭐⭐⭐⭐</td>
        <td>Zep(Metaverse)</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>API 활용 데이터 분석</td>
        <td>⭐⭐⭐⭐⭐</td>
        <td>인공지능</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>GUI(turtle, tkinter)</td>
        <td>🥇</td>
        <td>데이터시각화(pandas)</td>
        <td>🥇</td>
      </tr>
    </tbody>
    <tfoot>
    </tfoot>
  </table>

 

 

미션2 (3행 2열) 테이블 만들기

그런데 만약 내가 4행 2열의 구조로 표를 만들고 싶다면 어떻게 해야할까?

바로, 중첩(nesting)의 구조를 사용하면 된다.

<table>
  <tr>
    <td> td1: 여기에 첫 번째 테이블을 넣는다</td>
    <td> td2: 여기에 두 번째 테이블을 넣는다</td>
  </tr>
</table>

 

겉보기에는 혼란스러워보이지만, 

테이블의 구조를 이해하고 있다면 크게 어렵지 않는 코드이다.

  <table>
    <tr>
      <td>
        <table>
          <tr>
            <td>파이썬으로 게임 제작</td>
            <td>🥇</td>
          </tr>
          <tr>
            <td>turtle, tkinter 활용 GUI</td>
            <td>🥇</td>
          </tr>
          <tr>
            <td>pandas 활용한 데이터시각화</td>
            <td>🥇</td>
          </tr>
          </colgroup>
        </table>
      </td>
      <td>
        <table>
          <colgroup>
          <tr>
            <td>파이썬으로 게임 제작</td>
            <td>🥇</td>
          </tr>
          <tr>
            <td>turtle, tkinter 활용 GUI</td>
            <td>🥇</td>
          </tr>
          <tr>
            <td>pandas 활용한 데이터시각화</td>
            <td>🥇</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

 

 

 

미션3 (2행, 2열) 테이블 만들기

  <table>
    <tr>
      <td>
        <table>
          <tr>
            <td>one</td>
          </tr>
          <tr>
            <td>Three</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr>
            <td>Two</td>
          </tr>
          <tr>
            <td>Four</td>
          </tr>
        </table>
      </td>
    </tr>

  </table>​

2행 2열