반응형
Web Development · HTML Table
HTML 테이블 기초 —
table · tr · th · td 완전 정리
표를 만드는 4가지 핵심 태그와 인라인 CSS로 테두리 그리기
시작 오늘 분석할 코드
HTML로 가장 단순한 표를 만드는 코드다. 테이블의 핵심 태그 4개(table, tr, th, td)와 CSS로 테두리·여백을 주는 방법이 모두 들어 있다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>표 만들기</title> <style> table, th, td { border: 1px solid #ccc; } td { padding: 5px; } </style> </head> <body> <table> <tr> <th>제목 셀</th> <td>1행 2열</td> <td>1행 3열</td> </tr> <tr> <th>제목 셀</th> <td>2행 2열</td> <td>2행 3열</td> </tr> </table> </body> </html>
실제 출력 결과
| 제목 셀 | 1행 2열 | 1행 3열 |
|---|---|---|
| 제목 셀 | 2행 2열 | 2행 3열 |
용어 용어 정리
table표 전체를 감싸는 컨테이너
trTable Row — 가로 한 줄(행)
thTable Header — 제목 셀(자동 굵게+가운데)
tdTable Data — 일반 데이터 셀
border테두리 두께·종류·색 지정
padding셀 안쪽 여백 (테두리 ↔ 내용 간격)
stylehead 안에서 CSS 작성하는 태그
태그 셀렉터CSS에서 태그 이름으로 선택
1 <table> — 표의 시작
table 태그는 어떤 역할인가?
<table>은 표를 만들겠다는 선언이다. 이 태그 안에 들어가는 모든 행과 셀이 격자 형태로 정렬된다. 닫는 태그 </table>까지가 표 하나의 영역이다.
엑셀의 시트 한 장 = 하나의
그 안의 행이
<table>그 안의 행이
<tr>, 각 칸이 <th> 또는 <td>2 <tr> — 가로 한 줄
tr은 무엇을 의미하는가?
<tr>은 Table Row의 약자로 "표의 한 행"이다. <tr> 하나가 가로로 한 줄을 만들고, 그 안에 들어가는 <th>·<td>가 그 줄의 칸들이 된다.
<tr> <th>A</th> <td>B</td> <td>C</td> </tr> → 결과: │ A │ B │ C │ ← 가로 한 줄
※ 핵심 규칙
<tr>안에는 반드시<th>나<td>만 들어간다<tr>개수 = 행(가로줄) 개수<tr>은 직접<table>의 자식으로 들어가야 함
3 <th> vs <td> — 두 가지 셀
왜 셀 종류가 두 개인가?
둘 다 셀이지만 의미와 시각적 표현이 다르다. <th>는 제목용, <td>는 일반 데이터용이다. 이 구분은 단순 디자인 차이가 아니라 스크린 리더와 검색엔진에 표의 구조를 알려주는 의미 정보다.
<th> (Header)
- 제목 셀
- 자동으로 굵은 글씨
- 자동으로 가운데 정렬
- 스크린 리더가 "헤더"로 인식
<td> (Data)
- 일반 데이터 셀
- 일반 글씨
- 왼쪽 정렬 (기본)
- 실제 값이 들어감
※ 흔한 실수: "굵게 보이게 하려고"
<th>를 남발하는 것. 굵기는 CSS로 처리하고, <th>는 제목 의미가 있을 때만 쓴다.반응형
4 표가 만들어지는 흐름
이번 코드의 <table> 안쪽 구조를 한눈에 보면 다음과 같다.
<table> ┌────────────────────────────────┐ │ <tr> ← 첫 번째 행 │ │ <th>제목 셀</th> │ │ <td>1행 2열</td> │ │ <td>1행 3열</td> │ │ </tr> │ │ <tr> ← 두 번째 행 │ │ <th>제목 셀</th> │ │ <td>2행 2열</td> │ │ <td>2행 3열</td> │ │ </tr> │ └────────────────────────────────┘ </table>
| 요소 | 개수 | 의미 |
|---|---|---|
<tr> |
2개 | 2행짜리 표 |
각 <tr> 안 |
3개의 셀 | 3열짜리 표 |
| 전체 | 2 × 3 = 6셀 | 총 6개의 칸 |
5 <style> 안의 CSS — 태그 셀렉터
table, th, td { ... } 의 의미
CSS에서 콤마(,)로 구분된 셀렉터는 "이 모두에 같은 스타일을 적용"한다는 뜻이다. 즉 아래는 세 줄을 따로 쓰는 것과 똑같다.
한 줄로 묶기 (효율)
table, th, td {
border: 1px solid #ccc;
}따로 쓰기 (반복)
table { border: ... }
th { border: ... }
td { border: ... }왜 table에도 td에도 border를 주는가?
HTML 테이블은 table의 외곽 테두리와 각 셀의 테두리가 별개다. <table>에만 border를 주면 바깥쪽 큰 사각형만 그려지고, <td>에만 주면 내부 칸들만 그려진다. 둘 다 줘야 격자가 완성된다.
table { border: 1px solid #ccc; } → 표 바깥쪽 큰 네모만 td { border: 1px solid #ccc; } → 셀 하나하나 네모만 (외곽선 없음) table, th, td { border: 1px solid #ccc; } → 둘 다 → 완전한 격자 ✓
※ 한 단계 더 — border-collapse
- 이 코드는 테두리가 이중선처럼 보일 수 있다 (table 테두리 + 셀 테두리)
- 해결:
table { border-collapse: collapse; }추가하면 한 줄로 합쳐짐 - 실무에서는 거의 항상 collapse를 쓴다
6 padding — 셀 안쪽 여백
padding이 없으면 어떻게 되는가?
padding은 테두리와 글자 사이의 안쪽 여백이다. 없으면 글자가 셀 테두리에 딱 붙어서 답답해 보인다.
padding: 0 → │제목셀│1행 2열│ (글자가 선에 딱 붙음) padding: 5px → │ 제목셀 │ 1행 2열 │ (숨통 트임) padding: 20px → │ 제목셀 │ 1행 2열 │ (넉넉함)
※ 이 코드는
td { padding: 5px; }만 있어서 td에만 여백이 적용된다. th도 여백을 주려면 th, td { padding: 5px; }로 묶어야 한다.7 주석 — //, /* */, <!-- --> 의 차이
이번 원본 코드에는 세 가지 종류의 주석이 섞여 있는데, 사실 HTML과 CSS는 주석 문법이 다르다. //는 사실 HTML/CSS에서 정식 주석이 아니다.
| 위치 | 올바른 주석 | 예시 |
|---|---|---|
| HTML 안 | <!-- 내용 --> |
<!-- tr행을 만들고 --> |
| CSS 안 (style 태그) | /* 내용 */ |
/* 셀 안쪽 여백 */ |
| JS 안 (script 태그) | // 한 줄 또는 /* */ |
JS에서만 // 사용 가능 |
※ 원본 코드의
// html5 웹 표준 같은 주석은 화면에 그대로 출력되거나 코드를 깨뜨릴 수 있다. HTML에서는 반드시 <!-- -->를 쓴다.8 브라우저가 표를 그리는 단계
1
<style> 읽기"table·th·td는 회색 1px 테두리 / td는 padding 5px"이라고 기록
2
<table> 진입표 영역 시작 — 격자 컨테이너 준비
3
첫 <tr> 만남1행 생성 → 안쪽 셀 3개 그림
4
<th>"제목 셀"을 굵게 가운데 정렬로 그림 (테두리만, padding 없음)
5
<td> × 2"1행 2열", "1행 3열"을 일반 글씨 + padding 5px로 그림
6
두 번째 <tr>같은 방식으로 2행 그리기
7
</table>표 영역 종료 — 다음 요소로 넘어감
9 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
<tr> 안 닫기 |
이후 행이 어긋나거나 합쳐짐 | 여는 태그마다 닫기 짝 맞추기 |
table·셀 중 한쪽만 border |
외곽선만 또는 내부선만 보임 | table, th, td 묶어 적용 |
| 이중 테두리로 보임 | 선이 두 줄처럼 굵어 보임 | border-collapse: collapse; |
HTML에 // 주석 |
화면에 글자가 그대로 출력 | <!-- --> 사용 |
<th>를 굵게 보이려고 남발 |
접근성·SEO 점수 하락 | 제목일 때만 <th>, 나머지는 CSS |
| 각 행의 셀 개수가 다름 | 표가 들쭉날쭉 | 모든 <tr>의 셀 수 통일 |
핵심 한 줄 요약
<table>표 전체를 감싸는 컨테이너
<tr>가로 한 줄 (Table Row)
<th>제목 셀 — 굵고 가운데 정렬 자동
<td>데이터 셀 — 실제 값이 들어감
border테두리 — table·th·td 셋 다에 줘야 격자 완성
padding셀 안쪽 여백 — 글자가 선에 안 붙게
콤마 셀렉터table, th, td → 셋에 동시 적용
HTML 주석<!-- --> (CSS는 /* */)
반응형
'php' 카테고리의 다른 글
| HTML 텍스트 기초 — h1~h6 · p · hr · blockquote 완전 정리 (0) | 2026.05.01 |
|---|---|
| HTML 비순서 리스트 — ul · li 완전 정리 (0) | 2026.05.01 |
| HTML 순서 리스트 — ol · type · start 완전 정리 (1) | 2026.05.01 |
| HTML 테이블 구조 — thead · tbody · tfoot 완전 정리 (0) | 2026.05.01 |
| 기본 HTML 문서 구조 완전 정리 (0) | 2026.05.01 |
댓글