테이블 기초
Coddy HTML 여정의 기초 섹션에 포함된 레슨. 60개 중 48번째.
HTML에서 표는 데이터를 행과 열로 구성하는 방법입니다. 표는 일정, 통계 또는 격자 형태로 표시할 수 있는 기타 정보를 구조화된 형식으로 보여 주는 데 흔히 사용됩니다. 표를 만들려면 <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라고 적어야 합니다.
직접 해보기
<!DOCTYPE html>
<html>
<body>
<!-- 여기에 코드를 작성하세요 -->
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
기초의 모든 레슨
직접 연습해 보세요: Web 플레이그라운드