5살에게 가르치는 안헷갈리는 HTML table

목차

intro- table을 만들기 전에..

1. tabel을 만드는 핵심 요소들 - 다른건 몰라도 이건 있어야 해 

2.1 Table을 Semantic하게 만드는 요소  1

 2.2 Table을 Semantic하게 만드는 요소  2

   2.3 Table을 Semantic하게 만드는 요소  3

3. 헷갈리는 표 병합. 이것만 생각하자

4. 열 그룹을 묶기 위해 존재하는 <colgroup>태그

5. 이 밖의 이런저런 팁들

---

table을 만들기 전에...

 

<table>은 표가 들어갈 '컨테이너'요소다. 

그렇기 때문에 당신이 일단 표를 만들기로 마음을 먹었다면

1. table태그를 열고,
2. 테이블을 만드는 여러 자식요소들을 담아주고,
3. table을 닫아주면 된다.

 

일단 table을 열고 시작하자.

 

다른거 보지 말고 'table이라는 하나의 컨테이너가 모든것을 포함하고 있는것'만 확인하자.

---

1. tabel을 만드는 핵심 요소들 - 다른건 몰라도 이건 있어야 해 

 

<caption>

 

<caption>은 이 표가 어떤 표인지 나타내주는 제목이라고 생각하면 쉽다. 위의 그림에서는 '2월 판매 기록'이다.

그렇기 때문에 <table>요소의 첫 번 째 자식으로 사용한다.

그리 어렵지 않다.

 

<tr>,<td> - 테이블을 만드는 가장 핵심적인 태그

 

자, <table> 안에 <caption>까지 넣어줬다면 이제 본격적으로 표를 만들어야겠지?

지금은 <tr>, <td> 딱 두 태그만 이용해서 가장 기초적이며 핵심을 이해해보겠다.

(tr = table row, td= table data 의 약자)

 

table이 헷갈리는 이유

테이블의 특징 중 하나는 그 안의 데이터값을 넣을 때 기본적으로 row(행)으로 작성해야 한다는 거다.
바로 이 점이 테이블을 처음 배울 때 헷갈리는 점인데, 일단 왜 헷갈리는지 이해를 하고 접근하면 그리 어렵지 않다.

 

 

자, 우리가 이런 형태의 표를 만든다고 생각해보자.

그리고 Group A 밑에 있는 데이터를 작성한다고 생각해보자.

인간의 사고방식으로는 Group A 밑으로 

카타르, 에콰도르, 세네갈, 네덜란드 순서로 적는게 자연스럽다.

 

하지만 table에서는 다르다. 

앞서 말했듯이 기본적으로 row(행)으로 작성을 하기 때문에,

 

HTML에서는 

카타르 다음 같은 행에 위치한 잉글랜드 아르헨티나 프랑스 - 순서로 작성해줘야 한다.

 

그래서 HTML에서 table을 작성할 때는 머릿속에서 계속해서 왼쪽에서 오른쪽으로 데이터를 넣어주는 상상을 해야한다!

 

 

다시 돌아오면,

기본적으로 <tr>태그를 사용해 1행을 열어 준 다음

1행의 각 열마다 들어갈 각각의 <td>를  넣어주고, 행이 끝났다는 </tr> 로 닫아준다.

<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>

 

 

HTML에서는 수직으로 작성하면서도 계속 머릿속에서는 왼쪽에서 오른쪽으로... 라고 상상하자.

마치 이렇게...

<tr>
 <td></td> <td></td> <td></td>
</tr>

 

종합

그럼 지금까지 배운 caption, tr, td를 종합해보았을 때, 위와 같은 표를 만들기 위해 이렇게 마크업 해볼 수 있다.

<table>
      <caption>
        2022 카타르 월드컵
        <p>본선 조추첨 결과</p>
      </caption>

      <tr>
        <td>GroupA</td>
        <td>GroupB</td>
        <td>GroupC</td>
        <td>GroupD</td>
      </tr>
      <tr>
        <td>카타르</td>
        <td>잉글랜드</td>
        <td>아르헨티나</td>
        <td>프랑스</td>
      </tr>
      <tr>
        <td>에콰도르</td>
        <td>이란</td>
        <td>사우디아라비아</td>
        <td>대륙PO-1</td>
      </tr>
      <tr>
        <td>세네갈</td>
        <td>미국</td>
        <td>멕시코</td>
        <td>덴마크</td>
      </tr>
      <tr>
        <td>네덜란드</td>
        <td>유럽PO</td>
        <td>폴란드</td>
        <td>튀니지</td>
      </tr>
      
