[HTML/CSS] 표 만들기

dEpayse

Published in

dEpayse_publication

7 min readOct 30, 2022

이번 포스트에서는 HTML 로 표를 작성하는 방법에 대해 알아보려고 한다. 우선 표를 만들 때 필요한 기본적인 태그들부터, 더 상세하게 다룰 수 있는 태그까지 알아볼 예정이다.

Fig1 은 표 만들기 관련 태그들을 모아놓은 표이다. 이제부터 각 분류별로 태그들을 좀 더 자세히 알아보자.

표 정의하기 및 표 내부 만들기

우선 표를 어떻게 만들 수 있는지 기본적인 태그들부터 알아보자.

<table>

우선 표를 정의하기 위해서는 table 태그를 사용한다. table 태그는 표라는 것을 의미하며, 내부에 tr, th, td 등 다른 태그들로 행 과 셀을 정의할 수 있다.

<!-- table 태그 css 기본값 -->table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

<tr>, <th>, <td>

tr 태그를 통해서 표의 행을 정의할 수 있다. tr 은 table row 의 줄임말이다. 내가 열을 기준으로 표를 정의하고 싶어도 불가능하고, 같은 모양을 떠올려 행을 기준으로 정의해야 한다. tr 태그는 th 태그와 td 태그를 하위 요소로 갖는다.
th 태그는 표 내부의 헤더 셀을 정의한다. th 는 table header cell 의 줄임말이다. 헤더 셀은 표의 각 열의 정보가 담고 있는 정보를 표현한다. th 태그는 반드시 필요한 것은 아니다.
td 태그는 표 내부의 데이터 셀을 정의한다. td 는 table data cell 의 줄임말이다. 말 그대로 표 내부의 데이터를 표현하는 하나의 셀이다.

Ex1. 표 만들기 기본

<!-- tr, th, td 태그 css 기본값 -->tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}td {
  display: table-cell;
  vertical-align: inherit;
}

<th>, <td> 요소의 속성 이용하기

표에 기재된 속성들은 셀을 표현하는 th 요소와 td 요소가 사용할 수 있는 속성이다. rowspan 을 이용하면 해당 셀이 차지하는 행의 개수를 정할 수 있다. colspan 을 이용하면 해당 셀이 차지하는 열의 개수를 정할 수 있다. headers 속성은 해당 셀이 어떤 헤더 셀에 연결되어 있는지 정할 수 있다. 그러나 이 headers 정보는 보통 시각 효과는 없다.

Ex2. rowspan, colspan 예시

표의 설명 또는 제목

<caption>

caption 태그를 통해 표의 설명 혹은 제목을 나타낼 수 있다. caption 태그를 사용할 시 유의할 점은 아래와 같다.

caption 요소는 table 요소의 가장 첫 번째 요소로 와야한다.

Ex3. 표의 설명 혹은 제목

<!-- caption 태그 css 기본값 -->
caption {
  display: table-caption;
  text-align: center;
}

열을 기준으로 스타일 및 서식 지정하기

html 을 위주로 다루고 있는 포스트이지만, 열을 기준으로 스타일과 서식을 지정하고 싶을 때 어떤 태그를 사용해야하는지는 알고 넘어가자.

<colgroup>, <col>

열을 기준으로 스타일을 지정하기 위해 colgroup 태그와 col 태그를 사용한다.

colgroup 태그는 col 태그를 사용하기 위해 col 태그들을 감싸는(col 태그들을 하위 요소로 함) 역할을 한다.
colgroup 은 column group 의 줄임말이다.
colgroup 태그의 위치는 caption 태그 이후, 그리고 thead 태그 이전에 와야한다. (thead 태그는 아래 부분에서 다룬다.)
col 요소는 colgroup의 하위 요소로 한다. coloumn 의 줄임말이다.
col 요소는 span 속성을 이용하면 인접한 여러 개의 열에 한 번에 스타일을 적용할 수 있다.

Ex4. 열 기준으로 스타일 지정하기

<!-- colgroup, col 태그 css 기본값 -->colgroup {
  display: table-column-group;
}col {
  display: table-column;
}

표의 영역을 명시적으로 나누기

html의 thead, tbody, tfoot 태그를 통해 표를 헤더 내용 영역, 본문 내용 영역, 푸터 내용 영역을 명시적으로 표기할 수 있다.

thead, tbody, tfoot 영역 모두 table 의 하위 요소여야 하며, 하나 이상의 tr을 하위 요소로 가져야 한다.

이렇게 명시적으로 나눔으로써 얻을 수 있는 이점은 브라우저가 세 영역을 독립적으로 여겨 사용자가 스크롤할 때의 영역이 구분되거나, 여러 페이지에 걸친 표를 인쇄할 때 각 페이지의 표에 헤더 영역과 푸터 영역의 내용을 인쇄하는 등의 효과를 얻을 수‘도’ 있다.

<thead>

thead 는 table head 의 줄임말로, 표의 헤더 영역을 명시적으로 나타낸다.

thead 는 코드 상으로 caption, colgroup 의 뒤에 와야한다.
thead 는 코드 상으로 tbody, tfoot 혹은 tr 의 앞에 와야 한다.
thead 는 table 요소 당 최대 한 개 존재할 수 있다.

<!-- thead 태그 css 기본값 -->thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

<tbody>

tbody 는 table body 의 줄임말로, 표의 본문 영역을 명시적으로 나타낸다.

tbody 는 코드 상으로 caption, colgroup, thead 의 뒤에 와야한다.
tbody 는 하나의 table 요소 내에 여러 개가 존재할 수 있다.

<!-- tbody 태그 css 기본값 -->tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

<tfoot>

tfoot 은 table foot 의 줄임말로, 표의 푸터 영역을 명시적으로 나타낸다.

tfoot 은 코드 상으로 caption, colgroup, thead, tbody 뒤에 와야 한다.
tfoot 은 table 요소당 최대 한 개 존재할 수 있다.

<!-- tfoot 태그 css 기본값 -->tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

Ex5. 표의 영역을 명시적으로 나누기

References

[W3School] “HTML tutorial” — https://www.w3schools.com/html/default.asp
[W3School] “HTML tags” — https://www.w3schools.com/tags/default.asp
고경희, 2019, HTML + CSS3 웹표준의 정석, 이지스퍼블리싱
[CodeDragon] “테이블(table), …” — https://codedragon.tistory.com/3373