HTML 기초 공부 - 5. 표 만들기

표(table)는 웹 페이지에서 흔하게 볼 수 있는, 2차원 격자 형태로 구성된 데이터를 의미한다.

표는 다음 그림처럼 행(row), 열(column) 그리고 행과 열이 만나는 셀(cell)로 구성된다.

 

 

HTML에서 표를 어떻게 표시하는지 배워 보자.

 

 

1. table 태그

 

HTML에서 표를 생성할 때는 table 태그를 사용한다.

 

<table></table>

 

 

2. caption 태그

 

HTML에서 표를 생성할 때 웹 접근성을 향상하는 방법의 하나로 표 제목을 지정한다.

표 제목은 caption 태그로 지정하므로 표를 만들 때는 반드시 caption 태그를 사용하여야 한다.

caption 태그는 이후에 배울 표 관련 태그 중에서 table 태그 안에 첫 번째로 작성하여야 하는 태그이다.

 

<table>
    <caption>표 제목</caption>
</table>

 

 

3. tr 태그 (table row)

 

tr 태그는 표에서 행을 생성한다.

tr 태그 하나는 행 하나를 생성하므로 행을 여러개 만들고 싶다면 tr 태그를 여러 번 사용하면 된다.

 

<table>
    <tr></tr>
</table>

 

 

4. th 태그, td 태그

 

th 태그와 td 태그는 표에서 열을 생성할 때 사용한다.

th 태그는 표에서 제목을 나타내는 열을 생성할 때,

td 태그는 표에서 일반적인 데이터를 나타내는 열을 생성할 때 사용한다.

 

<table>
    <tr>
        <th>제목</th>
        <td>내용</td>
    </tr>
</table>

 

다음 그림에서 '번호, 상품명, 수량, 가격'과 같은 열은 제목을 의미하는 데이터이므로 th 태그로 생성하고,

나머지 데이터를 나타내는 열은 td 태그로 생성한다.

 

 

그림과 같은 4(행) x 4(열) 표를 만들려면 table 태그 안에 tr과 th, td 태그를 다음과 같이 작성한다.

 

<table border="1">
    <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
    </tr>
    <tr>
        <td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td>1,000원</td>
    </tr>
    <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
        <td>1,000원</td>
    </tr>
</table>

 

 

5. rowspan 속성과 colspan 속성

 

표 관련 태그에서 행을 의미하는 tr 태그 안에 열을 의미하는 th, td 태그를 사용하면 행과 열이 만나 셀이 생성된다.

이렇게 생성된 셀은 병합할 수 있는데,

행과 행을 병합할 때는 rowspan 속성을, 열과 열을 병합할 때는 colspan 속성을 사용한다.

 

다음과 같은 형태로 표를 만든다고 할 때, rowspan과 colspan의 속성값으로 병합하고 싶은 셀의 개수를 적는다.

단, 병합할 셀의 개수만큼 다음 행 또는 열은 비워야 한다.

 

설명만으로는 이해하기 어려우니 예제 코드를 살펴보자.

 

<table border="1">
    <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
    </tr>
    <tr>
        <td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td rowspan="2">1,000원</td> <!-- 행 병합 -->
    </tr>
    <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
         <!-- 4행 4열은 3행 4열과 병합했으므로 생성하지 않습니다. -->
    </tr>
    <tr>
        <td>총 금액</td>
        <td colspan="3">6,500원</td>
        <!-- 5행 2열부터 열 3개를 병합했으므로 나머지 열은 생성하지 않습니다. -->
    </tr>
</table>

 

예제 코드를 보면 3행 4열에서 4행 4열을 행 병합(rowspan) 하므로 4행 4열은 생성하지 않는다.

마찬가지로 5행 2열부터 4열까지 열 병합(colspan)하므로 5행 3열부터는 생성하지 않는다.

 

 

6. thead, tfoot, tbody 태그

 

표에서도 행을 묶어 그룹화할 수 있는데, thead, tfoot, tbody 태그를 사용하면 된다.

thead 태그는 헤더 영역에 해당하는 행을,

tfoot 태그는 푸터 영역에 해당하는 행을,

tbody 태그는 본문 영역에 해당하는 행을 그룹 짓는다.

 

thead, tfoot, tbody 태그는 표에서 표현하라는 데이터 형식에 따라 사용하지 않을 수도 있다.

하지만 사용한다면 반드시 thead, tfoot, tbody 순서여야 한다.

thead 태그와 tfoot 태그는 한 번만 사용할 수 있고, thead 태그로 그룹화한 행은 th 태그로 열을 생성해야 한다.

 

<table>
    <thead>
        <th>...</th>
    </thead>
    <tfoot>
        <td>...</td>
    </tfoot>
    <tbody>
        <td>...</td>
    </tbody>
</table>

 

예를 들어, 위의 rowspan, colspan 예제 코드를 thead, tfoot, tbody 태그로 그룹 지으면 다음과 같다.

 

<table border="1">
    <thead>
        <tr>
            <th>번호</th>
            (중략)
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>총 금액</td>
            (중략)
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>콜라</td>
            (중략)
        </tr>
        (중략)
    </tbody>
</table>

 

thead, tfoot, tbodt 태그를 사용하는 이유는 우리가 hn 태그를 배울 때와 동일한 이유인

검색 엔진 최적화와 웹 접근성을 향상하기 위해서다.

 

만약 스크린 리더기를 사용해 웹 페이지를 탐색할 때 많은 정보를 나열한 표 데이터가 있다고 보자.

스크린 리더기가 먼저 thead와 tfoot 태그의 정보를 읽게 되면,

지금 접근하는 표가 무슨 데이터를 담고 있는지 표 내용을 모두 읽기 전에 먼저 파악할 수 있다.

 

 

7. col 태그와 colgroup 태그

 

표에서 열을 그룹화할 때는 col 태그와 colgroup 태그를 사용한다.

col 태그는 하나의 열을 그룹화하고,

colgroup 태그는 span 속성과 함께 사용해 2개 이상의 열을 그룹화한다.

 

<col>
<colgroup span="그룹화할 열의 개수">

 

col 태그나 colgroup 태그는 보통 열 전체를 그룹화해서 통일된 스타일을 적용하는 목적으로 많이 사용한다.

caption 태그를 사용했다면 col 태그나 colgroup 태그는 caption 태그 다음에 사용해야 하고,

tr 태그보다는 먼저 작성해야 한다.

또한, col 태그나 colgroup 태그를 사용하면 반드시 두 태그의 개수와 사용한 열 개수가 일치해야 한다.

 

다음 코드는 col 태그와 colgroup 태그로 열을 그룹 지어서

1열의 너비를 80px, 2열과 3열의 너비를 150px, 4열의 너비를 100px로 지정한다.

 

<table border="1">
    <col style="width: 80px;">
    <colgroup span="2" style="width: 150px;"></colgroup>
    <col style="width:100px">
    <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
    </tr>
    (중략)
<table>