[HTML] 테이블 만들기 - (tr, td, th, thead, tbody, colspan, rowspan)

HTML로 테이블 기본 구조 만들기

테이블의 기본 요소

테이블은 행과 열로 구성된 구조화된 데이터 집합이다. 테이블을 사용하여 다양한 데이터를 한눈에 보기 쉽게 정리하고, 관련된 정보를 빠르게 찾을 수 있다. 테이블은 표형식의 데이터에 사용해야 하며, 웹 페이지 레이아웃을 목적으로 사용하는 것은 좋지 않다!

<table>: 테이블의 전체 구조

<table>태그는 표를 만들어주는 HTML 태그이다. 기본적으로 표를 만들기 위해서는 가장 바깥에 <table></table> 태그를 작성하고 그 안에 tr, td, th 태그를 넣어서 만들어야 한다.

태그	비고
<table>	테이블을 만드는 태그
<th>	테이블의 헤더부분 셀
<tr>	테이블의 행을 만드는 태그
<td>	테이블의 열을 만드는 태그

 

<td>: 테이블 데이터 셀

td는 테이블 데이터 셀 또는 테이블 데이터를 줄인 말로 테이블 안의 가장 작은 컨테이너이다.

<tr>: 행(row)의 정의

tr은 table row를 줄인 말로, 표 안에 있는 셀들(td)이 모인 행을 말한다.

<th>: 테이블 헤더 셀

th요소는 행이나 열의 시작 부분에 위치하며 해당 행이나 열에 포함된 데이터 유형을 정의하는 특수 셀이다.

 

테이블 섹션 추가하기

시맨틱 마크업을 작성하고, 이해하기 쉬운 표를 만들기 위해서 표에 섹션을 추가할 수 있다.

<thead>와 <tbody>, <tfoot> 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만, 이 요소들의 스타일을 CSS를 사용하여 변경할 수 있으며, 이 요소들은 테이블의 각 영역을 명시하기 위해 사용된다.

 

<thead>와 <tbody>, <tfoot>을 나눔으로써 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있다.

<thead>: 테이블 헤더 영역

<thead 태그는 HTML 테이블에서 헤더 콘텐츠들을 하나의 그룹으로 묶을 때 사용한다. 이 때, 하나 이상의<tr> 요소를 포함하고 있어야 한다.

<tbody>: 테이블 본문 데이터

<tbody> 태그는 HTML 테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용하는 태그이다. 이 때 <tbody> 요소는 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 한다.

<tfoot>: 테이블 푸터 영역

<tfoot> 태그는 HTML 테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용한다. 이 때, <tfoot> 요소는 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 한다.

---

테이블 병합: 셀 합치기

<td> 태그의 colspan 속성: 열 합치기

<td> 태그의 colspan 속성을 사용해 해당 데이터 셀(data cell)이 확장될 열(column) 의 개수를 명시할 수 있다.

문법

<td colspan="합칠 가로셀 개수">

<td> 태그의 rowspan 속성: 행 합치기

<td> 태그의 rowspan 속성을 사용해 해당 데이터 셀(data cell)이 확장될 행(row) 의 개수를 명시할 수 있다.

문법

<td rowspan="숫자">