테이블 기초
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 48번째.
HTML에서 표(table)는 데이터를 행과 열로 구성하는 방법입니다. 표는 일정, 통계 또는 그리드 형태로 나타낼 수 있는 기타 모든 유형의 정보와 같이 구조화된 형식으로 데이터를 표시하는 데 일반적으로 사용됩니다. 표를 만들려면 <table> 태그와 함께 표의 행을 위한 <tr>, 표의 데이터(셀)를 위한 <td>, 그리고 표의 헤더를 위한 <th>와 같은 다른 태그들을 사용합니다.
HTML 테이블의 기본 구조는 다음과 같습니다:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table><table>: 테이블을 정의하는 태그입니다.
<tr>: 테이블 행을 정의하는 태그입니다.
<th>: 헤더 셀을 정의하는 태그입니다. 헤더 셀은 일반적으로 열 또는 행의 제목으로 사용되며 기본적으로 굵게 표시됩니다.
<td>: 표에서 표준 셀을 정의하는 태그입니다.
이 표가 브라우저에서 어떻게 렌더링되는지는 다음과 같습니다:
| 헤더 1 | 헤더 2 |
|---|---|
| 행 1, 셀 1 | 행 1, 셀 2 |
| 행 2, 셀 1 | 행 2, 셀 2 |
이 예제에서는 두 개의 행과 두 개의 열로 구성된 테이블이 있습니다. 첫 번째 행에는 헤더 셀이 포함되어 있으며, 그 다음 행들에는 일반 데이터 셀이 포함되어 있습니다. 이 구조는 읽고 이해하기 쉬운 간단한 그리드 레이아웃을 생성합니다.
챌린지
쉬움다음과 같은 구조의 테이블을 포함하는 HTML 문서를 생성하세요:
- 테이블을 정의하기 위한
<table>태그. - 두 개의 헤더 셀(
<th>)을 가진 헤더용 테이블 행(<tr>). 첫 번째 헤더 셀은 "Name"이어야 하고, 두 번째는 "Age"여야 합니다. - 두 개의 데이터 셀(
<td>)을 가진 테이블 행(<tr>). 첫 번째 셀은 "John"이어야 하고, 두 번째는 "30"이어야 합니다. - 두 개의 데이터 셀(
<td>)을 가진 또 다른 테이블 행(<tr>). 첫 번째 셀은 "Jane"이어야 하고, 두 번째는 "25"이어야 합니다.
치트 시트
HTML 테이블은 <table> 태그를 사용하여 데이터를 행과 열로 구성합니다:
<table>: 테이블을 정의합니다<tr>: 테이블의 행을 정의합니다<th>: 헤더 셀을 정의합니다 (기본적으로 굵게 표시됨)<td>: 표준 데이터 셀을 정의합니다
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>직접 해보기
<!DOCTYPE html>
<html>
<body>
<!-- 여기에 코드를 작성하세요 -->
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
