table, tr, td 및 th
행, 데이터 셀, 헤더 셀로 기본 표를 만듭니다.
table, tr, td 및 th은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
HTML 표
표는 데이터를 행과 열로 표시합니다. 표 형식의 데이터에 사용하고 페이지 레이아웃에는 사용하지 않습니다.
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Alice</td>
<td>95</td>
</tr>
<tr>
<td>Bob</td>
<td>87</td>
</tr>
</table>표, 행, 데이터 셀 요소
표의 핵심 요소:
<table>— 표 컨테이너<tr>— 표의 한 행<td>— 표의 데이터 셀<th>— 표의 머리글 셀(기본적으로 굵게 표시되고 가운데 정렬됨)
머리글 셀과 데이터 셀 비교
머리글 셀에는 <th>를 사용합니다. 의미를 전달하기 때문입니다:
<table>
<tr>
<th>Language</th> <!-- header: bold + centered by default -->
<th>Year Created</th>
<th>Type</th>
</tr>
<tr>
<td>HTML</td> <!-- data cell -->
<td>1991</td>
<td>Markup</td>
</tr>
</table>기본 표 구조
최소한의 구성이지만 완전한 표:
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Widget Pro</td>
<td>$49.99</td>
<td>In Stock</td>
</tr>
<tr>
<td>Widget Lite</td>
<td>$19.99</td>
<td>Out of Stock</td>
</tr>
</table>CSS로 표 테두리 지정
브라우저는 기본적으로 테두리 없이 표를 표시합니다. CSS로 테두리를 추가합니다:
table {
border-collapse: collapse; /* merge double borders into one */
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 0.75rem 1rem;
text-align: left;
}
th {
background-color: #f5f5f5;
font-weight: 600;
}표는 레이아웃에 사용하지 않습니다
1990년대에는 페이지 레이아웃에 표를 사용했습니다. 이는 오래된 방식이며 다음과 같은 문제를 일으킵니다:
- 화면 낭독기는 표를 데이터로 해석하므로 레이아웃용 표는 사용자를 혼란스럽게 합니다
- 표는 작은 화면에 맞게 조정하기 어렵습니다
- CSS 그리드와 플렉스박스가 모든 레이아웃 용도를 대체했습니다
- 실제 표 형식의 데이터에만
<table>을 사용합니다
반응형 표
표는 작은 화면에서 화면 밖으로 넘칩니다. 가로로 스크롤할 수 있도록 표를 감쌉니다:
<div class="table-wrapper" style="overflow-x: auto;">
<table>
<!-- table content -->
</table>
</div>
/* Or use CSS: */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}빈 셀
빈 셀은 의도적으로 처리합니다:
<tr>
<td>Alice</td>
<td>95</td>
<td></td> <!-- Empty: renders blank -->
</tr>
/* CSS to style empty cells */
td:empty::before {
content: '—';
color: #999;
}thead와 tbody 미리 보기
표에서는 머리글 행과 데이터 행을 구분하기 위해 <thead>와 <tbody>를 사용해야 합니다. 자세한 내용은 다음 레슨에서 다룹니다:
<table>
<thead>
<tr><th>Name</th><th>Score</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>95</td></tr>
</tbody>
</table>열 스타일 지정에 사용하는 요소
<colgroup>과 <col>을 사용하면 열 전체에 스타일을 적용할 수 있습니다:
<table>
<colgroup>
<col style="width: 200px; background: #f9f9f9;">
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
<tr>
<th>Name</th>
<th>Score</th>
<th>Grade</th>
</tr>
</table>CSS로 행 줄무늬 적용
가독성을 위해 행의 색상을 번갈아 적용합니다:
tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #e3f2fd;
}
/* nth-child(even) for even rows instead */빠른 확인
표에서 데이터 셀과 머리글 셀은 어떻게 다른가요?
복습: 표, 행, 데이터 셀, 머리글 셀
표의 기본:
<table>— 표 컨테이너<tr>— 표의 행<td>— 데이터 셀<th>— 머리글 셀(의미를 전달하며 기본적으로 굵게 표시됨)- 깔끔한 테두리에는
border-collapse: collapse를 사용합니다 - 표는 데이터에만 사용하고 페이지 레이아웃에는 사용하지 않습니다
자주 묻는 질문
“table, tr, td 및 th” 강의는 무료인가요?
네 — “table, tr, td 및 th” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“table, tr, td 및 th”에서 뭘 배우나요?
행, 데이터 셀, 헤더 셀로 기본 표를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“table, tr, td 및 th” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.