테이블 (표 만들기)

엑셀(Excel) 프로그램처럼 데이터를 행(가로줄)과 열(세로칸)로 구성된 2차원 격자 형태로 깔끔하게 정리해서 보여줄 때 사용합니다. 태그 종류가 많아 복잡해 보이지만 규칙만 알면 레고 조립처럼 간단합니다.

📊 테이블(Table) 구조 입체 해부도

<thead> 영역
<tbody> 영역
<tr>
<th> 이름
<th> 나이
<tr>
<td> 홍길동
<td> 25
<tr>
<td> 김철수
<td> 30

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

🧱 표 병합의 원리 (테트리스)

colspan="2"

일반

가로로 2칸 잡아먹기

rowspan="2"

일반

세로로 2칸 잡아먹기

🔥 주의사항

2000년대 초반에는 이 <table>을 이용해 웹사이트의 레이아웃(메뉴는 왼쪽 칸, 본문은 오른쪽 칸 등)을 통째로 잡았습니다. 하지만 지금은 스마트폰 화면에 맞게 움직이는 반응형 웹을 구현하기 불가능하기 때문에 절대 레이아웃 용도로 사용하면 안 됩니다. 오직 순수한 데이터 표를 그릴 때만 사용하세요!