[HTML] HTML 문서에 표 만들기 - 테이블

HTML 문서에 표 만들기 - 테이블

 

자료를 단순히 나열하는 1차원 데이터의 경우 리스트를 사용할 수 있지만
행과 열을 나누어 데이터를 효율적으로 표시하기 위해서는 표를 사용하는 편이 더 좋습니다.

HTML은 다량의 데이터를 체계적이고 효율적으로 표시하기 위해 <table> 태그를 제공합니다.

또한 <table> 태그와 관련되어 여러 가지 다양한 성격을 가진 하위 태그들이 존재하는데 한번 가볍게 훑어보겠습니다.😊

 

 

테이블을 표현하는 기본적인 방법

 

<table> 태그의 하위 태그로서 가장 대표적이고 보편적으로 쓰이는 <tr> 태그와 <th>, <td> 태그가 있습니다.
<tr> 태그는 Table row, 즉 하나의 행을 표시합니다. <th>, <td> 태그는 Table head와 Table data로서 각 행의 열을 담당합니다.

사용 예시를 들어보겠습니다. 🙂

---

순번	제목	장르
1	종이여자	로맨스
2	내일	로맨스 스릴러

<table style="border: 1px solid; width: 50%;">
    <tr>
        <th style="border: 1px solid;">순번</th>
        <th style="border: 1px solid;">제목</td>
        <th style="border: 1px solid;">장르</td>
    </tr>
    <tr>
        <th style="border: 1px solid;">1</th>
        <td style="border: 1px solid;">종이여자</td>
        <td style="border: 1px solid;">로맨스</td>
    </tr>
    <tr>
        <th style="border: 1px solid;">2</th>
        <td style="border: 1px solid;">내일</td>
        <td style="border: 1px solid;">로맨스 스릴러</td>
    </tr>
</table>

---

아무 CSS도 입히지 않아서 조금 밋밋하지만 그래도 표 같은 것이 생겼습니다.
이게 HTML이 제공하는 table의 기본 형태입니다.
(티스토리 자체 스킨 때문인가 테두리가 표시되지 않아서 임의로 테두리만 입혔습니다.)

 

 

테이블을 영역 별로 세분화하자

 

엑셀이나 SQL 쿼리 조회 결과 등을 표시하는 테이블은 크게 속성, 값, 합계 등으로 나눌 수 있습니다.
예를 들면 아래 테이블에서는 데이터를 영역에 따라 이렇게 구분하고 있습니다.

 

• 첫 번째 행 : 데이터의 속성을 표시
• 중간 부분 : 속성에 따른 실질적인 값 표시
• 마지막 행 : 데이터의 총계를 표시.

품목 (단가)	판매량	재고량	매출액
사과 (1000원)	10개	40개	10000원
참외 (2000원)	15개	35개	30000원
합계	25개	75개	40000원

 

이렇게 데이터의 영역을 세분화하고 다른 객체로 취급하기 위해 <thead>, <tbody>, <tfoot> 태그를 사용할 수 있습니다.
이번에는 테이블을 영역에 따라 나누고 각각 다른 CSS를 입혀보겠습니다.

---

순번	제목	장르
1	종이여자	로맨스
2	내일	로맨스 스릴러

<table>
    <thead style="background:#f5d376">
        <tr>
            <th>순번</th>
            <td>제목</td>
            <td>장르</td>
        </tr>
    </thead>
    
    <tbody style="background:#75b1f0">
         <tr>
            <th>1</th>
            <td>종이여자</td>
            <td>로맨스</td>
        </tr>
    </tbody>
    
    <tfoot style="background:#ff9580">
        <tr>
            <th>2</th>
            <td>내일</td>
            <td>로맨스 스릴러</td>
        </tr>
    </tfoot>
</table>

---

이해를 돕기 위해 색을 입혔습니다.
실제로는 각각 다른 Script 적용 등 더욱 복잡한 역할 분담을 위해 테이블을 세분화하기도 합니다.

 

<th>도 Table head고 <thead>도 Table head 인가요?