</table>

 

브라우저에서 이렇게 보여진다.

자 여기까지 잘 왔다.

사실 이게 table의 핵심이다. 표에 선을 추가하거나 예쁘게 꾸미는 것은 CSS의 역할로 넘겨두자.

 

테이블 만들기 끝! 쉽죠?

 

---

2.1 Table을 Semantic하게 만드는 요소  1

 

참 쉽지만, 우리는 이제 조금 더 욕심이 난다.

HTML에서 가장 중요한 것 중에 하나가 Semantic. 즉 목적에 맞는 '의미'를 부여해주는 것이기 때문이다.

 

그럼 여기서 우리는 더 Semantic한 table을 만들기 위해 무엇을 해줄 수 있을까? 

 

 

 <th> = table head

앞서 표를 살펴보면, Group A부터 D까지는

그 밑에 들어가는 모든 나라이름들과는 속성이 좀 다르다.

Group은 각각 데이터들의 '제목', '머리'가 되어주는 부분이기 때문이다.

이 데이터들은 <td> 대신 <th>를 사용해줌으로써, 제목이 되는 부분이라는 의미를 부여해줄 수 있다.

 

 

Group A~D에 <td> 대신 <th>를 사용해서 코드를 작성해보자.

<table>
     <caption>
        2022 카타르 월드컵
        <p>본선 조추첨 결과</p>
     </caption>
     <tr>
        <th>GroupA</th>
        <th>GroupB</th>
        <th>GroupC</th>
        <th>GroupD</th>
      </tr>
      <tr>
        <td>카타르</td>
        <td>잉글랜드</td>
        <td>아르헨티나</td>
        <td>프랑스</td>
      </tr>
      <tr>
        <td>에콰도르</td>
        <td>이란</td>
        <td>사우디아라비아</td>
        <td>대륙PO-1</td>
      </tr>
      <tr>
        <td>세네갈</td>
        <td>미국</td>
        <td>멕시코</td>
        <td>덴마크</td>
      </tr>
      <tr>
        <td>네덜란드</td>
        <td>유럽PO</td>
        <td>폴란드</td>
        <td>튀니지</td>
      </tr>
      
</table>

 

Group 행이 굵은글씨 처리 된 것을 확인할 수 있다.

---

2.2 Table을 Semantic하게 만드는 요소  2

 

<scope>

 

<scope>태그를 통해 <th>요소가 어느 방향으로 연결되어있는 건지도 설정해줄 수 있다.

쉽게 예를 들어, Group A는 열 방향으로 위치한 데이터들의 제목이기 때문에,

GroupA를 감싸고 있는 th태그의 속성으로 scope="col" (column의 약자)를 넣어주면 된다.

행 방향이라면 scope="row"를 넣어주면 된다.

 

      <tr>
        <th scope="col">GroupA</th>
        <th scope="col">GroupB</th>
        <th scope="col">GroupC</th>
        <th scope="col">GroupD</th>
      </tr>

 

이제 브라우저는 확실하게 'GroupA가 수직정렬되있는 데이터들의 대장이구나'라고 인식하게 된다.

 

---

2.3 Table을 Semantic하게 만드는 요소  3

 

<thead>, <tbody>, <tfoot>

 

 

<thead>, <tbody>, <tfoot>는 각각 table head, table body, table foot을 의미한다.

테이블이 내용이 많을 때 머리글, 본문, 바닥글로 구역을 묶어줄 수 있다.

 

   <table>
      <thead>
        <tr>
          <th>구분</th>
          <th>이름</th>
          <th>판매량</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>해리포터</td>
          <td>100</td>
        </tr>
        <tr>
          <td>2</td>
          <td>헝거게임</td>
          <td>200</td>
        </tr>
        <tr>
          <td>3</td>
          <td>반지의제왕</td>
          <td>300</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">총 판매량</td>
          <td>600</td>
        </tr>
      </tfoot>
    </table>

보기쉽기 위해 테두리를 추가함.

