Table

⬆️ 테이블의 마크업 구조도

1. 테이블 기본 틀 잡기

<table> 태그로 테이블을 생성하고 내부 요소를 채워준다.
table 태그는 컨테이너 요소로 내부에는 제목(caption)과 행(tr), 열(row) 그리고 셀(td)와 셀의 제목(th)으로 이루어져있다.
1. 제일먼저 테이블을 생성하고 안에 제목을 지정해준다.

    <table>
      <caption>테이블 제목</caption>
    </table>

<caption>은 테이블 제목이나 설명을 의미하며, table요소의 첫번째 자식으로 사용한다.

2. 두번째로 테이블안에 행(tr)을 차곡차곡 쌓아준다.

    <table>
      <caption>테이블 제목</caption>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </table>

테이블은 가로로 작성되게끔 약속되어있다. tr로 행의 갯수대로 차곡차곡 쌓아주자. 블록을 쌓는다고 생각하면 쉽다.

3. 행(tr)안에 열(td)의 값을 넣어준다.

    <table>
        <tr>
            <td>1,1</td>
            <td>1,2</td>
            <td>1,3</td>
        </tr>
        <tr>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
        </tr>
        <tr>
            <td>3,1</td>
            <td>3,2</td>
            <td>3,3</td>
        </tr>
        <tr>
            <td>4,1</td>
            <td>4,2</td>
            <td>4,3</td>
        </tr>
    </table>

여기서 주의할 점은 tr의 한 뭉텅이는 가로! 행 부분임을 꼭 기억하자!
그렇다면 첫번째 tr로 묶여있는 td들 안에 들어가야 할 내용은 첫번째 행의 값들이다.위에서 부터 차곡차곡 첫번째 행의 첫번째값, 두번째값, 세번째 값을 적어나가는걸 반복하면된다.
괄호속에 적힌 숫자는 (행,열) 이라고 생각하고 그에 해당하는 값을 작성하기!

4. 셀의 제목(th)입력하기

    <table>
        <tr>
            <th>1,1</th>
            <th>1,2</th>
            <th>1,3</th>
        </tr>
        <tr>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
        </tr>
        <tr>
            <td>3,1</td>
            <td>3,2</td>
            <td>3,3</td>
        </tr>
        <tr>
            <td>4,1</td>
            <td>4,2</td>
            <td>4,3</td>
        </tr>
    </table>

맨 첫번째 행을 셀의 제목이라 했을 때 제목인 부분은 th태그로 변경한다.
설명을 위해 아래 순서로 내렸으나, 3번에서 열을 입력할때 바로 작성해도 무방하다

여기까지 왔다면, 테이블이 정상적으로 완성되었을 것이다.

이해를 돕기위해 테이블 생성 과정을 시각화한 자료입니다.

2. 테이블의 세부적인 요소

그럼 여기서, 테이블을 스타일링도 하고 더욱 세부적으로 작성하기위해서 어떻게 해야할까?

<thead>, <tbody>, <tfoot>

body를 크게 나눌때 header, main, foot로 나누는 것과 같다고 생각하면 이해하기 쉽다.
셀의 제목부분을 thead, 본내용을 tbody, 합계와 같이 결과를 나타내는 하단부분을 tfoot이라고 지정해주면된다.
- 예제와 같이 간단한 테이블에서는 굳이 사용하지 않는다.
- 레이아웃에 영향을 주지 않으며 css로 스타일링이 가능하다
- tfoot은 무조건 테이블 하단에 위치한다.

셀 병합 : colspan, rowspan

• colspan
  colspan 속성을 사용하면 열간 병합을 할 수 있다.
  열과 열이 병합되어 가로로 길어진다
• rowspan
  rowspan 속성을 사용하면 행간 병합을 할 수 있다.
  행과 행이 병합되어 세로로 길어진다.
  아래 코드참고

  <table>
  <caption> 이달의 책 판매량 </caption>
  <tr>
      <th>구분</th>
      <th colspan="2">이름</th>
      <!-- <th>판매량</th> -->
  </tr>
  <tr>
      <td>1</td>
      <td>해리포터</td>
      <td rowspan="2">100</td>
  </tr>
  <tr>
      <td>1</td>
      <td>해리포터2</td>
      <!-- <td>100</td> -->
  </tr>
  </table>

<colgroup>,<col>

열에 공통적인 스타일을 줄 때 사용한다.

<colgroup>
	<col class="구분" />
	<col class="이름" />
	<col class="판매량" />
</colgroup>

<scop>

th요소에 scop요소를 사용해 td와의 연결 관계를 설정할 수 있다
( 열로 연결되어있는지, 행으로 연결되어있는지 )

<tr>
  <th></th>
  <th scope="col">월요일</th>
  <th scope="col">화요일</th>
  <th scope="col">수요일</th>
  <th scope="col">목요일</th>
  <th scope="col">금요일</th>
  <th scope="col">토요일</th>
</tr>  

달력으로 생각해봤을때 월요일~일요일 의 th들은 열의 제목이다 라는 의미이다.

위에서 배운 내용을 토대로 카타르 월드컵 본선 조추첨 결과표를 만들어 보았다.
css를 조금 입혀보았으나, table에 css 적용하는것이 살짝 어려워 세부적인 css는 적용하지못했다. 아직 html부분만 배웠기에 table에 css 적용하기는 차차 배워나가는걸로!!

https://heejin-k.github.io/code_lion/html/0405/worldcup.html