• <th> : 각 행 단위에서 데이터를 강조하는 역할.
• <thead> : 하나의 테이블 단위에서 테이블을 영역 별로 나눌 때 사용.

 

헷갈리신다면 태그의 글자수를 한 세트로 외워보시길 바랍니다.

• <tr>, <th>, <td> : 두 글자 한 세트
• <thead>, <tbody>, <tfoot> : 다섯 글자 한 세트

 

테이블을 컬럼 별로 구분하기

 

<colgroup> 태그와 그 하위 태그인 <col> 태그를 활용한다면 테이블을 각 컬럼 별로도 구분할 수 있습니다.

예시를 들어보도록 하겠습니다.

---

순번	제목	장르
1	종이여자	로맨스
2	내일	로맨스 스릴러

<table style="border: 1px solid; width: 50%;">
    <colgroup>
        <col style="background:#ff9580; width:20%"/>
        <col style="background:#75b1f0; width:45%"/>
        <col style="background:#f5d376; width:35%"/>
    </colgroup>
    <tr>
        <th>순번</th>
        <th>제목</td>
        <th>장르</td>
    </tr>
    <tr>
        <th>1</th>
        <td>종이여자</td>
        <td>로맨스</td>
    </tr>
    <tr>
        <th>2</th>
        <td>내일</td>
        <td>로맨스 스릴러</td>
    </tr>
</table>

---

컬럼 별로 다른 색상과 너비를 가지도록 CSS를 입혀보았습니다.

이 <colgroup> 태그는 다소 생소할 수 있지만 실제로 굉장히 유용하기도 하고 자주 사용 되는 태그입니다.

 

 

테이블에 제목 달기

 

테이블을 간단히 설명하는 태그인 <caption> 태그는 어렵지 않아서 짧게 짚고 넘어가겠습니다.

---

최애 소설 두개만 뽑아봤어요

순번	제목	장르
1	종이여자	로맨스
2	내일	로맨스 스릴러

<table style="border: 1px solid; width: 50%;">
    <caption>최애 소설 두개만 뽑아봤어요</caption>
    <colgroup>
        <col style="background:#f5d376"/>
        <col style="background:#75b1f0"/>
        <col style="background:#ff9580"/>
    </colgroup>
    <thead style="background:#f5d376">
        <tr>
            <th>순번</th>
            <th>제목</th>
            <th>장르</th>
        </tr>
    </thead>
    
    <tbody>
         <tr>
            <th>1</th>
            <td>종이여자</td>
            <td>로맨스</td>
        </tr>
    </tbody>
    
    <tfoot>
        <tr>
            <th>2</th>
            <td>내일</td>
            <td>로맨스 스릴러</td>
        </tr>
    </tfoot>
</table>

---

 

 

조금 더 복잡한 테이블 구성하기

 

이번에는 HTML 테이블 꾸미기, 테꾸의 꽃, 일명 셀 병합(span)과 이너 테이블(Inner table)에 대해 알아보겠습니다.

 

 

셀 병합(span)

 

행 병합은 colspan 속성을 통해서 이루어집니다.

예시를 통해 행을 병합하는 방법을 먼저 알아보도록 하겠습니다.

---

셀	병	합
셀	병합
셀병		합
셀병합

<table style="border: 1px solid; width: 50%;">
    <thead style="background:#f5d376">
        <tr>
            <th>셀</th>
            <th>병</th>
            <th>합</th>
        </tr>
    </thead>
    
    <tbody style="background:#75b1f0">
         <tr>
            <th>셀</th>
            <td colspan="2">병합</td>
        </tr>
         <tr>
            <th colspan="2">셀병</th>
            <td>합</td>
        </tr>
    </tbody>
    
    <tfoot style="background:#ff9580">
        <tr>
            <th colspan="3">셀병합</th>
        </tr>
    </tfoot>
</table>

---

 

열 병합은 rowspan 속성을 통해 이루어집니다.
열 병합은 테이블 셀을 위아래로 병합합니다. 

---

열	열	열병	열병합
병	병합
합		합

