테이블 (table) | Minstudio

테이블 (표 만들기)

HTML에서 표(Table)를 만드는 것은 엑셀의 셀(Cell)들을 한 땀 한 땀 코드로 짜맞추는 것과 같습니다.
기본적인 표 작성법부터, 셀들을 합치는 테트리스 같은 병합 기술(colspan, rowspan)까지 웹에서 데이터를 체계적으로 보여주는 가장 확실한 방법입니다.

1. 테이블 기본 태그 구성

태그명	주요 속성	설명
`<table>`	-	표(Table)를 생성하는 최상위 부모 영역입니다.
`<tr>`	-	표의 행(Table Row, 가로줄)을 나타냅니다. 이 안에 한 칸씩 데이터 칸을 집어넣습니다.
`<th>`	-	표의 제목 칸(Table Header)을 의미합니다. (기본적으로 굵은 글씨와 가운데 정렬)
	`colspan`	가로 방향(오른쪽)으로 이웃한 칸들을 하나로 합칠 때 사용합니다.
	`rowspan`	세로 방향(아래쪽)으로 이웃한 칸들을 하나로 합칠 때 사용합니다.
`<td>`	-	표의 일반 데이터 칸(Table Data)을 의미합니다.
	`colspan`	가로 병합 (위 th와 동일)
	`rowspan`	세로 병합 (위 th와 동일)
`<thead> <tbody>`	-	표의 제목(머리글) 영역과 데이터(본문) 영역을 논리적으로 분리해 주는 태그입니다.

2. 표 병합의 원리 (테트리스)

병합 속성은 "자신을 포함해서 오른쪽(col)이나 아래쪽(row)의 칸을 밀어내고 자리를 차지하는 것"입니다.

colspan="2"

일반

가로(우측)로 2칸 잡아먹기

rowspan="2"

일반

세로(아래측)로 2칸 잡아먹기

🔥 레이아웃 주의사항

2000년대 초반에는 이 <table>을 이용해 웹사이트의 화면 분할 레이아웃을 통째로 잡는 방식이 유행했습니다. 하지만 지금은 스마트폰 화면에 맞게 자동으로 움직이는 반응형 웹을 구현하기 불가능하기 때문에 절대 레이아웃 용도로 사용하면 안 됩니다. 오직 순수한 데이터 표(성적표, 시간표, 게시판 등)를 그릴 때만 사용하세요!

태그명

주요 속성

설명

<table>

표(Table)를 생성하는 최상위 부모 영역입니다.

<tr>

표의 행(Table Row, 가로줄)을 나타냅니다. 이 안에 한 칸씩 데이터 칸을 집어넣습니다.

<th>

표의 제목 칸(Table Header)을 의미합니다. (기본적으로 굵은 글씨와 가운데 정렬)

colspan

가로 방향(오른쪽)으로 이웃한 칸들을 하나로 합칠 때 사용합니다.

rowspan

세로 방향(아래쪽)으로 이웃한 칸들을 하나로 합칠 때 사용합니다.

<td>

표의 일반 데이터 칸(Table Data)을 의미합니다.

colspan

가로 병합 (위 th와 동일)

rowspan

세로 병합 (위 th와 동일)

<thead> <tbody>

표의 제목(머리글) 영역과 데이터(본문) 영역을 논리적으로 분리해 주는 태그입니다.