• 보통 테이블이 예시와 같이 간단할 때는 굳이 쓰지 않는다.
• 이 요소들은 테이블의 레이아웃에 영향을 미치지 않는다. 하지만 css를 사용하여 스타일링 할 수 있다.
• tfoot는 table태그 안 어디에 위치해있던지 브라우저 상에서는 표의 가장 하단에 위치하게 된다.

---

3. 헷갈리는 표 병합. 이것만 생각하자

 

<td> 또는 <th> 태그 요소에 colspan 또는 rowspan 속성을 사용하면 셀간 병합이 가능한데,

colspan은 '열간' 병합을 사용할 때 사용하고 rowspan은 '행간' 병합을 할 때 사용한다. 

 

• 이 때 각 속성 뒤에 몇 개의 셀을 병합하고 싶은지 지정해줘야 하고,
• 병합되는 셀은 (당연히) 지워줘야 한다.

 

예제를 보기 전에...

처음에 colspan을 '가로병합' 그리고 rowspan을 '세로병합' 이렇게 외우면 두 개의 이름이 반대되는 속성이라 두뇌가 고장난다. 
그래서 그렇게 외우지 말자.

대신에 아래와 같이 생각해보자. 

colspan을 쓸 때는 col을 뒤에 붙는 숫자만큼 외쳐주자. col과 col을 병합하자! (열과 열을 병합하자!)
rowspan을 쓸 때는 row를 뒤에 붙는 숫자만큼 외쳐주자. row과 row를 병합하자! (행과 행을 병합하자!)

col과 col을 병합하면 열과 열이 병합되니까 = 자연스레 가로로 두 칸이 병합되는게 그려지고,
row와 row를 병합하면 행과 행이 병합되니까 = 자연스레 세로로 두 칸이 병합되는게 그려진다.

 

colspan의 예를 살펴보자.

아래 총 판매량의 코드만 보자.

        <tr>
          <td colspan="2">총 판매량</td>
          <!-- <td></td> -->
          <td>600</td>
        </tr>

col과 col을 병합하자! (열과 열을 병합하자!)

첫번째td 에서 2개의 col을 병합하라고 지시했고 중간의 열은 삭제했기 때문에,

'총 판매량' 그리고 '600'이라는 두 개의 열만 남았다

 

 

그렇다면 rowspan은 어떻게 할까?

 

100이라고 쓰여있는 셀 주목

      <tr>
        <td>1</td>
        <td>해리포터</td>
        <td rowspan="2">100</td>
      </tr>
      <tr>
        <td>1</td>
        <td>해리포터2</td>
        <!-- <td>100</td> -->
      </tr>

row와 row를 병합하자! (행과 행을 병합하자!)

해리포터 열 오른쪽에 있던 셀에 rowspan="2"를 주고,

해리포터2 열 오른쪽에 있던 셀은 삭제를 해주면 두 행이 병합된 것을 볼 수 있다.

 

 

---

4. 열 그룹을 묶기 위해 존재하는 <colgroup>태그

 

이 태그는 열을 그룹으로 묶어 CSS적으로 스타일링을 주기 위해 사용한다.

 

예를 들어, 아래 사진에서 그룹 A열을 하나로 묶고, 그룹 B,C,D를 하나로 묶어 색깔을 넣고 싶다고 생각해보자.

 

 

일단 <table>태그 안에 <colgroup></colgroup> 태그를 자식요소로 넣어주고, 

그 안에 <col span="왼쪽부터 묶고싶은 열의 개수"> 를 넣어주면 된다.

      <colgroup>
        <col span="1"/>
        <col span="3"/>
      </colgroup>

 

CSS를 통해서 색깔을 넣어주면,

짠

1열이 한 그룹, 2,3,4열이 한 그룹으로 잘 묶여있는 것을 볼 수 있다.

 

 

---

5. 이 밖의 이런저런 팁들

 

 

• table의 크기는 안에 들어있는 자식요소의 크기만큼이다. 
• 열의 넓이를 조절할 땐 col을 사용하자.
• Table을 Semantic하게 만드는 요소인 scope, thead, tbody, tfoot은 디자인 레이아웃에 변화를 주지 않는다.
• 테이블 안에 직계자식으로 tr th td 이외에는 넣지 마라! 후손자로는 이미지든 p든 넣어도 상관없음.