<table style="border: 1px solid; width: 50%; table-layout: fixed;">
    <colgroup>
        <col style="background:#ff9580;"/>
        <col style="background:#75b1f0;"/>
        <col style="background:#f5d376;"/>
        <col style="background:#92fcc9;"/>
    </colgroup>
    <tr>
        <td>열</td>                 <!-- 첫번 째 컬럼입니다. -->
        <td>열</td>                 <!-- 두번 째 컬럼입니다. -->
        <td rowspan="2">열병</td>   <!-- 세번 째 컬럼입니다. -->
        <td rowspan="3">열병합</td> <!-- 네번 째 컬럼입니다. -->
    </tr>
    <tr>
        <td>병</td>                 <!-- 첫번 째 컬럼입니다. -->
        <td rowspan="2">병합</td>   <!-- 두번 째 컬럼입니다. -->
                                    <!-- 세번 째 컬럼은 병합되었습니다. -->
                                    <!-- 네번 째 컬럼은 병합되었습니다. -->
    </tr>
    <tr>
        <td>합</td>                 <!-- 첫번 째 컬럼입니다. -->
                                    <!-- 두번 째 컬럼은 병합되었습니다. -->
        <td>합</td>                 <!-- 세번 째 컬럼입니다. -->
                                    <!-- 네번 째 컬럼은 병합되었습니다. -->
    </tr>
</table>

---

저는 rowspan이용해서 테이블 구성할 때 많이 힘들었던 것으로 기억합니다...
테이블 열 병합 부분은 많이 헷갈리기 때문에 실제로 연습을 충분히 해보시길 권합니다.

 

 

이너 테이블(Inner table)

 

이너 테이블은 사실 제가 임의대로 붙여본 명칭인데 테이블 내부에 또 다른 테이블을 삽입하는 것을 의미합니다.
이 부분은 생각보다 어렵지 않으니 천천히 훑어보시면 좋겠습니다.

아래는 예시 코드입니다.

---

바깥 쪽 테이블입니다.
익셉션	보신 적	있나요
익셉션	보신 적	없나요?
안 쪽 테이블입니다. 익셉션 보신 적 있나요 익셉션 보신 적 없나요?

<table style="border: 1px solid; width: 50%;">
    <thead style="background:#f5d376">
        <tr>
            <th colspan="3">바깥 쪽 테이블입니다.</th>
        </tr>
    </thead>
    
    <tbody style="background:#75b1f0">
         <tr>
            <td>익셉션</td>
            <td>보신 적</td>
            <td>있나요</td>
        </tr>
        <tr>
            <td>익셉션</td>
            <td>보신 적</td>
            <td>없나요?</td>
        </tr>
    </tbody>
    
    <tfoot style="background:#ff9580">
        <tr>
            <td colspan="3">
                <!-- 이너 테이블 시작 -->
                <table style="border: 1px solid; width: 100%;">
                    <thead style="background:white;">
                        <tr>
                            <th colspan="3">안 쪽 테이블입니다.</th>
                        </tr>
                    </thead>
                    
                    <tbody style="background:gray; color:white;">
                        <tr>
                            <td>익셉션</td>
                            <td>보신 적</td>
                            <td>있나요</td>
                        </tr>
                    </tbody>
                    
                    <tfoot style="background:black; color:white;">
                        <tr>
                            <td>익셉션</td>
                            <td>보신 적</td>
                            <td>없나요?</td>
                        </tr>
                    </tfoot>
                </table>
                <!-- 이너 테이블 종료 -->
            </td>
        </tr>
    </tfoot>
</table>

---

<tfoot> 태그 내부에 행 세 개를 병합시킨 뒤 새로운 테이블을 생성했습니다.

바깥쪽 테이블과 다른 스타일을 적용하거나 표가 많은 보고서 등을 작성할 때 유용하게 사용되기도 하니 알아 두시면 좋을 것 같습니다.

 

오늘 내용은 길기도 하고 조금 헷갈리는 부분도 많은 것 같습니다.
그래도 누군가에게는 꼭 도움이 되었으면 좋겠습니다.

 

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂

 

* 참고 : http://www.tcpschool.com/