HTML Table 영역 나누기: thead, tbody, tfoot 태그

콘텐츠

HTML Table 태그 영역 나누기

이전 포스팅에서 Table 태그의 기초를 다루어 보았습니다. 이번 포스팅에선 그때 다루지 않았던 thead, tbody, tfoot 태그 를 다뤄볼까 합니다.

이 태그들은 이름에서도 유추가 가능하듯 head(제목)영역과 body(본문)영역을 지정해 주는 역할을 합니다. tfooter는 그 외에 하위 영역을 지정할 수 있어요.

그래서 thead 영역엔 tr, th 태그가 주로 오고 tbody, tfooter 영역엔 tr, td가 주로 오게 됩니다. 이와 관련된 내용은 이전글을 참고해 주세요.

Table 태그 속 thead, tbody , tfoot 태그

* 참고로 이 태그들은 순서대로 작성해 주셔야 됩니다.

<table>
<thead>
  <tr>
    <th>헤더1</th><th>헤더2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>본문1</td><td>본문2</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>푸터1</td><td>푸터2</td>
  </tr>
</tfoot>
</table>

HTML

thead, tbody, tfoot 태그 사용목적

세가지 태그의 사용목적은 말 그대로 표의 영역을 나누는 것이지만, 사실 사용 이전과 이후의 차이를 잘 못느끼실 수 있습니다.

하지만 이런 영역의 나눔은 이후 CSS의 조합 시 영역별로 다른 디자인을 주는 경우에 활용이 가능 합니다.

예를 들자면 표가 인터넷 창보다 길어 졌을 때 원래라면 표 전체가 움직이는 스크롤이 생겨나지만 thead 영역은 고정하고 tbody 부분만 스크롤 할 수 있게 지정할 수 있어요. 예시를 한번 보겠습니다.

tbody 만 스크롤 바 생성하기

<html>
<head>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<table>
<thead>
  <tr>
    <th>헤더1</th><th>헤더2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>본문영역</td><td>본문영역</td>
  </tr>
  <tr>
    <td>본문영역</td><td>본문영역</td>
  </tr>
  ... 여러번 반복
  <tr>
    <td>본문영역</td><td>본문영역</td>
  </tr>
  <tr>
    <td>본문영역</td><td>본문영역</td>
  </tr>
  <tr>
    <td>본문영역</td><td>본문영역</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>푸터1</td><td>푸터2</td>
  </tr>
</tfoot>
</table>
<body>
</html>

HTML

상단의 코드를 적용하면 이렇게 전체 표 요소가 움직이는 스크롤 바가 생성 되었습니다. 근데 만약 다음과 같은 CSS를 적용 한다면 다음과 같이 변합니다.

table tbody{
  display: block;
  height: 200px;
  overflow: auto;
}

CSS

이처럼 tbody에만 CSS를 주어 스크롤 바를 생성해 보았습니다. 응용한다면 각 영역마다 글자 크기, 배경 색 등을 다르게 줄 수 있습니다.

마무리

이처럼 table 태그에 사용할 수 있는 하위 태그들을 알아보았습니다. 사실 이 태그들은 필수 태그는 아닌지라 저도 자주 사용한 태그들은 아닙니다. 하지만, 태그를 적절한 용도로 사용하여 표준을 지켜 HTML을 구성 할 수록 이후 유지보수, CSS 적용에 좀 더 수월 합니다. 다음 번에는 table 태그를 사용할 때 빼놓을 수 없는 rowspan, colspan에 대해 다뤄볼까 합니다.

HTML Table 태그 영역 나누기

Table 태그 속 thead, tbody , tfoot 태그

thead, tbody, tfoot 태그 사용목적

tbody 만 스크롤 바 생성하기

관련 속성

마무리

관련 게시물